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

2 posts, 0 answers
  1. Tisson
    Tisson avatar
    12 posts
    Member since:
    Jun 2020

    Posted 15 Nov 2020 Link to this post

    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 ? 
  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 16 Nov 2020 Link to this post

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

Back to Top