I have a kendo grid with around 80 columns. Based on some logic I am hiding/showing columns. First 20 columns are static, and rest 60 depends on number of employees(eg:- if 20 employees then only 20 columns are showing). By deafault all these 60 columns are hidden. But When loading the data with 40+ employees to Grid browser shows not responding. ie, it takes time to show/hide column.
Please check my code for loading data
$.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.
I have resolved this issue. It was taking time when we are using hideColumn()
and showColumn()
methods of kendo grid. So I just replaced it with normal jQuery hide()
and show()
methods.
Check below code
I have 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.