Kendo -UI：如果複選框被選中（單擊），以編程方式顯示/隱藏網格

Question

在我的UI中，我有一個複選框。我想加載和顯示數據網格（加載數據）只有當我檢查複選框，並隱藏網格，如果它沒有選中。

My UI looks something like this

任何人都可以讓我知道我怎麼能實現呢？

Answer 1

這裏是工作DEMO動態創建只有複選框被選中

下面是從DEMO的代碼片段/隱藏網格，並顯示：

HTML：

<input type="checkbox" data-bind="checked: isVisible, events: { change: clickHandler}"> 
       Show/Hide the datagrid 
<div data-role="grid" 
       data-auto-bind="false"    
       data-filterable="true"    
       data-editable="true" 
       data-toolbar="['create', 'save']" 
       data-columns="[ 
           { 'field': 'ProductName', 'width': 270 }, 
           { 'field': 'UnitPrice' }, 
           ]" 
       data-bind="source: products, 
          visible: isVisible, 
          events: { 
           save: onSave 
          }" 
       style="height: 200px"></div> 
     </div> 

JS：

var viewModel = kendo.observable({ 
     isVisible: false, 
     clickHandler: function(e) { 
      console.log('clicked ', e); 
      this.products.fetch();//load the data in the datagrid. This will be executed only for once. If you want the datagird to be preloaded with the data then set the grid attribute "autoBind" to true 
     }, 
....... 
.....