Kendo MVVM Lưới với các bộ lọc tùy chỉnh

Tôi đang xây dựng một Kendo Lưới sử dụng mô hình MVVM và tôi muốn 2 bộ lọc tùy chỉnh:Kendo MVVM Lưới với các bộ lọc tùy chỉnh

Một bộ lọc lưới chung với extra = false và tùy chỉnh các nhà khai thác
Một bộ lọc cột tùy chỉnh với combobox

Rất giống với this Kendo Grid demo. Tôi chỉ dường như không thể có được nó làm việc với MVVM mô hình sử dụng data-filterable thuộc tính hoặc filterable ui trên cột:

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

Tôi đã created a JS Fiddle để minh họa cho những gì tôi sẽ cho.

Nguồn

2015-10-23 dmathisen

Thứ nhất, đưa ra những 'trong thể lọc: '{ui: ...}' , chỉ nên lọc: {ui: customerNameFilter}. –

Có vẻ như bạn đã đúng. Vẫn không có may mắn. – dmathisen

nó đang hoạt động [ở đây] (http://dojo.telerik.com/uwAvU) –

Trên thực tế nó chỉ bỏ lỡ một số điểm như

data-filterable="customGridFilter" nên trở thành data-filterable="true",
và cũng có trong võ đường kendo họ đang sử dụng jQuery 1.9.1 và bạn là nhỏ gọn (cạnh) mà gây ra vấn đề.

Sau khi thay đổi để jQuery 1.9.1 nó hoạt động tốt như dưới đây

<!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>

Nguồn

2015-11-10 00:56:24

Kendo MVVM Lưới với các bộ lọc tùy chỉnh

Trả lời

Các vấn đề liên quan