Kendo -UI: Afficher/masquer la grille par programmation si la case est cochée (cliqué)

Question

Dans mon interface utilisateur, j'ai une case à cocher. Je veux charger et montrer la grille de données (charger les données) seulement quand je coche la case et cache la grille si elle n'est pas cochée.

My UI looks something like this

Quelqu'un peut-il me faire savoir comment puis-je mettre en œuvre ce?

Answer 1

Voici travaille DEMO pour créer dynamiquement la grille et afficher/cacher que si la case est cochée

est Ci-dessous l'extrait de code de la démo:

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