5 Answers, 1 is accepted
Selection performance may be slower in Internet Explorer if there is a huge number of Grid rows. The delay is caused by slow handling of :not() selectors. Please consider reducing the page size, which will also probably help with regard of the first mentioned issue.
Dimo
Telerik
Rank 1
Hi Dimo,
Reducing the page size also getting slower in IE ,I have given page Size 18 in my grid total 273 records but selection is very slow please any suggestion for this .
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function (options) {
$.ajax({
type: "POST",
dataType: 'json',
url: appName + "/Method/getGrid",
async: false,
success: function (data) {
var grid = $("#grid").data("kendoGrid").dataSource.data(data);
},
error: function (error) {
}
});
}
},
pageSize: 18,
schema: {
model: {
id: "ID",
fields: {
Sature: { type: "string", editable: false, nullable: false },
}
}
}
},
height: 600,
selectable: "row",
editable: false,
scrollable: true,
filterable: true,
sortable: true,
pageable: true,
navigatable: true,
columns: [
{
field: "ID",
title: "ID",
width: "50px",
hidden: true,
},
{
field: "Sature",
title: "Sature",
width: "200px"
},
],
change: function (e) {
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
if (selectedItem !== null) {
roleid = selectedItem.RoleID;
document.getElementById("txtrole").value = selectedItem.Role;
}
grid = $("#grid").data("kendoGrid");
if (grid !== undefined) {
var cell = grid.tbody.find(">tr[data-uid='" + roleid + "'] td:eq(1)");
grid.current(cell);
}
}
}).data("kendoGrid");
Thank you for sharing the Grid configuration.
I made an example with similar properties and it is selecting almost instantly on my end:
https://www.screencast.com/t/tdfFXj8Ml
http://dojo.telerik.com/udiZi/2
As my colleagues Dimo suggested, the main reason for the slower selection is how the Internat Explorer 11 is handling the :not and the :hover, selectors, and the Kendo UI team has no control over how fast a specific browser is handling a commonly used CSS selectors.
Still, we are trying to constantly improve the Grid performance to optimize it for scenarios like this one.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
In Change Method i calling Two methods for getting data for that i send id to that getting data very slow.
here is my code ,
change: function (e) {
var grid = $("#rolegrid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
if (selectedItem !== null) {
$("#editr").removeClass('hide');
$("#newr").addClass('hide');
roleid = selectedItem.RoleID;
document.getElementById("txtrole").value = selectedItem.Role;
$("#txtrole").prop("disabled", true).addClass("k-state-disabled");
PopulatePGrid(roleid); >>>these two are separate grids for getting slow .
PopulateUsersGrid(roleid);
}
In Tabbed grid can u pelase suggestion for this .
Thank you for the clarification.
Indeed when two requests are made on every Grid row selection, this could make the page slow as this will create two server request plus re-rendering of the other Grids.
In this case, we will need, a fully runnable example, so we can inspect the real scenario and advise in which area the performance can be improved.
In general, we can suggest the following:
1) set a small enough pageSize, so the Grids DOM elements are fewer and faster to rendered:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-pageSize
2) If the "PopulatePGrid" and the "PopulateUsersGrid" functions are making Ajax calls on every new selection, another button could be added, so the requests are made only when the user actually wants to populate the other two Grid to ensure that unnecessary request will not be made while the user is clicking different items faster.
Regards,
Stefan
Progress Telerik