@progress/kendo-angular-gantt
Version:
Kendo UI Angular Gantt
113 lines (112 loc) • 4.98 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ToolbarPosition } from '../models/toolbar-settings';
import { TemplateRef } 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 declare class ToolbarTemplateDirective {
templateRef: TemplateRef<any>;
_position: ToolbarPosition;
/**
* 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: ToolbarPosition);
get position(): ToolbarPosition;
constructor(templateRef: TemplateRef<any>);
static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarTemplateDirective, [{ optional: true; }]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ToolbarTemplateDirective, "[kendoGanttToolbarTemplate]", never, { "position": { "alias": "position"; "required": false; }; }, {}, never, never, true, never>;
}