How can I customize the "Add Task" button in the KendoReact Gantt toolbar?

[Sulav]

I'm using the KendoReact Gantt component in my project and would like to customize the default "Add Task" button in the toolbar. I have a couple of requirements I need help with:

1. Customizing the "Add Task" button

   • I’d like to change the label of the button.

2. Customizing the dropdown menu (that appears when an item is selected and "Add Task" is clicked)

   • When an item is selected in the Gantt chart and the "Add Task" button is clicked, a menu appears with options like "Add Above", "Add Below", etc.

   • I'd like to modify or extend this menu — either by changing the labels, hiding certain options, or adding new ones.

I've reviewed the official documentation but couldn’t find clear guidance on customizing this behavior.

Could you please let me know:

• The recommended way to customize the toolbar button and its menu

• Any hooks or props that allow for this level of control

Any example or code reference would be greatly appreciated!

Thanks in advance!

[Yanko]

Hello, Sulav,

You can change the label of the "Add Task" button using the Globalization (custom messages) feature. This allows you to provide a custom label or translate it to another language. Here is an example showing how to set up custom messages:

• https://stackblitz.com/edit/react-r38agzd6?file=app%2Fes.json,app%2Fapp.tsx

Currently, there is no built-in way to add new options or remove existing ones via the components API. As a workaround, you can try using CSS to hide certain options, but this is not viable for adding new options.

For further information about the possible custom messages and an example, refer to the article from our documentation:

• https://www.telerik.com/kendo-react-ui/components/gantt/globalization 

If I can further assist you, please let me know.

Regards,
Yanko
Progress Telerik