검도 ui 격자 필터 데이터 소스 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);