Hi,
I am using a React Grid to display some data where one of the underlying fields is a collection of objects. At present we join this into a comma-separated string server-side, and use the standard GridColumnMenuCheckboxFilter implementation with a text filter type. However, the resulting list of items in the filter menu is just a distinct list of the combination of underlying object names which can be quite long and doesn't take into account each object. Consider the following dataset:
[ { "ProductID": 1, "ProductName": "Product A", "Categories": [ { "CategoryID": "1", "CategoryName": "Category A" } ] }, { "ProductID": 2, "ProductName": "Product B", "Categories": [ { "CategoryID": "1", "CategoryName": "Category A" }, { "CategoryID": "2", "CategoryName": "Category B" } ] }, { "ProductID": 3, "ProductName": "Product C", "Categories": [ { "CategoryID": "1", "CategoryName": "Category A" }, { "CategoryID": "2", "CategoryName": "Category B" }, { "CategoryID": "3", "CategoryName": "Category C" } ] }]
This would give us a Category column with three checkbox filter items: "Category A", "Category A, Category B" and "Category A, Category B, Category C" etc.
I would like to know if it's possible to generate a GridColumnMenuCheckboxFilter that contains the entire set of discrete categories from all product records such that selecting one category will return all product rows that have that category. Using the example above, the three checkbox filter items would be "Category A", "Category B" and "Category C". Selecting Category A would return all rows, selecting Category B would only return Product B and C, selecting Category C would only return Product C.
Assuming this is possible, would it also be possible to customise the sort behaviour?
Kind regards,
David
6 Answers, 1 is accepted
Hello, David,
The GridColumnMenuCheckboxFilter has a data property that allows the developer to render any data items in the menu. They may not be the same as the one in the column:
https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnMenuCheckboxFilterProps/#toc-data
Still, for the filtering and then sorting of the data, this will require a custom logic that matches the application business logic as the Grid and its helper methods are currently only working with single fields (string, number, date, boolean).
Regards,
Stefan
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
Veteran
Thanks Stefan,
How do you implement custom sort and filter logic in the React Grid? Or are you saying it has to be done externally?
Kind regards,
David
Rank 1
Iron
Iron
Veteran
Is it possible to implement custom filter logic while still using the GridColumnMenuCheckboxFilter?
Kind regards,
David
Rank 1
Iron
Iron
Veteran
[quote]The GridColumnMenuCheckboxFilter has a data property that allows the developer to render any data items in the menu. They may not be the same as the one in the column[/quote]
Hi Stefan,
From what I can see if the data passed to GridColumnMenuCheckboxFilter isn't the same type as the grid data type then the GridColumnMenuCheckboxFilter renders with only Check All and undefined options. e.g. https://stackblitz.com/edit/react-az8hrs-yc4saa?file=app%2FcolumnMenu.jsx
Hello, David,
Regarding the more specific questions:
1) How do you implement custom sort and filter logic in the React Grid? Or are you saying it has to be done externally? - Yes, this has to be done externally, we have a process method that handles standard filtering and sorting, but when the field is a complex field of an array of objects, then an external filter and sorting logic have to be used.
2) Is it possible to implement custom filter logic while still using the GridColumnMenuCheckboxFilter? - Yes, this is possible, the GridColumnMenuCheckboxFilter, can still generate the filter based on the chooses items, but the developer has to use custom logic to utilize that information.
3) From what I can see if the data passed to GridColumnMenuCheckboxFilter isn't the same type as the grid data type then the GridColumnMenuCheckboxFilter renders with only Check All and undefined options - If the data has a different structure the column.field has to be changed as well. In the provided example I changed to ProdName and the options were rendered as expected:
https://stackblitz.com/edit/react-az8hrs-2vreun?file=app%2FcolumnMenu.jsx
Regards,
Stefan
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/.
Hello, Nick,
Thank you for the feedback.
Let us know if we can help us providing a better knowledge share.
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.