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 
     }, 
....... 
.....