ToolbarTemplateDirective

Represents the toolbar template of the Gantt.

The template context has the following field:

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

Copy Code
@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-gantt [[kendoGanttHierarchyBinding]="data"]="data" style="height: 400px">
           <ng-template kendoGanttToolbarTemplate [position]="position" let-position="position">
               <button (click)="onClick()" class="k-button">Custom action</button>
           </ng-template>
       </kendo-gantt>
    `
})

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

    public data = [{
      id: 7,
      title: "Software validation, research and implementation",
      orderId: 0,
      start: new Date("2014-06-02T00:00:00.000Z"),
      end: new Date("2014-07-12T00:00:00.000Z"),
      completionRatio: 0.45708333333333334,
      isExpanded: true,
      children: [{
              id: 11,
              title: "Research",
              orderId: 1,
              start: new Date("2014-06-02T00:00:00.000Z"),
              end: new Date("2014-06-07T00:00:00.000Z"),
              completionRatio: 0.5766666666666667,
              isExpanded: true,
              children: [{
                      id: 19,
                      title: "Validation with Customers",
                      orderId: 0,
                      start: new Date("2014-06-02T00:00:00.000Z"),
                      end: new Date("2014-06-04T00:00:00.000Z"),
                      completionRatio: 0.25,
                      isExpanded: true
                  },
                  {
                      id: 20,
                      title: "Market Research",
                      orderId: 1,
                      start: new Date("2014-06-02T00:00:00.000Z"),
                      end: new Date("2014-06-03T02:00:00.000Z"),
                      completionRatio: 0.82,
                      isExpanded: true
                  },
                  {
                      id: 39,
                      title: "Functional and Technical Specification",
                      orderId: 2,
                      start: new Date("2014-06-04T00:00:00.000Z"),
                      end: new Date("2014-06-07T00:00:00.000Z"),
                      completionRatio: 0.66,
                      isExpanded: true
                  }]
          }]
      };

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

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

Selector

[kendoGanttToolbarTemplate]

Inputs

position

Defines the Gantt Toolbar that will use this template.

The possible values are:

• top—The template will be rendered in the top toolbar (if present) only.
• bottom—The template will be rendered in the bottom toolbar (if present) only.
• both—The template will be rendered in both toolbars (if present).