Toolbar
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.
Position
The available settings for specifying the toolbar position are:
top(default)—Locates the toolbar above the header section.bottom—Locates the toolbar under the Gantt panes.both—Displays one toolbar above the header section, and another toolbar below the panes.none—No toolbar is rendered.
The following example demonstrates the different toolbar position options.
Templates
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.