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

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

1 Answer 76 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Tisson
Top achievements
Rank 1
Veteran
Tisson asked on 15 Nov 2020, 02:31 PM
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 ? 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 16 Nov 2020, 07:11 AM

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

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
Tisson
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Share this question
or