표의 열 메뉴 표시 및 숨기기

Question

사용자 메뉴에서 표시 및 숨길 수있는 많은 수의 열이있는 표를 작성하고 있습니다. kendoui 사이트에서

좋은 예는 here

내 문제는 표시/숨기기 메뉴는 모든 컬럼에 대해 동일하지만, 그것은 깊은 각 컬럼의 컬럼 메뉴 내에서 매장된다.

사용자가 복잡한 드롭 다운을 클릭 할 필요가 없도록 해당 메뉴를 한 곳에서만, 또는 테이블 도구 모음에서 또는 바닥 글에 노출시키고 싶습니다.

Answer 1

이것은 다소 까다로울 것이므로 프로그래밍이 필요할 것입니다.

1. 내가 템플릿을 사용하는거야이 들어, 각 열에 대한 도구 모음에서 체크 박스를 정의

   솔루션

   을 기반으로합니다.
2. 각 확인란에 대해 현재 상태에 따라 열을 표시하거나 숨길 수있는 처리기를 정의합니다.
지금

<!-- language: lang-html --> 
<script type="text/kendoui" id="template"> 
    <div> 
     <label for='field-#= item.field #'> 
      #= item.title ? item.title : item.field # 
      <input type='checkbox' id='field-#= item.field #' checked onclick='hideColumn("#=idx#")'> 
     </label> 
    </div> 
</script> 

템플릿 정의, 그리드의 정의에서 우리는 도구 모음이 기능을 실행의 결과가되도록 정의

:

<!-- language: lang-json --> 
toolbar : toolbarGenerator, 

및 tootbarGeneration은 다음과 같습니다

function toolbarGenerator() { 
    var template = kendo.template($("#template").html()); 
    var toolbar = ""; 
    var grid = $("#grid").data("kendoGrid"); 
    $.each(grid.columns, function (idx, item) { 
     toolbar += template({ idx : idx, item : item }); 
    }); 
    return toolbar; 
} 

그 반복 throug h 도구 모음을 생성하기위한 템플릿을 적용하는 모든 열. 나는이 같은 일이 될 것입니다 생각했다 검도 문서를 거쳐 :)

function hideColumn(col) { 
    var grid = $("#grid").data("kendoGrid"); 
    if (grid.columns[col].hidden) { 
     grid.showColumn(+col); 
    } else { 
     grid.hideColumn(+col); 
    } 
} 

그리고 여기 JSFiddle http://jsfiddle.net/OnaBai/GerEN/1/

Answer 2

그리드의 columns 속성에서 사용 가능한 열을 가져 와서 도구 모음 예제를 multiselect과 결합하려고합니다.