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

Angular Data Grid Toolbar Template

The Grid enables you to customize the content and determine the position of the Grid toolbar. To achieve this, nest an <ng-template> inside the <kendo-grid> tag, and apply the kendoGridToolbarTemplate directive.

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:

  • topLocates the toolbar above the group panel or header.
  • bottomLocates the toolbar under the pager.
  • bothDisplays 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: