剑道网格列显示/隐藏决策问题80+列 [英] Kendo grid column show/hide making issue with 80+ columns

问题描述

我有大约80列的剑道网格。基于一些逻辑，我隐藏/显示列。首先20列是静态的，休息60取决于员工数量（例如： - 如果20名员工则只有20列显示）。通过deafault所有这些60列是隐藏的。但与40多个员工将数据加载到网格浏览器显示没有响应。即，它需要时间来显示/隐藏栏。

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.

请检查我的code加载数据。

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.

推荐答案

我已经解决了这个问题。它正在采取时候，我们使用 hideColumn（）和 showColumn（）剑道电网的方法。所以，我只是正常的jQuery 隐藏（）和显示（）方法取而代之。

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.

检查下面code

我已经取代

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

这将是对你有用。

It will be useful for you.

这篇关于剑道网格列显示/隐藏决策问题80+列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！