Kendo grid Performance Issue

6 posts, 0 answers
  1. Rick
    Rick avatar
    1 posts
    Member since:
    May 2013

    Posted 02 Sep 2013 Link to this post



    1. Kendo grid taken time to showing records (When Click button search and display records in Grid).
    2 When select row by clicking on Kendo grid row it taken to much time to select row Why?

  2. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 03 Sep 2013 Link to this post

    Hi Michael,

    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.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Venkat
    Venkat avatar
    3 posts
    Member since:
    Nov 2017

    Posted 05 Dec 2017 in reply to Dimo Link to this post

    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");
       

     

     

     

     

     

     

  4. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 07 Dec 2017 Link to this post

    Hello, Venkat,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Venkat
    Venkat avatar
    3 posts
    Member since:
    Nov 2017

    Posted 07 Dec 2017 in reply to Stefan Link to this post

    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 .
                

     

  6. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 11 Dec 2017 Link to this post

    Hello, Venkat,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top