I have a Kendo Grid where one of the columns contains an array of strings. I would like to use filtering on this column, but it would need to pull the distinct values of the array for each row.
I'm looking for the best approach to achieve my desired result.
i have created the following example where i would want to be able to filter on the classes column
https://dojo.telerik.com/@slberry75/utiXaXaW/10
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.2.829/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.7.0/default/default-ocean-blue.css">
</head>
<div id="studentList"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [
{id: 1, name: 'Harry Potter', classes: ['Arithmancy', 'Potions', 'Divination'], house: 'Gryffindor'}
, {id: 2, name: 'Blaise Zabini', classes: ['Herbology', 'History of Magic', 'Transfiguration'], house: 'Slytherin'}
, {id: 3, name: 'Dennis Creevy', classes: ['Charms', 'Potions', 'History of Magic'], house: 'Hufflepuff'}
, {id: 4, name: 'Luna Lovegood', classes: ['Divination', 'Charms'], house: 'Ravenclaw'}
]
});
$('#studentList').kendoGrid({
columns: [
{ field: 'name', title: 'Student Name' },
{ field: 'classes', title: 'Enrolled Classes', template: function(row) {
return row.classes.join('<br />')
}},
{ field: 'house', title: 'House Affiliation' }
],
dataSource: dataSource,
filterable: { mode: "row"}
});
})
</script>
</html>
1 Answer, 1 is accepted
Hello Stacey,
By default, the Kendo Grid does not provide filtering on columns containing arrays. There is a related feature request that you could vote for and also find more related resources:
- https://feedback.telerik.com/aspnet-mvc/1542853-allow-filtering-on-a-grid-column-containing-an-array
You could also check the following forum thread where such an issue is discussed:
- https://www.telerik.com/forums/kendo-grid-filter-is-not-working-for-array-of-array-data-in-the-grid
However, as a workaround in the Dojo provided in your email you could use a custom filterable.cell.template. Then when the search value is changed, you can apply custom logic to filter the Grid. In the modified Dojo example I am using the setDataSource method to render the filtered items. However, note that this approach may not be suitable for all scenarios as it entirely resets the dataSource for the Grid.
I hope this helps.
Regards,
Neli
Progress Telerik