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

Checkbox filter based on grid data

10 Answers 107 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Veteran
David asked on 18 Sep 2020, 11:50 AM
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?

10 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 22 Sep 2020, 06:57 AM

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

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
David
Top achievements
Rank 1
Iron
Veteran
answered on 22 Sep 2020, 07:36 AM
Thanks Stefan. Is it possible to sort the list as well?
0
Accepted
Stefan
Telerik team
answered on 22 Sep 2020, 01:25 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
David
Top achievements
Rank 1
Iron
Veteran
answered on 24 Sep 2020, 01:15 AM
Great, thanks for your help Stefan.
0
David
Top achievements
Rank 1
Iron
Veteran
answered on 07 Dec 2020, 08:25 AM

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

0
Stefan
Telerik team
answered on 07 Dec 2020, 08:45 AM

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

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
David
Top achievements
Rank 1
Iron
Veteran
answered on 07 Dec 2020, 10:08 AM

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

0
Stefan
Telerik team
answered on 07 Dec 2020, 10:28 AM

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

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
David
Top achievements
Rank 1
Iron
Veteran
answered on 07 Dec 2020, 11:14 AM

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

0
Stefan
Telerik team
answered on 07 Dec 2020, 11:36 AM

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

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/.

Tags
General Discussions
Asked by
David
Top achievements
Rank 1
Iron
Veteran
Answers by
Stefan
Telerik team
David
Top achievements
Rank 1
Iron
Veteran
Share this question
or