Customize Filter Autocomplete options with complex object

1 Answer 66 Views
Grid
Stacey
Top achievements
Rank 1
Stacey asked on 05 Oct 2023, 08:54 PM

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

Sort by
0
Neli
Telerik team
answered on 10 Oct 2023, 10:42 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Grid
Asked by
Stacey
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or