FilterDescriptor to see if a list/array property contains a certain value?

[Bob]

Hi, I am trying to use FilterDescriptor/DataSourceRequest to filter a list property to see if it contains a certain value.  I don't see any filter options for this.  I did see that NestedPropertyTextFilterDescriptor exists for a different one of your products so I wondered if something like that exists in Kendo for Angular.  Or if some other out-of-the-box solution exists???

[Martin Bechev]

Hello Bob, 

Currently, there is no out-of-the-box operator in Kendo UI for Angular’s FilterDescriptor that allows you to filter array or list properties to check if they contain a specific value. There is also no direct equivalent to the NestedPropertyTextFilterDescriptor available in other Telerik products.

Workaround Using a Custom Operator

You can achieve the desired filtering by providing a custom function as the operator for your FilterDescriptor. Here’s a concise example that demonstrates how to filter Grid data where an array property (e.g., Categories) contains a selected value:

valueChange(e) {
  this.value = e;
  gridData = filterBy(data, {
    filters: [{
      value: e,
      field: 'Categories', // your array property
      operator: (arrayFieldValue, filterValue) =>
        Array.isArray(arrayFieldValue) && arrayFieldValue.includes(filterValue)
    }],
    logic: 'or'
  });
}

This approach enables filtering based on whether the specified value exists within the array property of each data item.

Could you please provide more details about your data structure or the specific use case you are targeting? For example:

• What does your data model look like?
• Are you filtering arrays of primitives or objects?
• Which Kendo UI for Angular component are you using (Grid, ListView, etc.)?

Regards,

Martin Bechev
Progress Telerik

[Bob]

Thanks for reply Martin. 

My model has a property that is a list of enums and that is the property that I wanted to filter on to see if the list of enums contains a certain enum value.

I am sending State/DataSourceRequest to the API layer to do server-side filtering on an Entity Framework projected queryable. 

I am allowing the user to select a value from a dropdown that I wanted to then transform to a FilterDescriptor of some sort.  I am not using grid or listview but a for loop outputting divs/cards.

I don't believe the code you provided will work from my specific situation as I as looking for something that could filter on server side and ultimately be translatable to SQL via DataSourceResult/Entity Framework.

For now, I have decided to handle this specific filtering on the server via a LINQ query.

[Martin Bechev]

Hi Bob,

We have similar query in the past, but regarding the Grid where one of the objects contains an array of string values. The entire object should be returned when filtering the string array:

[
    {
      id: 1,
      firstName: 'Grace',
      lastName: 'Li',
      employeeTeams: ['Green', 'Red'],
    },
    {
      id: 2,
      firstName: 'Tom',
      lastName: 'Li',
      employeeTeams: ['Purple', 'Black', 'Blue'],
    },
  ],

https://stackblitz.com/edit/angular-7n3iqi

But again, such filtering should be done manually.