剣道グリッドフィルターデータソースmvvmを使用

Question

jsの代わりに宣言文を使用して剣道グリッドを作成したいとします。

また、データソースを通じて「フィルタ」を宣言文に適用したいと考えています。可能であれば、剣道グリッドのデータバインドプロパティで使用できるオプションがあります。親切にここに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);