Is it possible to customise the selected column header in the grid?

[Mark]

I have added a selected column as per the example in the grid documentation.  By defaul the Grid renders a checkbox to perform a select All and Deselect All.  I wonder if it is possible to customise the rendered header to display something else, 2 buttons for example.

The usecase here is there are rows in my data that I don't allow to be selected.  The problem is that when at least one row in the grid is not selected, the header checkbox will not be checked and clicking on it will keep on trying to perform a select All.

I know I can use state to hold the current status of select All or not, but the checkbox will always remain unticked in this situation and the user will be confused.

[Stefan]

Hello, Mark,

This can be done using the headerCell property of the column:

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

This is an example:

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

As for the selection of the select all checkbox, its checked and unchecked state is determined by the value passed to the "headerSelectionValue" prop. Which means that it may appear as  selected even if not all are selected:

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

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Mark]

Thanks,

That's what I was looking for