Toolbar Template

The toolbar template 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 toolbar provides the following options for defining its position:

  • 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 the another toolbar under the pager.
    selector: 'my-app',
    template: `
      <div class="example-config">
        <input type="radio" id="top" name="position" class="k-radio" value="top" checked (click)="positionChange($event)"/>
        <label class="k-radio-label" for="top">Top</label><br/>
        <input type="radio" id="bottom" name="position" class="k-radio" value="bottom" (click)="positionChange($event)"/>
        <label class="k-radio-label" for="bottom">Bottom</label><br/>
        <input type="radio" id="both" name="position" value="both" class="k-radio" (click)="positionChange($event)"/>
        <label class="k-radio-label" for="both">Both</label><br/>
      <kendo-grid [data]="gridData" style="height: 200px">
           <ng-template kendoGridToolbarTemplate [position]="position">
               <button (click)="onClick()" class="k-button">Custom action</button>
           <kendo-grid-column field="ProductName">
           <kendo-grid-column field="UnitPrice">

class AppComponent {
    public position: 'top' | 'bottom' | 'both' = 'top';

    public gridData = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false
      }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": true

    public onClick(): void {
        console.log("button was clicked");

    public positionChange({ target }): void {
       this.position = target.value;

In this article

Not finding the help you need?