Kendo Grid Column Show / Hide 80+ Column Issue

Question

I have a kendo grid with approximately 80 columns. Based on some logic, I hide / show the columns. The first 20 columns are static, and the remaining 60 depends on the number of employees (for example: - if 20 employees show only 20 columns). By defect, all these 60 columns are hidden. But when loading data with 40+ employees, the Grid browser does not respond. those. It takes time to show / hide the column.

Please check my data upload code

$.ajax({ type: "POST", url: '@Url.Action("GetData", "Employees")', dataType: "json", data: param, success: function (response) { if (response != null) { var empList = response.Employees; grid.dataSource.data([]); grid.dataSource.data(response.Items); //To change the name header and hide/show crew name column if (empList != null) { var listIndex = 0; $('#grdEmployees th[coltype]').each(function (i) { if ($(this).data().title == "HideColumn") { var dataField = "Crew" + (listIndex + 1); $("#grdEmployees thead [data-field=" + dataField + "] .k-link").html(empList[listIndex].Name.toString()); if (empList[listIndex].Name.toString() == "HideColumn") { $('#grdEmployees').data("kendoGrid").hideColumn(dataField); } else { $('#grdEmployees').data("kendoGrid").showColumn(dataField); } listIndex++; } }); } } }, error: function (err) { console.log(JSON.stringify(err)); } }); 

Please let me know any alternative solution to do the same.

Answer 1

I solved this problem. This took a while when we used the hideColumn() and showColumn() methods of the kendo grid. So I just replaced it with the usual jQuery hide() and show() methods.

Check code below

I replaced

 if (empList[listIndex].Name.toString() == "HideColumn") { $('#grdEmployees').data("kendoGrid").hideColumn(dataField); } else { $('#grdEmployees').data("kendoGrid").showColumn(dataField); } 

with

 var colIdx = $(this).index() + 1; if (crewNameList[listIndex].Name.toString() == "HideColumn") { $("#grdEmployees table th:nth-child(" + colIdx + "),td:nth-child(" + (colIdx) + "),col:nth-child(" + (colIdx-1) + ")").hide(); } else { $("#grdEmployees table th:nth-child(" + (colIdx) + "),td:nth-child(" + (colIdx) + "),col:nth-child(" + (colIdx-1) + ")").show(); } 

It will be useful for you.