@progress/kendo-angular-gantt
Version:
Kendo UI Angular Gantt
130 lines (129 loc) • 5.72 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, TemplateRef, Optional, Input } from '@angular/core';
import * as i0 from "@angular/core";
/**
* 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'`.
*
* @example
* ```ts-preview
*
* _@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");
* }
* }
*
* ```
*/
export class ToolbarTemplateDirective {
templateRef;
_position = "top";
/**
* 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).
*/
set position(position) {
this._position = position;
}
get position() {
return this._position;
}
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarTemplateDirective, isStandalone: true, selector: "[kendoGanttToolbarTemplate]", inputs: { position: "position" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGanttToolbarTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; }, propDecorators: { position: [{
type: Input,
args: ['position']
}] } });