带有自定义过滤器的 Kendo MVVM Grid答案

【问题标题】：Kendo MVVM Grid with custom filters带有自定义过滤器的 Kendo MVVM Grid
【发布时间】：2016-01-23 05:12:26
【问题描述】：

我正在使用 MVVM 模式构建 Kendo Grid，我想要 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 来说明我的目标。

【问题讨论】：

首先，去掉那些 ' 在可过滤的：'{ ui: ... }'，应该只是可过滤的：{ ui: customerNameFilter }。
看来你是对的。还是没有运气。
它正在工作here
你是对的。那确实奏效了。谢谢！
嘿@machun，显然这个问题有一些观点和投票。您想“回答”这个问题，以便我将其标记为答案吗？如果没有，我会添加它。

标签： javascript kendo-ui kendo-grid

【解决方案1】：

实际上它只是错过了一些点，例如

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>

【讨论】：