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

GridColumnMenuCheckboxFilter for enum-like field

6 Answers 277 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kyle
Top achievements
Rank 2
Veteran
Kyle asked on 30 Oct 2020, 06:51 PM

Currently trying to use KendoReact v4.0.0 and creating a Grid. Everything is going decently well except for this one small bump.

My data comes from a Web API controller in .NET Core 3.1. One of the properties is an enum, so it returns an integer, but needs to display to the user as a string.

Therefore, one of my columns needs to mimic that. I'm using a cell property to convert the integer to the string. I was also able to find a way to render the GridColumnMenuCheckboxFilter using only text. But I cannot find a way to convert the text back to an integer so that we can send it to the Web API for server-side filtering.

I was hoping to hook into onFilterChange, but that doesn't seem like that will work.

Is there any way to do this yet?

 

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 02 Nov 2020, 02:40 PM

Hello, Kyle,

Thank you for the details.

This is technically possible.

What I can suggest is to keep the current logic for working with strings, and only change the string to integer inside the request. I assume that the request is made based on the Grid data state. In that case, before making the request to the server, loop over the current filters check for the field that has the enum, and based on key-value pair replace the string with the integer.

The Grid will work with the string value and the server will work with the integer.

If there are specific issues implementing this approach, please share more details and a code snippet on how this is set up.

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
Kyle
Top achievements
Rank 2
Veteran
answered on 03 Nov 2020, 08:37 PM

Stefan,

Thank you for the SUPER fast reply.

I took the time to create a StackBlitz: https://stackblitz.com/edit/react-ts-y87rw5?

Obviously I don't have a WebAPI that it can call against, but ensuring that the URL is generated properly would suffice.

Most of this has been pieced together from KendoReact's examples, and except for this one filter, this grid is ready to go thru our QA process.  Thank you so much for your help.

0
Accepted
Stefan
Telerik team
answered on 04 Nov 2020, 11:04 AM

Hello, Kyle,

Thank you for your example.

I updated it, so it changes the filter value before the request. For the test purposes I made it so it shows the correct filter request string under the Grid:

https://stackblitz.com/edit/react-ts-bzagc2?file=app%2FMyDataGrid.tsx

Also, as the example has only one filter I directly used it, but when the Grid will have many filter columns an additional check has to be added to check for the correct field.

I hope this is helpful.

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
Kyle
Top achievements
Rank 2
Veteran
answered on 04 Nov 2020, 10:35 PM

I think you're on to something here.

Two quick thoughts:

1. I really wish we could bake this into the actual GridColumnMenuCheckboxFilter class (or at least the class that renders it). If there's ANYWAY to put that on your roadmap, it'd be appreciated.

2. I'm going to have to fight your example after vacation. I need to make a deep clone of the dataState before sending it to the DataLoader because the filters are being modified on the dataState (no matter where, it seems). Because of this, the GridColumnMenuCheckboxFilter isn't retaining its selected checkboxes.

I'll report back next week.

0
Stefan
Telerik team
answered on 06 Nov 2020, 01:35 PM

Hello, Kyle,

Regarding the feedback:

1. I really wish we could bake this into the actual GridColumnMenuCheckboxFilter class (or at least the class that renders it). If there's ANYWAY to put that on your roadmap, it'd be appreciated. - In general, the enum values should be processed on the server or by the developer on the client. I do understand that if the GridColumnMenuCheckboxFilter does it automatically it will be nice, but there are many cases, as someone may need the text, the other application may need text + id combination and all of these cases are application-specific. If we encapsulate the logic inside the GridColumnMenuCheckboxFilter, in the end, it could be harder for the developer to match the required case.

Still, we are constantly listening for feedback, and if there is a nice elegant solution that will improve this uses case, we will definitely add it to make the component better.

2. I'm going to have to fight your example after vacation. I need to make a deep clone of the dataState before sending it to the DataLoader because the filters are being modified on the dataState (no matter where, it seems). Because of this, the GridColumnMenuCheckboxFilter isn't retaining its selected checkboxes. - We have a great clone method inside our common package that can be very useful for this case. We use it internally, this is why it not documented, but is available from the package:

import { clone } from '@progress/kendo-react-common';

 

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
Kyle
Top achievements
Rank 2
Veteran
answered on 13 Nov 2020, 06:34 PM
Clone was perfect. Thank you!
Tags
General Discussions
Asked by
Kyle
Top achievements
Rank 2
Veteran
Answers by
Stefan
Telerik team
Kyle
Top achievements
Rank 2
Veteran
Share this question
or