# Angular Data Grid Toolbar Template

> Starting with version [`17.0.0`](https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui#v17.0.0), the [ToolBar](https://www.telerik.com/kendo-angular-ui/components/grid/toolbar/grid-toolbar) component was introduced in the Kendo UI for Angular Grid and is now the recommended approach for configuring the Grid's toolbar. You can use the toolbar template as an alternative to the ToolBar component to achieve highly customized solutions.

The [`ToolbarTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/toolbartemplatedirective) enables you to customize the [Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid) toolbar by adding components like buttons, inputs, dropdowns, [`ColumnChooser`](https://www.telerik.com/kendo-angular-ui/components/grid/api/columnchoosercomponent) component 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.

```html
<kendo-grid>
    <ng-template kendoGridToolbarTemplate position="bottom">
        <button kendoGridAddCommand>Add new</button>
        <kendo-grid-spacer></kendo-grid-spacer>
        <kendo-grid-column-chooser></kendo-grid-column-chooser>
    </ng-template>
</kendo-grid>
```

> caution The `ToolbarTemplateDirective` does not support the built-in overflow modes available in the ToolBar component. To utilize overflow functionality, use the [ToolBar component](https://www.telerik.com/kendo-angular-ui/components/grid/toolbar/grid-toolbar) in the Grid instead of the template approach.

The following example demonstrates adding custom content to the Grid toolbar using `kendoGridToolbarTemplate` inside an `<ng-template>`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/toolbar/toolbar-template/basic/source.txt)

## Setting the Toolbar Position

You can display the toolbar above the Grid, below the Grid, or both. To configure this behavior, define its [`position`](https://www.telerik.com/kendo-angular-ui/components/grid/api/toolbartemplatedirective#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 setting the toolbar `position` to `'top'`, `'bottom'`, or `'both'` to control where it renders relative to the Grid.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/toolbar/toolbar-template/source.txt)

## Defining the Spacing between Toolbar Elements

The [`GridSpacer`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridspacercomponent) 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`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridspacercomponent#width) property.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/toolbar/toolbar-template/grid-spacer/source.txt)

## Focusing Custom Toolbar Elements

When the Grid is [`navigable`](https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation) and the `kendoGridToolbarTemplate` contains focusable elements, use the [`GridToolbarFocusableDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridtoolbarfocusabledirective) to ensure proper navigation and prevent the click event from propagating. You can apply the directive to any focusable component, including:

* [`ComboBox`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox)
* [`DropDownList`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist)
* [`MultiSelect`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect)
* [`AutoComplete`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete)
* [`DatePicker`](https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker)
* [`NumericTextBox`](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox)
* [`TextBox`](https://www.telerik.com/kendo-angular-ui/components/inputs/textbox)
* Native HTML elements such as `<button>` or `<input>`

Apply the `kendoGridToolbarFocusable` directive to the component or custom element that you want to be part of the keyboard navigation. To prevent the click event from propagating, also add `(click)="$event.stopPropagation()"` to the element.

```html
<ng-template kendoGridToolbarTemplate>
    
    <kendo-combobox [data]="listItems" kendoGridToolbarFocusable (click)="$event.stopPropagation()"></kendo-combobox>
    <kendo-dropdownlist [data]="listItems" kendoGridToolbarFocusable (click)="$event.stopPropagation()"></kendo-dropdownlist>
    <kendo-textbox kendoGridToolbarFocusable (click)="$event.stopPropagation()"></kendo-textbox>
</ng-template>
```

The following example demonstrates using the `kendoGridToolbarFocusable` directive to manage focus and keyboard navigation for a DropDownList and TextBox inside the Grid toolbar.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/toolbar/toolbar-template/focusable/source.txt)

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

```html
<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>
```

```typescript
public onKeydown(ev: KeyboardEvent, wrapper: HTMLDivElement): void {
    if (ev.key === 'Escape') {
        // Return focus to the wrapper so toolbar navigation can continue.
        wrapper.focus();
    }
    if (ev.key === 'ArrowLeft' || ev.key === 'ArrowRight') {
        // Keep horizontal navigation inside the TextBox.
        ev.stopImmediatePropagation();
    }
}
```

The following example demonstrates combining `kendoGridToolbarFocusable` with keyboard event handlers to manage focus and Tab navigation for a TextBox inside the Grid toolbar.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/toolbar/toolbar-template/focusable-textbox/source.txt)

## Suggested Links

* [`ToolbarTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/toolbartemplatedirective)
* [API Reference of the `GridComponent`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api)