Checkbox filter based on grid data

[David]

The Kendo documentation on how to implement a checkbox list to filter grid column data uses an example ColumnMenu component with hardcoded data. Is it possible to provide an example of how this can be done using the grid data instead?

[Stefan]

Hello, David,

Yes, this is possible by passing the data as a prop to the ColumnMenu:

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

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[David]

Thanks Stefan. Is it possible to sort the list as well?

[Stefan]

Hello, David,

Yes, the data that is passed to the ColumnMenu is passed from the developer.

This means that the developer can process the data as needed, sorted, filtered, etc:

https://stackblitz.com/edit/react-az8hrs?file=app%2FcolumnMenu.jsx

The CheckBoxFilter will render the items that it receives in from the data property, this means we can apply any required data operations to the collection based on the application requirements.

Regards,
Stefan
Progress Telerik

[David]

Great, thanks for your help Stefan.

[David]

Hi Stefan,

Is it possible to set the width of the ColumnMenu? It seems to be fixed and for most applications this results in the options being truncated.

Kind regards,

David

[Stefan]

Hello, David,

This can be done in two way:

1) Using CSS - The following CSS rule will set the widht of the ColumnMenu for all column menus on the page:

.k-grid-columnmenu-popup {
  width: 400px;
}

2) Using the ref of the column menu component to apply it to a specific column menu:

https://stackblitz.com/edit/react-dtx3tz?file=app%2FcolumnMenu.jsx (only for the ProductID column)

Regards,
Stefan
Progress Telerik

[David]

Thanks Stefan,

So there's no way to do this dynamically, or automatically like for jQuery? The data in these grids will change over time so setting a fixed width isn't ideal.

Kind regards,

David

[Stefan]

Hello, David,

The ref approach is dynamic as you can update it on each componentDidUpdate( or useEffect).

Could you please share the acceptable results that are working for the Kendo UI for jQuery menu, and we will see how the same can be done for React?

Regards,
Stefan
Progress Telerik

[David]

Hi Stefan,

Please see this demo: https://demos.telerik.com/aspnet-core/grid/filter-multi-checkboxes

The filter menu width automatically adjusts to fit the content.

Kind regards,

David

[Stefan]

Hello, David,

Thank you for the clarification.

We are planning to add this feature for the columns and the logic for the column menu will be similar.

I can suggest voting for this feature and commenting that it will be nice to have it for the column menu as well:

https://feedback.telerik.com/kendo-react-ui/1494821-grid-column-width-auto-sizing-is-not-available

This will increase its chances to be implemented sooner.

Regards,
Stefan
Progress Telerik