劍道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

其一，拿出那些'在過濾： '{UI：...}' ，應該只是可過濾的：{ui：customerNameFilter}。 –

看起來你是對的。仍然沒有運氣。 – dmathisen

它正在工作[here]（http://dojo.telerik.com/uwAvU） –

其實這只是錯過像

data-filterable="customGridFilter"一些點應該成爲 data-filterable="true"，
，並在劍道道場他們正在使用jQuery 1.9.1，而你是緊湊（邊緣），這導致問題。

改變將jQuery 1.9.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電網與自定義過濾器

回答

相關問題