New to Kendo UI for Angular? Start a free 30-day trial


By default, the Gantt renders a top toolbar which contains a view selector component.

You can customize both the position and the content of the toolbar by setting the toolbarPosition option of the Gantt and providing a Toolbar template.


The available settings for specifying the toolbar position are:

  • top (default)Locates the toolbar above the header section.
  • bottomLocates the toolbar under the Gantt panes.
  • bothDisplays one toolbar above the header section, and another toolbar below the panes.
  • noneNo toolbar is rendered.

The following example demonstrates the different toolbar position options.

View Source
Edit In Stackblitz  
Change Theme:


The ToolbarTemplateDirective of the Gantt enables you to provide any custom content that will be rendered within the Gantt toolbars. To define the toolbar template, nest an <ng-template> tag with the kendoGanttToolbarTemplate directive inside the respective <kendo-gantt> tag.

Use the position input property of the directive to define the Gantt toolbar that will use this template. This approach allows you to display the default toolbar at the top or at the bottom of the Gantt, and to show a custom one in the other position.

Furthermore, the context of the kendoGanttToolbarTemplate directive exposes a position field that represents the position at which the toolbar template is rendered. The possible values are 'top' and 'bottom'. These options allow you to conditionally display different content in the top and bottom toolbar templates if needed.

To display both the default view selector component and any custom content in the Gantt toolbar, place the ViewSelector component within the template alongside other desired content.

The following example demonstrates how to render different content in the Gantt toolbars based on their position.

View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?