ToolbarTemplateDirective

Copy Code
@Component({
    selector: 'my-app',
    template: `
      <div class="example-config">
        <input type="radio" kendoRadioButton id="top" name="position" value="top" checked (click)="positionChange($event)"/>
        <kendo-label class="k-radio-label" for="top">Top</kendo-label><br/>
        <input type="radio" kendoRadioButton id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
        <kendo-label class="k-radio-label" for="bottom">Bottom</kendo-label><br/>
        <input type="radio" kendoRadioButton id="both" name="position" value="both" (click)="positionChange($event)"/>
        <kendo-label class="k-radio-label" for="both">Both</kendo-label><br/>
      </div>
      <kendo-gantt [[kendoGanttHierarchyBinding]="data"]="data" [style.height.px]="400">
           <ng-template kendoGanttToolbarTemplate [position]="position" let-position="position">
               <button kendoButton (click)="onClick()">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(event: MouseEvent): void {
       this.position = event.target['defaultValue'];
    }

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