How to edit column name by double click on the column name?

[Tisson]

I am having one scenario where I need to update/edit column name by double clicking in the column name in the Grid then I can save the updated column name with its data types and icon itself, please find attachments for reference Please let me know how to implement this type of scenario with Kendo-react ? 

[Stefan]

Hello, Tisson,

This can be done, using a headerCellRender prop which will allow adding an onDoubleClick event to the cells, and dynamically rendering an editor inside the cell. The editor can be rendered based on a value inside the state which will determine if this cell should render a name or an editor:

https://www.telerik.com/kendo-react-ui-develop/components/grid/api/GridProps/#headercellrender
Or if this is needed only for a specific column, the headerCell prop of that column can be used:

https://www.telerik.com/kendo-react-ui-develop/components/grid/styling/#adding-custom-header-cells

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

Please let me know if you need additional information on this matter.

Regards,
Stefan
Progress Telerik