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


Represents the toolbar template of the Grid.

The template context has the following field:

  • positionThe position at which the toolbar template is rendered. The possible values are "top" and "bottom".

    selector: 'my-app',
    template: `
      <div class="example-config">
        <input type="radio" id="top" name="position" value="top" checked (click)="positionChange($event)"/>
        <label class="k-radio-label" for="top">Top</label><br/>
        <input type="radio" id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
        <label class="k-radio-label" for="bottom">Bottom</label><br/>
        <input type="radio" id="both" name="position" value="both" (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" let-position="position">
               <button (click)="onClick()">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;






"top" | "bottom" | "both"

The position of the toolbar (see example).

The possible values are:

  • topPositions the toolbar above the group panel or header.
  • bottomPositions the toolbar below the pager.
  • bothDisplays two toolbar instances. Positions the first one above the group panel or header and the second one below the pager.

In this article

Not finding the help you need?