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

Toolbar Template

The ToolbarTemplateDirective enables you to customize the content and determine the position of the Grid toolbar.

To define a toolbar template, nest an <ng-template> tag with the kendoGridToolbarTemplate directive inside the <kendo-grid> tag.

The following example demonstrates how to define the toolbar template.

Example
View Source
Edit In Stackblitz  
Change Theme:

Toolbar Position

The toolbar provides the following options for defining its position:

  • 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 the another toolbar under the pager.

The following example demonstrates the position property in action:

Example
View Source
Edit In Stackblitz  
Change Theme:

Define Spacing between the Toolbar Elements

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

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

Example
View Source
Edit In Stackblitz  
Change Theme: