Kendo -UI: Raster automatisch anzeigen oder ausblenden, wenn das Kontrollkästchen aktiviert ist (geklickt)

Question

In meiner Benutzeroberfläche habe ich ein Kontrollkästchen. Ich möchte das Datagrid laden und anzeigen (lade die Daten) nur, wenn ich das Kontrollkästchen ankreuze und das Gitter ausblenden, wenn es nicht markiert ist.

My UI looks something like this

Kann jemand lassen Sie mich wissen, wie kann ich das umsetzen?

Answer 1

Hier wird das Arbeits DEMO dynamisch das Raster und Show erstellen/nur ausgeblendet, wenn Kontrollkästchen aktiviert ist

Unter dem Codeausschnitt aus der DEMO ist:

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