Kendo 带有自定义过滤器的 MVVM 网格

Question

我正在使用 MVVM 模式构建一个 Kendo 网格，我想要 2 个自定义过滤器：

带有 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 来说明我要做什么。

Answer 1

实际上它只是漏掉了一些点，比如

data-filterable="customGridFilter" 应该变成 data-filterable="true",
并且在 kendo 道场中他们使用的是 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>

Kendo 带有自定义过滤器的 MVVM 网格

Kendo MVVM Grid with custom filters

javascript

kendo-ui

kendo-grid