This is a migrated thread and some comments may be shown as answers.

React Grid Custom GridColumnMenuCheckboxFilter

6 Answers 560 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Iron
Veteran
David asked on 04 Mar 2021, 09:42 AM

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

Sort by
0
Stefan
Telerik team
answered on 04 Mar 2021, 02:19 PM

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/.

0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 04 Mar 2021, 02:28 PM

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

0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 04 Mar 2021, 02:30 PM

Is it possible to implement custom filter logic while still using the GridColumnMenuCheckboxFilter?

Kind regards,

David

0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 05 Mar 2021, 03:01 AM

[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

0
Stefan
Telerik team
answered on 05 Mar 2021, 06:22 AM

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/.

0
Stefan
Telerik team
answered on 11 Mar 2021, 02:13 PM

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.

Tags
General Discussions
Asked by
David
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Stefan
Telerik team
David
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or