Kendo UI showColumn multi-column

Question

Я использую showColumn и hideColumn для отображения и скрытия столбцов в сетке пользовательского интерфейса Kendo. Но теперь, с добавлением заголовков нескольких столбцов, я могу только скрыть и показать заголовки верхнего уровня.

Вот пример из JS:

 

    $('#data-plan').click(function() {   
     $('#data-plan').find('i').toggleClass('show hidden');   
     var grid = $("#lpdatagrid").data("kendoGrid");   
     var col = 0;   
     if (grid.columns[col].hidden) {   
      grid.showColumn(+col);   
     } else {   
      grid.hideColumn(+col);   
     }   
    });   

Использование «0» показывает/скрывает первый столбец уровня заголовка нескольких столбцов. Каковы столбцы «числа» для заголовков второго уровня, которые я могу вызвать с помощью showColumn и hideColumn?

Прошу прощения за плохой код. Я не разработчик.

Answer 1

В столбце, которое вы хотите показать/скрыть, вы можете использовать имя field. Если предположить, что у вас есть сетки, которая имеет Country колонку, сгруппированных под Location, который находится под Contact Info, что-то вроде:

 columns: [ 
      { 
      field: "CompanyName", 
      title: "Company Name" 
      }, 
      { 
      title: "Contact Info", 
      columns: [ 
       { 
       field: "ContactTitle", 
       title: "Contact Title" 
       }, 
       { 
       field: "ContactName", 
       title: "Contact Name" 
       }, 
       { 
       title: "Location", 
       columns: [ 
        { field: "Country" }, 
        { field: "City" } 
       ] 
       }, 
       { 
       field: "Phone", 
       title: "Phone" 
       } 
      ] 
      } 
     ] 

Затем вы можете использовать:

 var grid = $("#grid").data("kendoGrid"); 
     // Get the "Country" column that is 
     var col = grid.columns[1].columns[2].columns[0]; 
     // Check if it is visible or hidden 
     if (col.hidden) { 
      grid.showColumn(col.field); // or directly grid.showColumn("Country"); 
     } else { 
      grid.hideColumn(col.field); // or directly grid.hideColumn("Country"); 
     } 

$(document).ready(function() { 
 
    $("#grid").kendoGrid({ 
 
    dataSource: { 
 
     type: "odata", 
 
     transport: { 
 
     read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" 
 
     }, 
 
     pageSize: 20 
 
    }, 
 
    height: 300, 
 
    pageable: true, 
 
    columns: [ 
 
     { 
 
     field: "CompanyName", 
 
     title: "Company Name" 
 
     }, 
 
     { 
 
     title: "Contact Info", 
 
     columns: [ 
 
      { 
 
      field: "ContactTitle", 
 
      title: "Contact Title" 
 
      }, 
 
      { 
 
      field: "ContactName", 
 
      title: "Contact Name" 
 
      }, 
 
      { 
 
      title: "Location", 
 
      columns: [ 
 
       { field: "Country" }, 
 
       { field: "City" } 
 
      ] 
 
      }, 
 
      { 
 
      field: "Phone", 
 
      title: "Phone" 
 
      } 
 
     ] 
 
     } 
 
    ] 
 
    }); 
 

 
    $("#country").on("click", function() { 
 
    var grid = $("#grid").data("kendoGrid"); 
 
    var col = grid.columns[1].columns[2].columns[0]; 
 
    if (col.hidden) { 
 
     grid.showColumn(col.field); 
 
    } else { 
 
     grid.hideColumn(col.field); 
 
    } 
 
    }); 
 
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" /> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" /> 
 

 
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script> 
 
<button id="country" class="k-button">Toggle Country</button> 
 
<div id="grid"></div>