剣道MVVMグリッドカスタムフィルタ

と私はMVVMパターンを使用して剣道グリッドを構築していると私は2つのカスタムフィルタたい：剣道MVVMグリッドカスタムフィルタ

一般extra = falseとグリッドフィルタとカスタムオペレータ
とカスタム列フィルタをコンボボックス

this Kendo Grid demoとよく似ています。私はちょうどそれが列にdata-filterable属性またはfilterable uiを使用してMVVMパターンで作業するように見えることはできません。

<div data-role="grid" 
    data-filterable="customGridFilter" 
    data-columns="[ 
     { field: 'Id', hidden: 'true' }, 
     { field: 'Name', filterable: '{ ui: customNameFilter }' }, 
     { field: 'Value' } 
    ]" 
    data-bind="source: gridDs"> 
</div>

私は私が行くよ何説明するためにcreated a JS Fiddleをしました。

出典

2015-10-23 dmathisen

以下のように正常に動作します1.9.1、「濾過可能で' それらを取りますフィルタリング可能である必要があります：{ui：customerNameFilter}。 –

あなたが正しいように見えます。まだ運がありません。 – dmathisen

それは働いています[ここ]（http://dojo.telerik.com/uwAvU） –

は実はそれだけで

data-filterable="customGridFilter"のようないくつかのポイントが data-filterable="true"、
になるべきとも剣道の道場で、彼らはjQueryの1.9.1を使用していて、あなたが原因コンパクト（エッジ）で逃しました問題。 '：{...} UI：jQueryのに変更した後

はそれが

1については

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="test"> 
 
    <script> 
 
     var customNameFilter = customNameFilter || null; 
 
    </script> 
 
    <div data-role="grid" data-filterable="true" data-columns="[ 
 
      { field: 'Id', hidden: 'true' }, 
 
      { field: 'Name', filterable: { ui: customNameFilter } }, 
 
      { field: 'Value' } 
 
     ]" data-bind="source: gridDs"></div> 
 
    </div> 
 
    <script> 
 
    $(document).ready(function() { 
 
     customNameFilter = function(e) { 
 
     console.log("test") 
 
     e.kendoComboBox({ 
 
      dataSource: { 
 
      data: [{ 
 
       Id: 1, 
 
       Name: "Test1" 
 
      }, { 
 
       Id: 2, 
 
       Name: "Test2" 
 
      }, { 
 
       Id: 3, 
 
       Name: "Test3" 
 
      }] 
 
      }, 
 
      dataValueField: "Id", 
 
      dataTextField: "Name", 
 
      filter: "contains" 
 
     }); 
 
     }; 
 
     var viewModel = kendo.observable({ 
 
     gridDs: new kendo.data.DataSource({ 
 
      data: [{ 
 
      Id: 1, 
 
      Name: "Test1", 
 
      Value: 3 
 
      }, { 
 
      Id: 2, 
 
      Name: "Test2", 
 
      Value: 5 
 
      }, { 
 
      Id: 3, 
 
      Name: "Test3", 
 
      Value: 2 
 
      }, { 
 
      Id: 4, 
 
      Name: "Test4", 
 
      Value: 7 
 
      }] 
 
     }), 
 
     customGridFilter: { 
 
      extra: false, 
 
      operators: { 
 
      string: { 
 
       contains: "Contains", 
 
       doesnotcontain: "Does not contain", 
 
       eq: "Is equal to", 
 
       neq: "Is not equal to", 
 
       startswith: "Starts with", 
 
       endswith: "Ends with" 
 
      } 
 
      } 
 
     }, 
 

 
     }); 
 

 
     kendo.bind($('#test'), viewModel); 
 
    }); 
 

 
    // this doesn't work 
 
    //var grid = $('#test').data('kendoGrid'); 
 
    //grid.options.filterable = customFilter; 
 
    </script> 
 
</body> 
 

 
</html>

出典

2015-11-10 00:56:24

剣道MVVMグリッドカスタムフィルタ

答えて

関連する問題