Kendo 数据源包含过滤器不起作用

Question

我想通过在数组中显示 ID 来过滤 KendoDropDownList 数据源数据。

据我所知，没有这样的内置过滤器，这就是我决定创建带有标识符的 CSV 列表并使用 contains 过滤器的原因。但不幸的是，这种方法似乎不起作用。请看下面我的fiddle：https://dojo.telerik.com/igEREXUT

有人可以解释为什么 contains 不起作用吗？我希望看到第一和第三项。

$(document).ready(function() {
  var data = [{
      text: "Black",
      value: "1",
      Clients: "-100-,-101-,-103-" //this should be displayed after filtering
    },
    {
      text: "Orange",
      value: "2",
      Clients: "-200-,-101-,-303-"
    },
    {
      text: "Grey",
      value: "3",
      Clients: "-300-,-102-,-103-" //this should be displayed after filtering
    }
  ];

  // create DropDownList from input HTML element
  $("#color").kendoDropDownList({
    dataTextField: "Clients",
    dataValueField: "value",
    dataSource: data,
    index: 0
  });

  var color = $("#color").data("kendoDropDownList");
  color.select(0);

  setTimeout(function() {
    console.log('count before filtering: ' + color.dataSource.view().length);

    color.dataSource.filter([{
      field: "Clients",
      op: "contains",
      value: "-103-"
    }]);

    console.log('count after filtering: ' + color.dataSource.view().length);
  }, 1000);
});

<html>

<head>
  <base href="https://demos.telerik.com/kendo-ui/dropdownlist/index">
  <title></title>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />
  <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>

  <div id="example">
    <div id="cap-view" class="demo-section k-content">
      <h4>Customize your Kendo Cap</h4>
      <h4><label for="color">Cap Color</label></h4>
      <input id="color" value="1" style="width: 100%;" />
    </div>
  </div>

</body>
</html>

Answer 1

你必须使用 operator 属性而不是 color.dataSource.filterop方法。 Refernce link

Kendo 数据源包含过滤器不起作用

Kendo data source contains filter not working

javascript

kendo-ui

kendo-dropdown

kendo-datasource