Kendo ui使用mvvm的网格过滤器数据源

Question

我想仅使用声明性语句而不是js来构建kendo网格。

我也想在声明性语句本身中通过数据源应用“过滤器”。可能的是，如果在剑道网格的data-bind属性中有可用的选项。

请用的jsfiddle

Answer 1

下面是使用MVVM剑道网格的jsFiddle DEMO示出使用具有过滤帮助。

下面是演示代码片段：

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);