Kendo MVVM Grid с пользовательскими фильтрами

Я создаю сетку Kendo с использованием шаблона MVVM, и я хочу два пользовательских фильтра:

Общий фильтр сетки с extra = false и настраиваемыми операторами
Пользовательский фильтр столбцов со списком

Очень похоже на эту демонстрационную версию Kendo Grid. Я просто не могу заставить его работать с шаблоном MVVM с помощью атрибута data-filterable или filterable ui в столбце:

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

Я создал скрипт JS, чтобы проиллюстрировать, что я собираюсь делать.

Ответ 1

На самом деле он просто пропустил какую-то точку, например

data-filterable="customGridFilter" должен стать data-filterable="true",
а также в кендо dojo они используют jQuery 1.9.1, а ваш компактный (край), который вызывает проблему.

После перехода на jQuery 1.9.1 он работает отлично, как показано ниже

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="#" onclick="location.href='http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css'; return false;">
  <link rel="stylesheet" href="#" onclick="location.href='http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css'; return false;">
  <link rel="stylesheet" href="#" onclick="location.href='http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css'; return false;">
  <link rel="stylesheet" href="#" onclick="location.href='http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css'; return false;">

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