Source de données de filtre de grille uzi de Kendo en utilisant mvvm

Question

Je veux construire la grille de kendo en utilisant seulement les déclarations déclaratives au lieu de js.

Je veux également appliquer le "filtre" à travers la source de données dans les déclarations déclaratives elle-même. Possiblly si une option est disponible dans la propriété data-bind de la grille de kendo.

aider Veuillez avec un jsFiddle

Answer 1

Voici la jsFiddle DEMO illustrant l'utilisation de la grille Kendo avec filtrage en utilisant MVVM.

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

HTML:

<div data-role="grid" 
       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> 

JS:

var viewModel = kendo.observable({ 
     isVisible: true, 
     onSave: function(e) { 
      kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")"); 
     }, 
     products: new kendo.data.DataSource({ 
      schema: { 
       model: { 
        id: "ProductID", 
        fields: { 
         ProductName: { type: "string" }, 
         UnitPrice: { type: "number" } 
        } 
       } 
      }, 
      batch: true, 
      transport: { 
       read: { 
        url: "https://demos.telerik.com/kendo-ui/service/products", 
        dataType: "jsonp" 
       }, 
       update: { 
        url: "https://demos.telerik.com/kendo-ui/service/products/update", 
        dataType: "jsonp" 
       }, 
       create: { 
        url: "https://demos.telerik.com/kendo-ui/service/products/create", 
        dataType: "jsonp" 
       }, 
       parameterMap: function(options, operation) { 
        if (operation !== "read" && options.models) { 
         return {models: kendo.stringify(options.models)}; 
        } 
       } 
      } 
     }) 
    }); 
    kendo.bind($("#example"), viewModel);