Kendo -UI : Show / hide grid programmatically if the checkbox is checked (clicked)

Question

In my UI I have a checkbox. I want to load and show the datagrid (load the data) only when I check the checkbox and hide the grid if it is unchecked.

My UI looks something like this

Can anyone let me know how can I implement this?

Answer 1

Here is the working DEMO to dynamically create the grid and show / hide only if checkbox is checked

Below is the code snippet from the 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
        },
.......
.....