Kendo -UI：如果选中复选框（单击），则以编程方式显示/隐藏网格

Question

在我的用户界面中，我有一个复选框。我想加载并显示datagrid（加载数据）只有当我选中复选框并隐藏网格时才会取消选中。

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