All Components

Toolbar Template

The toolbar template of the Grid enables you to customize the content in the toolbar of the Grid and determine its position.

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

The toolbar provides the following options which define its position:

  • top—Above the group panel or header.
  • bottom—Below the pager.
  • both—Displays one toolbar above the group panel or header and the another one below the pager.
@Component({
    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/>
      </div>
      <kendo-grid [data]="gridData" style="height: 200px">
           <ng-template kendoGridToolbarTemplate [position]="position">
               <button (click)="onClick()" class="k-button">Custom action</button>
           </ng-template>
           <kendo-grid-column field="ProductName">
           </kendo-grid-column>
           <kendo-grid-column field="UnitPrice">
           </kendo-grid-column>
       </kendo-grid>
    `
})

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