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

Angular Data Grid Toolbar Template

The ToolbarTemplateDirective enables you to customize the Grid toolbar by adding components like buttons, inputs, dropdowns, and others. To further enhance the functionality of the Grid's toolbar and personalize the user experience, you can also add HTML elements, flexible positioning, and spacing.

To achieve this toolbar customization, nest an <ng-template> inside the <kendo-grid> tag and apply the kendoGridToolbarTemplate directive. Inside the template, add the desired elements and configure them as needed.

When working with focusable elements or components with internal navigation in a navigable Grid, additional configuration is needed.

<kendo-grid>
    <ng-template kendoGridToolbarTemplate position="bottom">
        <button kendoGridAddCommand>Add new</button>
        <kendo-grid-spacer></kendo-grid-spacer>
        <kendo-dropdownlist [data]="listItems" kendoGridToolbarFocusable></kendo-dropdownlist>
    </ng-template>
</kendo-grid>

The following example demonstrates how to define the toolbar template.

Example
View Source
Change Theme:

Setting the Toolbar Position

You can display the toolbar above the Grid, below the Grid, or both. To configure this behavior, define its position option, which accepts the following values:

  • top—Locates the toolbar above the group panel or header.
  • bottom—Locates the toolbar under the pager.
  • both—Displays one toolbar above the group panel or header and another under the pager.

The following example demonstrates the position property in action.

Example
View Source
Change Theme:

Defining the Spacing between Toolbar Elements

The GridSpacer enables you to define spacing between the toolbar inner elements and arrange them in accordance with your preferences. By default, each kendo-grid-spacer element occupies all available space. To override this behavior and specify a custom size, you utilize its width property.

The following example demonstrates how to position an export button in the center of the available toolbar space.

Example
View Source
Change Theme:

Focusing Custom Toolbar Elements

When the Grid is navigable and the kendoGridToolbarTemplate contains focusable elements, such as a DropDownList, use the GridToolbarFocusableDirective to ensure proper navigation. To achieve this, apply the kendoGridToolbarFocusable directive to the component or custom element that you want to be focusable and part of the navigation.

<ng-template kendoGridToolbarTemplate>
    <kendo-dropdownlist [data]="listItems" kendoGridToolbarFocusable></kendo-dropdownlist>
</ng-template>

The following example demonstrates how to focus the DropDownList component inside the toolbar template.

Example
View Source
Change Theme:

Handling Components with Internal Navigation

To ensure proper navigation for focusable components with internal navigation, such as TextBox, wrap the component in a custom container element and apply the kendoGridToolbarFocusable directive.

To navigate within the TextBox, focus the component. To keep navigating between the Grid toolbar elements, focus the TextBox container instead.

<ng-template kendoGridToolbarTemplate>
    ...
    <div #wrapper kendoGridToolbarFocusable (keydown.enter)="textbox.focus()">
        <kendo-textbox #textbox
        (click)="$event.stopImmediatePropagation()"
        (keydown)="onKeydown($event, wrapper)"
        ></kendo-textbox>
    </div>
</ng-template>
public onKeydown(ev: KeyboardEvent, wrapper: HTMLDivElement): void {
    if (ev.key === 'Escape') {
        wrapper.focus();
    }
    if (ev.key === 'ArrowLeft' || ev.key === 'ArrowRight') {
        ev.stopImmediatePropagation();
    }
}

The following example demonstrates how to focus and handle the navigation of the TextBox component inside the toolbar template.

Example
View Source
Change Theme: