100% CPU usage with grid.hideColumn and grid.showColumn for large table (20K Rows) and 64 columns

1 Answer 44 Views
Button Grid
Rohit
Top achievements
Rank 1
Rohit asked on 20 Feb 2022, 07:01 PM | edited on 21 Feb 2022, 01:33 PM

I am expanding and collapsing groups of columns on a button click leveraging an inline headertemplate  like this example in a kendo UI grid. The table is complex with 4 core column groups, with each column groups expanding/contracting 12 columns.

I have this working functionally BUT

  1. Whenever the + or the - button icons are clicked the CPU reaches 100% as a forced reflow occurs as Kendo and Jquery together in concert recalculate the style. See attached screenshot with performance profile. Is there any way to prevent this recalculation that is super expensive and and CPU intensive as It significantly downgrades the user experience. 
  2. When the - icon is clicked  the header group column disappears. This appears to be a bug in show/hide column logic. I have worked around this by forcing a show on the element using a jQuery selector. Is this a known bug when there are a large number of grouped columns ? What might I be doing wrong ?
$("th[data-title=" + column_header + "]").show();

I would love a second pair of eyes on this code  groups/ungroups columns based on button click

function onExpClick(button, db_column_names, column_header) {
    
    var span = $(button).find("span");
    var grid = $("#grid").data("kendoGrid");

    if (span.hasClass("k-i-minus")) {

        span.removeClass("k-i-minus");
        span.addClass("k-i-plus");

        db_column_names.forEach(function(column_name){            
            grid.hideColumn(column_name.concat("_rec"));
            grid.hideColumn(column_name.concat ("_action"));
            grid.hideColumn(column_name.concat ( "_notes"));
        });

        $("th[data-title=" + column_header + "]").show();

    } else {

        span.removeClass("k-i-plus");
        span.addClass("k-i-minus");

        db_column_names.forEach(function(column_name){            
            grid.showColumn(column_name.concat("_rec"));
            grid.showColumn(column_name.concat ("_action"));
            grid.showColumn(column_name.concat ("_notes"));
        });


    }    
};

Thank You,

Rohit

 

1 Answer, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 23 Feb 2022, 06:51 PM

Hello Rohit,

With the information provided in regards to 64 columns and 20K rows, when showing and hiding rows, this will cause the experienced sluggishness.  We have a couple dedicated articles which can help address performance issues specific to the described scenario for the Kendo UI Grid:

Pertaining to the '-' icon, with a smaller amount of columns, the icon appears to be shown as expected with the latest version of Kendo UI jQuery.

Please consider reducing the amount of cells being rendered to increase the performance of the Kendo UI Grid, and let me know if you receive the same behavior upon modification.  Additionally, let me know if you have any questions regarding the matter.

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Button Grid
Asked by
Rohit
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or