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 to it.
The following example demonstrates how to define the toolbar template.
Toolbar Position
The toolbar can be displayed above the Grid, below the Grid or in both locations. 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 the another toolbar under the pager.
The following example demonstrates the position property in action.
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 its width property.
The following example demonstrates how to position an export button at the center of the available toolbar space.
