How to fix the rounding issue in kendo grid for column. - kendo-grid

I am using kendo Grid where i am binding the string value 723086288701357234 in a column which is rounded as `723086288701357200'. I thought its the issue because of bounding the int type model to column so i change it with string but the issue still exists.
bellow the Grid binding.
#(Html.Kendo().Grid<Assets>().Name("rgdSearchTrackingDevices").HtmlAttributes(new { #Style = "text-align:left;font-size:8pt;;width:99%;visibility:hidden;" }).Columns(columns =>
{
columns.ImageColumn("<span class='spirtgrid sprite-Search' title='View' onclick=\"ViewManageDeviceDetails('#=AssetID#') \"></span>").Filterable(false).Groupable(false).Sortable(false).HtmlAttributes(new { #style = "width:30px; text-align:center;" }).HeaderHtmlAttributes(new { #style = "width:30px;" }).Title("View");
columns.ImageColumn("<span class='spirtgrid sprite-Controls' title='Control' onclick=\"ControlDevice('#=AssetID#','#=CompanyID#') \"></span>").Filterable(false).Groupable(false).Sortable(false).HtmlAttributes(new { #style = "width:40px; text-align:center;" }).HeaderHtmlAttributes(new { #style = "width:40px;" }).Title("Control");
columns.Bound(x => x.Alias).Filterable(HtmlExtensions.BoundColumnFilter).ClientTemplate("<span class='link' onclick=\"ViewManageDeviceDetails('#=AssetID#')\">#=Alias#</span>").Filterable(HtmlExtensions.BoundColumnFilter);
columns.Bound(x => x.MDN).ClientTemplate("<span class='link' onclick=\"ViewDeviceDetails('#=AssetID#')\">#=AssetKey#</span>").Filterable(HtmlExtensions.BoundColumnFilter).Title("MDN");
columns.Bound(x => x.IMEI);
columns.Bound(x => x.BatteryPercentage_Converted).Title("Battery %");
columns.Bound(x => x.Company.Company1).Title("Company").ClientTemplate("<span class='link' onclick=\"ViewCompanyDetails('#=CompanyID#')\">#=Company.Company1#</span>").Filterable(HtmlExtensions.BoundColumnFilter);
columns.Bound(x => x.DeviceType.DeviceType1).Title("Device Type").HtmlAttributes(new { #style = "width:130px;" }).HeaderHtmlAttributes(new { #style = "width:130px;" }).Filterable(HtmlExtensions.BoundColumnFilter);
})
.DataSource(datasource => datasource.Ajax()
.Read(read => read.Action(Constants.ControllerName.UserControls_Device, Constants.ActionName.ReadSearchDevice).Data("searchData_TrackingDevice")))
.Filterable(HtmlExtensions.FilterConfiguration)
.Filterable(x => x.Extra(false))
.Sortable(sort => sort.Enabled(true))
.AutoBind(false)
.Resizable(resize => resize.Columns(true))
.Pageable(pagable => pagable.PageSizes(pageSize))
.Scrollable(scroll => scroll.Enabled(true))
.Events(e => e.DataBound("rgdSearchTrackingDevices_DataBound"))
)
here in MDN column i am getting the issue.Please suggest where i am doing wrong.Thank you.

Related

Kendo grid column - show text when editing

I have a kendo grid in a page
I need to show a text when the user start editing a specified column from the grid.
Here is the grid:
#(Html.Kendo().Grid<GGISServices.Models.SilviPrio.GenerateDocumentViewModel>()
.Name("grid")
.AutoBind(false)
.Columns(columns =>
{ ...
columns.Bound(c => c.TreeQ4)
.HeaderTemplate("<a class='k-link' href=''>"+ LanguageService.Instance.Translate("Enum_TreeGroup_4") +"<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q4 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ4', fieldtype: 'decimal' }"))));
columns.Bound(c => c.TreeQ1)
.HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_1") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q1 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ1', fieldtype: 'decimal' }"))));
columns.Bound(c => c.TreeQ2)
.HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_2") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q2 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ2', fieldtype: 'decimal' }"))));
columns.Bound(c => c.TreeQ5)
.HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_5") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q5 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ5', fieldtype: 'decimal' }"))));
columns.Bound(c => c.TreeQ3)
.HeaderTemplate("<a class='k-link' href=''>" + LanguageService.Instance.Translate("Enum_TreeGroup_3") + "<br><span class='subtitle'>" + LanguageService.Instance.Translate("Trees_MeasurementUnits") + "</span></a>")
.HtmlAttributes(new { #class = "tree-q3 pvrf-data tree-column" }).Sortable(true)
.Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Type(HttpVerbs.Post).Data("{ field: 'TreeQ3', fieldtype: 'decimal' }"))));
columns
.Bound(c => c.SilviPrioId)
.ClientTemplate(
"#= actionDetails(data) #"
)
.Title(LanguageService.Instance.Translate("GridLabel_Action"))
.Filterable(false)
.Sortable(false)
.HtmlAttributes(new { #class = "action-column" });
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Filterable()
//.Selectable(selection => selection.Enabled(true))
.Selectable(selection => selection.Mode(GridSelectionMode.Single))
//.Events(e => e.DataBound("SaveState").ExcelExport("ShowLoading"))
.Pageable(pageable => pageable
.Refresh(true)
.Info(true)
.PageSizes(new int[] { 5, 10, 25, 50, 100, 1000 })
.ButtonCount(5)
)
.Events(events => events
.Change("onChange")
.DataBound("onDataBound")
.DataBinding("onDataBounding")
.Edit("onEditing")
.SaveChanges("onSavingChanges")
)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Events(events => events
.Error("error_handler")
.RequestEnd("request_end_handler")
)
.Model( model =>
{
model.Id(p => p.SilviPrioId);
model.Field(p => p.Region).Editable(false);
model.Field(p => p.CostCenter).Editable(false);
model.Field(p => p.UP).Editable(false);
model.Field(p => p.UA).Editable(false);
model.Field(p => p.MeasurementUnit).Editable(false);
model.Field(p => p.PlannedQuantity).Editable(false);
model.Field(p => p.PlannedUnitPrice).Editable(false);
})
.Read(read => read.Action("GetData", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }))
.Update(update => update.Action("Editing_Update", "Document", new { Area = GGISWeb.AreaModules.SilviPrio }).Data("additionalUpdateInfo"))
.PageSize(25)
)
.Resizable(resize => resize.Columns(true))
)
I need to show a text, something like this,
enter image description here
but immediately when the user starts editing the fields TreeQ4, TreeQ1
I have searched on the net, and I have founded something with the HtmlAttributes(title, but it is not working like this.
Can you please advise how can I resolve?
Use the kendo grid edit event and then append the text to a html element in the event function.

Newly added row gets disappear in kendo grid

I have a kendo grid and a AddRow button.On AddRow Button click I am adding a new row to kendo grid.When I click on AddRow button, new row gets added sucessfully but clicking anywhere else in the page except first column of newly added row,row disappears.Here is my code on button click:
$('#AddRow').click(function () {
grid = $('#grdclaimantTypeTips').data("kendoGrid");
grid.addRow();
row = grid.tbody.find(".k-grid-edit-row");
grid.select(row);
}
Here is my code for kendo grid:
#(Html.Kendo().Grid<ClaimPro.Data.ClientAttributeDO>()
.Name("grdclaimantTypeTips")
.Columns(columns =>
{
columns.Bound(Type => Type.claim_type_name).Title(Resource.ClaimType).Width(80).EditorTemplateName("ClientAttributesDDL").EditorViewData(new { columnName = "claim_type_cd" });
columns.Bound(Type => Type.claimant_name).Title(Resource.Claimant).Width(120).ClientTemplate("#=claimant_name_changed#");
columns.Bound(Type => Type.tip).Title(Resource.Tip).Width(200).HtmlAttributes(new { #class = "Wrap" });
columns.Bound(Type => Type.tip).Hidden();
columns.Bound(Type => Type.tip).Hidden();
columns.Bound(Type => Type.id).Hidden();
})
.Scrollable()
.Sortable()
.Filterable()
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Single);
selectable.Type(GridSelectionType.Row);
}
)
.Pageable(pageable => pageable.Input(true).PageSizes((int[])ViewData["DefaultDropdownSize"]))
.Resizable(resize => resize.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(e => e.Edit("onEditGrid"))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Batch(true)
.Model(model => model.Id(c => c.id))
.Model(model => model.Field(p => p.claimant_name).Editable(false))
.Read(read => read.Action("GetClaimantTypeDetails", "ClientAttribute"))
)
)

Column with menu in each cell with menu items

I want to create a menu item in each cell using Kendo Grid MVC I have managed to get the grid to display with the menu item in each cell but when I click on the menu I don't see the menu items.
Need the menu items to show in their own column this is why I have not bound it to a specific property.
Any ideas on what I'm doing wrong?
#(Html.Kendo().Grid(Model)
.Name("gridDropDownMenu")
.Columns(columns =>
{
columns.Template(#<text></text>).Title("").Width(120).HtmlAttributes(new { #class = "templateCell" }).ClientTemplate(
Html.Kendo().Menu()
.Name("menu_#=ProductID#")
.Items(its =>
{
its.Add().Text("Actions").Items(nested =>
{
nested.Add().Text("Test 1");
nested.Add().Text("Test 2");
});
})
.ToClientTemplate().ToHtmlString()
);
columns.Bound(p => p.ProductName);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:250px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.ProductID);
//model.Field(p => p.ProductID).Editable(true);
model.Field(p => p.CategoryID).DefaultValue(1);
})
.Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
.Update(update => update.Action("ForeignKeyColumn_Update", "Home"))
.Create(create => create.Action("ForeignKeyColumn_Create", "Home"))
.Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Home"))
)
)
Resolved by adding the following: .Events(ev => ev.DataBound("initMenus"))
function initMenus(e) {
$(".templateCell").each(function(){
eval($(this).children("script").last().html());
});
}

Kendo Grid simple ajax binding and sorting

The error that i have received when tried to sort the Kendo grid by clicking on the Customer ID column is: {"Invalid property or field - 'CustomerID' for type: OMS_CUSTOMER"}. What else is needed to bind the columns of grid, model view and model. Thanks
controller _read function:
IQueryable<OMS_CUSTOMER> CustomerList = this.dbContext.OMS_CUSTOMERs;
DataSourceResult result = CustomerList.ToDataSourceResult(request
, ModelState
, c => new CustomerViewModel
{
CustomerID = c.OMS_CUSTOMER_ID,
CustomerName = c.CUSTOMERNAME
});
return Json(result);
View:
#model IEnumerable<NCBA.ViewModels.CustomerViewModel>
#(Html.Kendo().Grid<NCBA.ViewModels.CustomerViewModel>()
.Name("grid-CustomerViewModel")
.DataSource(dataSource => dataSource
.Ajax()
.Model(
model =>
{
model.Id(cust => cust.CustomerID);
}
)
.Create(create => create.Action("_Create", "Customer"))
.Read(read => read.Action("_Read", "Customer"))
.Update(update => update.Action("_Update", "Customer"))
.Destroy(destroy => destroy.Action("_Delete", "Customer"))
)
.Columns(columns =>
{
columns.Bound(c => c.CustomerID);
columns.Bound(c => c.CustomerName);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
}).Title("Commands").Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
)

Multiple Kendo UI Grid with dropdown editor templates edit issues in ASP.NET MVC razor page

I have two Kendo UI grids with drop down editor template columns in an ASP.NET MVC razor page.Both grids are having one row always and working fine with edit and update.
But when the user clicks one first grid edit and trying to click the second grid edit then the editor templates are not working for the second grid. it is showing the grid values within a textbox. Both grids are sharing same editor templates for the columns. No errors in the browser console.
I tried moving these grids in partial views and try to create different editor templates for each grid but always the result is the same.
The funny thing is that if you edit in the second grid first and then click the first grid edit it doesn't create any problem and shows all the dropdown values with editor templates. (first and second grid means from top to bottom)
both grids have different models but share the same class for the model.
I am giving the sample code here ..please help me ..already spent lot of time on this.
#model ProjectName.ViewModel.EmployeesViewModel
#(Html.Kendo().Grid(Model.CasualEmployees)
.Name("GridCasualEmployees")
.Columns(columns =>
{
columns.Bound(i => i.Frequency).Title("Frequency").EditorTemplateName("Frequency").ClientTemplate("#:Frequency#").HtmlAttributes(new { #style = "text-align:Left; " }).Width(75);
columns.Bound(i => i.Quarter).Title("Quarter").EditorTemplateName("Quarter").ClientTemplate("#= kendo.toString(Quarter,\"MMM yyyy\") #").HtmlAttributes(new { #style = "text-align:left; " }).Width(75);
columns.Bound(i => i.EmpId).Hidden();
columns.Command(command => command.Edit()).Width(175);
})
.ToolBar(toolbar => toolbar.Create())
.Editable((editable => editable.Mode(GridEditMode.InLine)))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(s => s.EmpId);
model.Field(s => s.Frequency);
model.Field(s => s.Quarter);
})
.Create(update => update.Action("CreateEmployee", "Employee"))
.Read(read => read.Action("ReadEmployee", "Employee"))
.Update(update => update.Action("UpdateEmployee", "Employee"))
)
)
#(Html.Kendo().Grid(Model.PermanentEmployees)
.Name("GridPermanentEmployees")
.Columns(columns =>
{
columns.Bound(i => i.Frequency).Title("Frequency").EditorTemplateName("Frequency").ClientTemplate("#:Frequency#").HtmlAttributes(new { #style = "text-align:Left; " }).Width(75);
columns.Bound(i => i.Quarter).Title("Quarter").EditorTemplateName("Quarter").ClientTemplate("#= kendo.toString(Quarter,\"MMM yyyy\") #").HtmlAttributes(new { #style = "text-align:left; " }).Width(75);
columns.Bound(i => i.EmpId).Hidden();
columns.Command(command => command.Edit()).Width(175);
})
.ToolBar(toolbar => toolbar.Create())
.Editable((editable => editable.Mode(GridEditMode.InLine)))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(s => s.EmpId);
model.Field(s => s.Frequency);
model.Field(s => s.Quarter);
})
.Create(update => update.Action("CreateEmployee", "Employee"))
.Read(read => read.Action("ReadEmployee", "Employee"))
.Update(update => update.Action("UpdateEmployee", "Employee"))
)
)
#(Html.Kendo().DropDownListFor(i => i)
.Name("Quarter")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Quarters)
.OptionLabel("Select Quarter")
)
#(Html.Kendo().DropDownListFor(i => i)
.Name("Frequency")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Frequencies)
.OptionLabel("Select Frequency")
)
public class EmployeesViewModel
{
public List<Employee> CasualEmployees{ get; set; }
public List<Employee> PermanentEmployees{ get; set; }
}
Thanks in advance,