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

[Rohit]

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

 

[Patrick | Technical Support Engineer, Senior]

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:

• Common Mistakes - Using Too Many Columns
• Best Practices 
  

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