Rank 1
Iron
Iron
Hi, I recently created a grid with a multiselect filter and noticed that the selected values are not showing if the user selects more than one item and then filters. I could reproduce the behaviour in a short dojo script which comes from the telerik examples.
Is there any reason for this behaviour or did I forget something that makes the filter control fail? If this is a bug, is there a workaround?
In the example, the field that contains the filter is "Name" (2nd column).
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-ocean-blue.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div id="grid"></div>
<script>
var data = [
{ id: 1, name: "Fred", key: 1, value: "Green" },
{ id: 2, name: "Jed", key: 11, value: "Jorgensen" },
{ id: 3, name: "Red", key: 2, value: "Blah" },
{ id: 4, name: "Ted", key: 23, value: "Bleh" },
{ id: 5, name: "Ed", key: 3, value: "Toast" },
{ id: 6, name: "Zed", key: 4, value: "Smith" },
{ id: 7, name: "Ed", key: 41, value: "Johnson" }
];
$(function() {
var names = _.sortBy(_.uniq(_.pluck(data, "name")), function(n) { return n; });
function createMultiSelect(element) {
element.kendoMultiSelect({
dataSource: names
});
}
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" },
key: { type: "number" },
value: { type: "string" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
filterable: true,
columns: [
{field: "id", title: "Id"},
{
field: "name",
title: "Name",
filterable: {
ui : createMultiSelect,
extra: false
}
},
{field: "key", title: "Key"},
{ field: "value", title: "Value"}
]
});
});
</script></body>
</html>
1 Answer, 1 is accepted
Hello, Jan-Frederik,
I suppose you came across our How-To article on the matter. You can see a change event handler which is missing in the code you shared.
change: function(e) {
var filter = { logic: "or", filters: [] };
var values = this.value();
$.each(values, function(i, v) {
filter.filters.push({field: "name", operator: "eq", value: v });
});
console.log(this.dataSource.data());
dataSource.filter(filter);
}Here is a complete example for reference.
Let me know how that works for you.
Regards,
Martin
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Hello, Jan-Frederik, my apologies for missing the issue. There appears to be another line missing in the createMultiSelect function that changes the expected behaviour from the How-To article.
function createMultiSelect(element) {
element.removeAttr("data-bind");
element.kendoMultiSelect({
dataSource: names,
change: function(e) {
var filter = { logic: "or", filters: [] };
var values = this.value();
$.each(values, function(i, v) {
filter.filters.push({field: "name", operator: "eq", value: v });
});
console.log(this.dataSource.data());
dataSource.filter(filter);
}
});
}
Rank 1
Iron
Iron