GridColumnMenuCheckboxFilter for enum-like field

[Kyle]

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?

 

[Stefan]

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

[Kyle]

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.

[Stefan]

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

[Kyle]

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.

[Stefan]

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

[Kyle]

Clone was perfect. Thank you!