Custom header checkbox for grid with multiple option in dropdown

[Mukesh]

     Hi,

Can we have custom header checkbox for grid with multiple option like in gamil. Screen shot attached for reference

We want to have a checkbox with drop down having couple of option like page select (which will select record on page) and grid select which will select all records across all pages.

Can we achieve this in kendo react grid.

 

 

[Stefan]

Hello, Mukesh,

This can be achieved using the headerCellRender of the Grid. This will be fired for each cell in the header including the one for the selection. Then based on the application logic a DropDown or other component can be added to select the desired rows:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-headercellrender

I made an example showcasing a possible approach:

https://stackblitz.com/edit/react-jdzb7h?file=app/main.jsx

Please have in mind that the implementation is only for demonstration purposes on the logic executed when a value is selected will depend on the application.

Regards,
Stefan
Progress Telerik

[Mukesh]

Thanks for the reply.

But in this example i want couple of things to work which are not working.

1. I should able to check the header check box which is currently not happening.

2. When i select any record in the grid the intermediate icon should come at header checkbox.

regards,

Mukesh Patha

[Mukesh]

It will be also helpful if you provide an example with paging.

[Stefan]

Hello, Mukesh,

I have added this to the previews example with paging:

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

Please have in mind that this functionality and how it will work(selecting all records, only a single page and the intermediate state etc ) are all achieved with custom logic that depends on the application requirements. Please examine the code to see how this is achieved. If this have to be extended to meet the application requirements, the current logic needs to be modified. I only make these examples, to show a possible approach how it can be achieved, but this is not a built-in functionality and has to be tested and extended when used in a real application.

Regards,
Stefan
Progress Telerik

[Mukesh]

Hi,

When i selecting/unselecting header checkbox. The dropdown is getting opened. Is there any to to prevent opening of drowdown on selection/unselection.

This doesn't look quite right when dropdown opens on header selection.

[Stefan]

Hello, Mukesh,

This can be done if the DropDownList open state is controlled via the opened property:

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/DropDownListProps/#toc-opened

This property will allow controlling in which cases the DropDownList will be open and in which not.

Regards,
Stefan
Progress Telerik