Question

我正在使用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来说明我的目标。

Answer 1

实际上它只是错过了像

这样的观点

data-filterable="customGridFilter"应该成为 data-filterable="true"，
并且在kendo dojo中他们使用jQuery 1.9.1而你的是紧凑（边缘）导致问题。

更改为jQuery 1.9.1之后，它可以正常工作，如下所示

＆＃13;

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

＆＃13;

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

1 个答案: