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

Question

在我的 UI 中，我有一个复选框。我只想在选中复选框时加载并显示数据网格（加载数据），如果未选中则隐藏网格。

My UI looks something like this

谁能告诉我如何实现这个？

Answer 1

这里是工作 DEMO 动态创建网格并仅在选中复选框时显示/隐藏

以下是 DEMO 中的代码 sn-p：

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