Checkbox filter based on grid data

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

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

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

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;
}

Regards,
Stefan
Progress Telerik

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

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

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

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