Я хочу отфильтровать данные источника данных KendoDropDownList, указав идентификатор в массиве.
Насколько я знаю, таких встроенных фильтров нет, поэтому я решил создать список CSV с идентификаторами и использовать фильтр contains. Но, к сожалению, этот подход, похоже, не работает. Пожалуйста, смотрите мою скрипку ниже: 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>