검도 UI showColumn 다중 열

Question

showColumn 및 hideColumn을 사용하여 검도 UI 격자의 열을 표시하거나 숨 깁니다. 그러나 다중 열 머리글이 추가되어 최상위 수준의 머리글 만 숨기거나 표시 할 수 있습니다.

 

    $('#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"프로그램을 사용하여 다음

여기에 JS의 일례이다. showColumn 및 hideColumn과 함께 호출 할 수있는 두 번째 수준 헤더의 열 "숫자"는 무엇입니까?

불량 코드에 사과드립니다. 나는 개발자가 아니다.

Answer 1

표시/숨기기를 원하는 열에서 field의 이름을 사용할 수 있습니다. 당신이 Contact Info 아래 Location에 따라 그룹화 Country 열이있는 그리드, 뭔가를했다고 가정 :

 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>