Kendo 网格列 show/hide 80 多列出现问题

Question

我有一个大约有 80 列的 kendo 网格。根据一些逻辑，我是 hiding/showing 列。前 20 列是静态的，其余 60 列取决于员工人数（例如：- 如果有 20 名员工，则只显示 20 列）。默认情况下，所有这 60 列都是隐藏的。但是当将 40 多名员工的数据加载到网格浏览器时，显示没有响应。即，show/hide 列需要时间。

请检查我的加载数据代码

      $.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));                
            }
        });

请让我知道执行相同操作的任何替代解决方案。

Answer 1

我已经解决了这个问题。当我们使用 kendo 网格的 hideColumn() 和 showColumn() 方法时需要时间。所以我只是用普通的 jQuery hide() 和 show() 方法替换了它。

检查下面的代码

我已经替换了

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

和

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();                           
}

它会对你有用。

Kendo 网格列 show/hide 80 多列出现问题

Kendo grid column show/hide making issue with 80+ columns

javascript

jquery

asp.net-mvc-4

kendo-grid