New to Kendo UI for Angular? Start a free 30-day trial
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'
.
@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).