Hide/Show all columns in kendo grid in one go

Question

I have 120 columns in kendo grid, and have select all and deselect all functionality. If I go with for each loop it takes huge time to hide or show all column. Is there any way to hide/show all columns in one call.

Just want to mention kendo showColumn/hideColumn is very slow.

$(".some-class").each(function(){
 var field1 = $(this).data("field");
 input.find('label').addClass('enableCheck');
 input.find('label').removeClass('disableCheck');
 $("#grid-id").data("kendoGrid").showColumn(field1);
}

Answer 1

Well I have created a demo of this kind of scenario for you: Show/Hide all columns

This uses the inbuilt show/hide function for the grid and using a slightly larger grid than yours approx 130 columns on average it is completing the operation in sub 2 seconds. I have added a "timer" so you can see from the point it hits the looping of the columns to the end of the operation how long it takes.

 $("#clickme").on('click',function(){
                   var grid =$("#grid").data("kendoGrid"); 

                    var columns = grid.getOptions().columns; 

                    var start = new Date().getTime(); 

                    columns.forEach(function(me){

                      if(me.hidden !== undefined && me.hidden === true)
                      {
                        grid.showColumn(me.field); 
                      }
                      else 
                      {
                        grid.hideColumn(me.field); 
                      }

                      //console.log(me); 

                    }); 

                    var end = new Date().getTime(); 
                    console.log(start,end, end-start); 
                    $("#timer").text((end-start)/1000 + ' Seconds to run'  ); 

                  }); 

All this does is gets the columns within the grid and then checks to see if it is currently hidden (if it is then it will show it otherwise it will hide it)

This is just bound to a simple button that you can click underneath the grid.

For this type of operation I think sub 2 seconds is more than quick enough and "feels" about right for this number of columns as depending on how many rows you have on the current page it has to hide all those elements as well.