Use GridColumnMenuCheckboxFilter for ComboBox Column

[Jie]

Hi,

I have a grid with single column "color":

[
  {color:1},
  {color:2},
  {color:3}
]

The color column is rendered using a ComboBox cell with ComboBox data:

[
  {id: 1, name: "Red"},
  {id: 2, name: "Blue"},
  {id: 3, name: "Yellow"}
]

So the ComboBox displays the name of the color, and the value is the id of the color. Everything works fine so far. Now I want to use GridColumnMenuCheckboxFilter as the column filter.  But the filter shows [1, 2, 3] as the options because that is all the values of the column. How to show the color names instead?

 

Thanks!

Jie

[Konstantin Dikov]

Hello Jie,

The GridColumnMenuCheckboxFilter is not designed to handle such scenario and it will be difficult to customize it in such a way. It would be easier to create a new field with the color names before setting the data to the Grid and bound that field to the column. This will allow the GridColumnMenuCheckboxFilter to work with the color names.

As for the id, you can still store that value in your data items, but the column will work with that mapped field.

For a solution where the column field is set to the "id" and not the "name", you can try to modify the data of the GridColumnMenuCheckboxFilter by mapping the id values with the names and when the user checks some names, map them back within the new filter expressions:

• https://stackblitz.com/edit/react-gnvle6-nafmy2?file=app%2Fmain.jsx

With the above option however the checked value will not be visible once the menu is closed and opened again, because the filter expression will be for a different field. This is why the first option might be the only possible solution for the requirement. 

 

Regards,
Konstantin Dikov
Progress Telerik

[Jie]

Yep, adding a new field is the easiest way to solve the problem. I did successfully create a customized filter for combox field, but running into another problem where exported excel shows the color id. I didn't find a solution to customize the excel cell using combobox data, so I gave up on that approach.

[Konstantin Dikov]

The ExcelExport has its own "data" property and you can use different mapping for it, where you can set the value that you want to display to the field in question. This will allow you to have one mapping for the Grid and different one for the export:

• https://www.telerik.com/kendo-react-ui/components/excelexport/api/ExcelExportProps/#toc-data

[Jie]

That makes sense. Thanks!