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

标签 javascript kendo-ui kendo-dropdown kendo-datasource

我想通过在数组中显示 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>

最佳答案

您必须在color.dataSource.filter方法中使用operator属性而不是opRefernce link

关于javascript - Kendo 数据源包含过滤器不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50287996/

相关文章:

javascript - 在当前/新窗口中显示 xml

c# - Selenium 网络驱动程序 : select value from KendoUI DropDownList

javascript - 选择时,Kendo 调度程序自定义 View 未获得正确的类

angularjs - asp.net web api 使用 angularJS 调用自定义方法

javascript - KendoDropDownList TabIndex 不生效

javascript - Jquery Repeater 解析 jquery 中的值

javascript - 为什么 onclick() 在按钮标签内不起作用?

javascript - CannonJS 锁定特定轴上的旋转

javascript - Kendo UI 的加载指示器?