Determines whether nonworkingDays/nonworkingHours are taken into considuration when determining the dateEnd of the tasks. When this property is enabled the dateEnd of the tasks is calculated to include only the actual working time. By default it's disabled and only calendar time is used.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [adjustToNonworkingTime]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Recalculates the tasks that are connected and re-schedules them according to their connections. If no connections are present, autoScheduling has no effect until a connection is created. Connection types determines the start/end date limits of the tasks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [autoSchedule]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Affects the tasks only when autoSchedule is enabled. When set to true, the tasks are strictly scheduled ( according to their connections ) and dragging is not allowed.
Users can set lag to specific connections to determine a delay of overlap of between the two tasks ( interval of time in miliseconds ). Lag one of the attributes of a task connection and should be set in the dataSource where the task connections are defined.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [autoScheduleStrictMode]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the scroll speed when dragging when autoScroll property is set.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [autoScrollStep]='10'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Enabled/Disables the colummn header menu. When enabled and the user hovers a column header, a drop down button will appear that triggers a column menu for quick actions like sorting, filtering, etc. The actions depend on the enabled Gantt features, for example the filtering action will be available only if filtering is enabled for the element.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [columnMenu]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Sets or gets the column's min width.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [columnMinWidth]='"100px"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines whether the Table columns are resizable or not. When enabled it is possible to resize the columns from the header cells of the Table in both Task and Resource timelines.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [columnResize]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines resize feedback is used during column resizing. This property is applicable only when columnResize is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [columnResizeFeedback]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Gantt's current time. By default it is the today's date.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Enables/Disables the current time indicator. Current time indicator shows the current time in the appropriate view cells.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [currentTimeIndicator]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the refresh interval in seconds for the currentTimeIndicator.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [currentTimeIndicatorInterval]='60'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Gantt export file name.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the tasks that will be loaded inside the Timeline. Each item represents an object that should contain the following properties:

• label - the label of the Task
• dateStart - the starting date of the Task. Should be a string representing a valid date.
• dateEnd - the ending date of the Task. Should be a string representing a valid date.
• type - determines the type of the task. Whether it's a simple task, a project or a milestone. Each type of task has specific behavior and additional attributes.

.
Additional properties:

• connections - an array of objects representing the connection between two tasks. Each connection (object) should have the following properties :
  • target - a number representing the index of the target task
  • type - a number representing the type of the connection. Four types of connections are available:
    • 0 - is a connection of type Start-to-Start
    • 1 - is a connection of type End-to-Start
    • 2 - is a connection of type End-to-End
    • 3 - is a connection of type Start-to-End
  • lag - a number that determines the delay between two connected auto scheduled tasks. Lag property can be a positive or a negative number. When negative it determines the overlap between two connected tasks. This property is used in conjuction with autoSchedule.
• duration - determines the duration of a Task in days, hours, minutes, seconds or miliseconds. Very usefull when the the dateEnd of a Task is unknown. The duration always shows the calendar time whether it is in days/hours or other.
• minDuration - sets the minimum duration of a task.
• maxDuration - sets the maximum duration of a task.
• minDateStart - determines the mininum date that a task can start from. Must be if type string and should represent a valid date.
• maxDateStart - determines the maximum date that a task can start from. Must be if type string and should represent a valid date.
• minDateEnd - determines the mininum date that a task can end. Must be if type string and should represent a valid date.
• maxDateEnd - determines the maximum date that a task can end. Must be if type string and should represent a valid date.
• progress - a number that determines the progress of a task ( from 0 to 100 ).
• overdue - a boolean that indicates whether the task's dateEnd has surpassed it's deadline date.
• disableDrag - a boolean property that disables the dragging of a task when set to true.
• disableResize - a boolean property that disables the resizing of a task when set to true.
• dragProject - a boolean that determines whether or not the whole project (along with the tasks) can be dragged while dragging the project task. Applicalbe only to Projects.
• segments - an array of objects that allows to devide a task into multiple segements. Each segment (except the first) can have a different starting date, duration and label.
• synchronized - a boolean that if set the project task's start/end dates are automatically calculated based on the tasks. By default a synchronized project task can't be dragged alone. Applicable only to Project tasks.
• expanded - a boolean that determines if a project is expanded or not. If not all of it's sub-tasks are not visible. Only the project task itself is visible. By default no projects are expanded. Applicable only to project tasks..

GanttChart also accepts a DataAdapter instance as dataSource.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [source]='[{ label: "Task 3", dateStart: "2023-02-05", dateEnd: "2023-07-08", progress: 50, type: "task" }]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the format of the dates in the timeline header when they represent days.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [dayFormat]='"short"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines a specific end date for the Timeline. Usefull when the user wants custom ending date for the Timeline. If no date is set the end date of the timeline is automatically determined from the tasks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [dateEnd]='"new Date(2050,0,1)"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines a specific starting date for the Timeline. Usefull when the user wants custom starting date for the Timeline. If no date is set the start date of the timeline is automatically determined from the tasks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [dateStart]='"new Date(2050,0,1)"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the date markers that will be displayed inside the timeline. Date markers allow to mark and even label specific dates (including time) inside the GanttChart timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Enables or disables the element.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [disabled]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Disables auto scrolling while dragging/resizing a task bar inside the Timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [disableAutoScroll]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Disables dragging of tasks in the Timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [disableTaskDrag]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Disables task progress changing in the Timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [disableTaskProgressChange]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Disables resizing of tasks in the Timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [disableTaskResize]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Disables the selection inside the GanttChart.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [disableSelection]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Disables the task segment dragging.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [disableSegmentDrag]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Disables the task segment resizing.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [disableSegmentResize]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Disables the window editor for the GanttChart.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [disableWindowEditor]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines in what unit is task duration property measured.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [durationUnit]='"day"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines whether a dedicated filter row is used for Table filtering instead of the default filter input. This property has no effect if filtering is not enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [filterRow]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the view start day. Sunday is 0, Monday is 1, Saturday is 6. By default it's Sunday.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [firstDayOfWeek]='1'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Groups the tasks inside the Task timeline according to the resources they are assigned to. Unassigned tasks are placed in a default group labeled 'Unassigned'.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [groupByResources]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Allows to create a custom header content for the Task Panel. The attribute accepts an HTMLTemplate element, it's id or a function.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [headerTemplate]='"template"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines whether the dateMarkers are visible or not.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [hideDateMarkers]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

By default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header container( the bottom container ).

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [hideTimelineHeader]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

By default the Timeline has a three level header - timeline details, timeline second details and timeline header. This property hides the header details container( the top container ).

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [hideTimelineHeaderDetails]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

By default the Timeline has a three level header - timeline details and timeline header. This property hides the second header details container( the middle container ).

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [hideTimelineSecondHeaderDetails]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Hides the Resource panel regardless of the resources availability By default the Resource panel is visible if resources are added to the GanttChart. This property allows to hide the Resource panel permanently.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [hideResourcePanel]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines weather or not horizontal scrollbar is shown.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [horizontalScrollBarVisibility]='"hidden"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the format of the dates inside the timeline header when they represent hours.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [hourFormat]='"numeric"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

When enabled, scrolling to the end of the horizotal timeline, triggers the creation of additional to extend the time range. The number of cells to be added when the scrollbar reaches the end position is determined by the infiniteTimelineStep.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the number of cells to be added when the horizontal scroll bar of the Timeline reaches it's end position when infiniteTimeline is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

When set the Timeline is positioned on the left side while the Task Tree is positioned on the right. By default it's vice versa.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines whether keyboard navigation inside the Table is enabled or not. Keyboard navigation affects both Task and Resource Tables. It allows to navigate between items. the following keyboard shortcut keys are available for focused tasks inside the Task Table:

• Enter - opens the Window editor to edit the currently focused task.
• Delete - opens a confirmation window regarding the deletion of the currently focused task.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Detetmines the maximum possible date of the Timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [max]='2023-1-1'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Detetmines the minimum possible date of the Timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [min]='2000-1-1'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the format of the dates the timeline header when they represent months.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [monthFormat]='"numeric"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the scale in Month view.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [monthScale]='"week"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the nonworking days of the week from 0 to 6, where 0 is the first day of the week and 6 is the last day. Nonworking days will be displayed with colored cells inside the timeline and will not affect the dateEnd of the tasks unless the adjustToNonworkingTime property is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [nonworkingDays]='[0,1]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the nonworking hours of a day. Hours are represented as numbers inside an array (e.g. [1,2,3] - means 1,2 and 3 AM) or number ranges represented as nested arrays(e.g. [[0,6]] - means from 0 to 6 AM). In the timline the cells that represent nonworking days are colored differently from the rest and will not affect the dateEnd of the tasks unless the adjustToNonworkingTime property is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [nonworkingDays]='[22, 23, [0, 6]]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

A function that can be used to completly customize the task element. The function has five arguments:

• task - the task object.
• segment - the task current segment object. If the task has only one segment, the task object is passed again.
• taskElement - the task's html element.
• segmentElement - the task's segment html element.
• labelElement - the task's segment label html element.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

A function that can be used to completly customize the popup Window that is used to interact width tasks by changing their properties. The function as three arguments:

• target - the target popup Window that is about to be opened.
• type - the type of the window. The type determines the purpose of the window. Three possible values: 'task' (task editing), 'confirm' ( confirmation window), 'connection' (used when deleting a connection between tasks).
• item - the connection/task object that is the target of the window.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines which Tab items are visible inside the popup window. Three possible values are allowed:

• general - the general tab with task properties determines by the taskColumns property.
• dependency - the dependency tab which shows the connections to the task and allows to create/delete connections.
• segments - the segments tab which shows the segments of the task and allows to created/delete segments.

.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

A format function for the Timeline task progress label. The expected result from the function is a string. The label is hidden by default can be shown with the showProgressLabel property.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the format of the dates the timeline header when they represent quarters.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [quarterFormat]='"long"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

A getter that returns a flat structure as an array of all resources inside the element.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Deteremines the columns that will be visible in the Resource Tree. Each entry in the value of this property must be of type Object.
It should contain the label and value keys. The value of label determines the column header label inside the Task Tree. The value of value determines the content of the cells in the column.
By default, one column with all resource labels is visible.
Additional properties:

• formatFunction - a function that allows to customize the content of each record in the column. The function accepts two arguments - the actual label as string that is going to be inserted and the index of the resource. The function must return a string as the new content.
• min - controls the min size of the column
• max - controls the max size of the column
• size - controls the actual size of the column

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [resourceColumns]='{ "label": "Task Name", "value": "label" }'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines whether the Resource Table is filterable or not.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [resourceFiltering]='true'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

A format function that allows to re-format the group row labels when groupByResources is enabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Allows to create a custom header content for the Resource Panel. The attribute accepts an HTMLTemplate element, it's id or a function.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the min size of the Resource Panel.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the size of the Resource Panel.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the refresh rate of the Resource Panel when dragging/resizing/progress changing a Task from the Timeline. This property allows to customize the interval between resource Tree/Timeline refreshes. By default they refresh immediately after a change.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

A callback that can be used to customize the content of the resource Timeline cells. The callback accepts three arguments:

• taskIndexes - an array of task indexes that are assigned to the resource for the current cell.
• resourceIndex - the index of the resource.
• cellDate - the date of the current cell.

This property is used when resourceTimelineView is set to custom. Depending on the resourceTimelineMode, it should return:

• string - when the resourceTimelineMode is set to 'diagram'.
• object - when the resourceTimelineMode is set to 'histogram'. The object should have two attributes: capacity and maxCapacity, in order to be visualized as a histogram.

. Another usage of this callback is to customize the timeline resource representation completely if resourceTimelineMode is set to custom.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines how the capacity of the resources will be visualized inside the resource timeline. By default, the capacity is measured in hours depending on the view property of the element.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [resourceTimelineMode]='"diagram"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines how the resources will be displayed inside the resource Timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Sets which tasks to select by their id or gets the currently selected task ids. If no id is provided for the task, an internal id is generated for each task according to it's index(tree path).

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [selectedTaskIds]='["2"]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Sets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path).

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [selectedResourceIds]='["2"]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Enables/Disables the current time shader. If enabled all cells that represent past time will be shaded.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Shows the selection column of the Task/Resource Table. When applied a checkbox column is displayed that allows to select tasks/resources.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines whether the baselnes of the tasks are visible or not. Baselines are defined via the 'planned' attribute on the task objects of the dataSource property.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Shows the progress label inside the progress bars of the Timeline tasks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

If set the dateStart/dateEnd of the tasks will be coerced to the nearest timeline cell date ( according to the view ). Affects the dragging operation as well.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Allows to set a custom sorting function to be executed when a column is sorted. Can be used to override the default sorting behavior. The function contains the following parameters:

1. dataSource - the Table's data source
2. sortColumns - an array of the data fields of columns to be sorted by
3. directions - an array of sort directions to be sorted by (corresponding to sortColumns)
4. defaultCompareFunctions - an array of default compare functions to be sorted by (corresponding to sortColumns), useful if the sorting of some columns does not have to be overridden

.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines whether the GanttChart can be sorted by one, more then one or no columns.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [sortMode]='"many"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

A getter that returns a flat structure as an array of all tasks inside the element.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Deteremines the columns that will be visible in the Task Tree. Each entry in the value of this property must be of type Object.
It should contain the label and value keys. The value of label determines the column header label inside the Task Tree. The value of value determines the content of the cells in the column. It should reference a task attribute from the dataSource.
By default, one column with all task labels is visible.
Additional properties:

• formatFunction - a function that allows to customize the content of each record in the column. The function accepts one argument - the actual label as string that is going to be inserted and must return some content.
• min - controls the min size of the column
• max - controls the max size of the column
• size - controls the actual size of the column
• customEditor - a callback that can be used to set a custom editor for the column when editing via the window. It accepts two arguments
  • label - the label of the column
  • value - the value of the column.
  The callback must return the editor.
• setCustomEditorValue - a callback that is used to set the value of the custom editor.
• getCustomEditorValue - a callback that is used to get the value of the custom editor.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [taskColumns]='[{ "label": "Task Name", "value": "label" }]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines whether the Task Table is filterable or not.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the min size of the Task Panel. Used when Resource Panel is visible.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the size of the Task Panel. Used when Resource Panel is visible.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the min width of the timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the min width of the task table.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the size(width) of the task table.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

A format function for the Header of the Timeline. The function provides the following arguments:

• date - a Date object that represets the date for the current cell.
• type - a string that represents the type of date that the cell is showing, e.g. 'month', 'week', 'day', etc.
• isHeaderDetails - a boolean that indicates whether the current cell is part of the Header Details Container or not.
• value - a string that represents the default value for the cell provided by the element.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines whether the tooltips are enabled or not. Tooltips are available for timeline tasks, resources, connections, indicators and segments.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines weather or not vertical scrollbar is shown.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the viewing date range of the timeline. Possible values:

• day - The timeline show the hours of the day.
• week - the timeline shows the days of the week.
• month - the timeline shows the days of the month.
• year - the timeline shows the months of the year.
• resource - displays the current tasks by grouping them according to the resources they have assigned. The unassigned tasks will be placed in a separate group called 'Unassigned'.

The timeline has a header section that contains the labels of each cell according to the date inside them. The header is splitted in two sections in order to give a more detailed information of the dates.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'
       [view]='"day"'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the format of the dates inside the timeline header when they represent years.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

Determines the format of the dates inside the timeline header when they represent weeks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
}

This event is triggered when a batch update was started after executing the beginUpdate method.

Code examples

Bind to the beginUpdate event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onBeginUpdate)="onBeginUpdate($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onBeginUpdate(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when a batch update was ended from after executing the endUpdate method.

Code examples

Bind to the endUpdate event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onEndUpdate)="onEndUpdate($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onEndUpdate(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the user starts connecting one task to another. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Code examples

Bind to the connectionStart event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onConnectionStart)="onConnectionStart($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onConnectionStart(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the user completes a connection between two tasks.

Code examples

Bind to the connectionEnd event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onConnectionEnd)="onConnectionEnd($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onConnectionEnd(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when a Task is selected/unselected.

Code examples

Bind to the change event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onChange)="onChange($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onChange(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when a Tree column is resized. Column resizing is controled by the columnResize property.

Code examples

Bind to the columnResize event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onColumnResize)="onColumnResize($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onColumnResize(e: Event): void {
    alert('do something...');
  }
}

This event is triggered just before the window for task editing or tooltip is closing. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

Code examples

Bind to the closing event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onClosing)="onClosing($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onClosing(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the window for task editing is closed( hidden )

Code examples

Bind to the close event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onClose)="onClose($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onClose(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when an item is collapsed.

Code examples

Bind to the collapse event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onCollapse)="onCollapse($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onCollapse(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when dragging of a task starts. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Code examples

Bind to the dragStart event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onDragStart)="onDragStart($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onDragStart(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when dragging of a task finishes.

Code examples

Bind to the dragEnd event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onDragEnd)="onDragEnd($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onDragEnd(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when an item is expanded.

Code examples

Bind to the expand event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onExpand)="onExpand($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onExpand(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the GanttChart is filtered.

Code examples

Bind to the filter event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onFilter)="onFilter($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onFilter(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when a task, resource or connection is clicked inside the Timeline or the Tree columns.

Code examples

Bind to the itemClick event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onItemClick)="onItemClick($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onItemClick(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when a Task/Resource/Connection is inserted.

Code examples

Bind to the itemInsert event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onItemInsert)="onItemInsert($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onItemInsert(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when a Task/Resource/Connection is removed.

Code examples

Bind to the itemRemove event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onItemRemove)="onItemRemove($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onItemRemove(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when a Task/Resource/Connection is updated.

Code examples

Bind to the itemUpdate event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onItemUpdate)="onItemUpdate($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onItemUpdate(e: Event): void {
    alert('do something...');
  }
}

This event is triggered just before the window for task editing or tooltip is opening. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

Code examples

Bind to the opening event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onOpening)="onOpening($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onOpening(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the window for task editing is opened( visible ) or when the tooltip is opened.

Code examples

Bind to the open event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onOpen)="onOpen($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onOpen(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the progress of a task bar starts to change as a result of user interaction. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Code examples

Bind to the progressChangeStart event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onProgressChangeStart)="onProgressChangeStart($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onProgressChangeStart(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the progress of a task is changed.

Code examples

Bind to the progressChangeEnd event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onProgressChangeEnd)="onProgressChangeEnd($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onProgressChangeEnd(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when resizing of a task starts. This event allows to cancel the operation by calling event.preventDefault() in the event handler function.

Code examples

Bind to the resizeStart event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onResizeStart)="onResizeStart($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onResizeStart(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the resizing of a task finishes.

Code examples

Bind to the resizeEnd event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onResizeEnd)="onResizeEnd($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onResizeEnd(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the GanttChart is sorted by some column.

Code examples

Bind to the sort event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onSort)="onSort($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onSort(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the Timeline has been scrolled to the bottom.

Code examples

Bind to the scrollBottomReached event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onScrollBottomReached)="onScrollBottomReached($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onScrollBottomReached(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the Timeline has been scrolled to the top.

Code examples

Bind to the scrollTopReached event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onScrollTopReached)="onScrollTopReached($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onScrollTopReached(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the Timeline has been scrolled to the beginning (horizontally).

Code examples

Bind to the scrollLeftReached event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onScrollLeftReached)="onScrollLeftReached($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onScrollLeftReached(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when the Timeline has been scrolled to the end (horizontally).

Code examples

Bind to the scrollRightReached event of jqxGantt.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt (onScrollRightReached)="onScrollRightReached($event)" 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public onScrollRightReached(e: Event): void {
    alert('do something...');
  }
}

Adds a custom filter to a specific column (task or resource column).

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.addFilter({ type: 'task', value: 'label' }, FilterGroup);
  }
}

Clears the currently applied filters.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.clearFilters();
  }
}

Clears the currently applied column sorting.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.clearSort();
  }
}

Unselects all currently selected items inside the GanttChart including Tasks and Resources. It also clears the assignment highlgihters.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.clearSelection();
  }
}

Removes a previously saved state of the element form LocalStorage according to it's id. Requires an id to be set to the element.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.clearState();
  }
}

Removes all tasks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.clearTasks();
  }
}

Removes all resources.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.clearResources();
  }
}

Creates a connection between two tasks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.createConnection(1,2,0);
  }
}

Collapses an expanded project.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.collapse(1);
  }
}

Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.beginUpdate();
  }
}

Ends the update operation. This method will resume the rendering and will refresh the GanttChart.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.endUpdate();
  }
}

Makes sure a Task is visible by scrolling to it.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.ensureVisible(0);
  }
}

Expands a collapsed project with tasks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.expand(0);
  }
}

Exports the data of Tree of the GanttChart.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.exportData('pdf');
  }
}

Returns all existing connections. The connections are returned as objects that contain detailed information. Each object in the array has the following keys: 'id' - connection id, 'type' - connection type, 'startTaskId' - connection's start task id, 'endTaskId' - connection's end task id, 'startIndex' - connection's start task index, 'endIndex' - connection's end task index, 'lag' - lag time.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getConnections();
  }
}

Returns the connection details for the target connection which includes: startTask, endTask, startTaskId, endTaskId and type of the corresponding connection. Connection types are described in detail under the `connectionEnd` event description in this document and in a dedicated topic available on the website.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getConnectionDetails(0-3-0,6-15-1);
  }
}

Returns a JSON representation of all tasks inside the element along with their connections and settings.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getState();
  }
}

Returns the Tree path of a task/resource. The tree path is used as task/resource id if no id is provided by the user.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getItemPath(task);
  }
}

Returns the task object that corresponds to the id/path.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getTask(0.4);
  }
}

Returns an array of all GanttChart tasks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getTasks();
  }
}

Returns the index of a task.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getTaskIndex(gantt.tasks[0]);
  }
}

Returns the connections definitions of a task.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getTaskConnections(0);
  }
}

Returns the Project of a task or undefined if it does not have one.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getTaskProject(taskA,taskB);
  }
}

Returns the resource object that corresponds to the id/path.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getResource(4);
  }
}

Returns an array of all GanttChart resources.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getResources();
  }
}

Returns the index of a resource.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getResourceIndex(ganttChartResource);
  }
}

Returns the tasks that are assigned to the resource.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getResourceTasks(ganttChartResource);
  }
}

Returns the currently selected tasks/resource ids. If selection is disabled or no items are selected returns null.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getSelectedIds();
  }
}

Returns the currently selected tasks.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getSelectedTasks();
  }
}

Returns the currently selected resources.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getSelectedResources();
  }
}

Returns the working hours of the day as numbers.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.getWorkingHours();
  }
}

Hides the tooltip if it's visible.

import { Component, ViewChild } from '@angular/core';
 
import { jqxGanttComponent } from 'jqwidgets-ng/jqxgantt';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxGantt #myGantt 
       [width]='600' [height]='450' [dataSource]='[{label: "Project 1", dateStart: "2023-05-10", dateEnd: "2024-06-10", type: "project", expanded: true, tasks: [ {label: "Task 1.1",dateStart: "2023-02-10",dateEnd: "2023-04-10",type: "task"},{label: "Task 1.2",dateStart: "2023-03-27",dateEnd: "2023-06-10",type: "task"}]'>
    </jqxGantt>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myGantt', { static: false }) myGantt!: jqxGanttComponent;
  
  public ngAfterViewInit(): void {
    this.myGantt.hideTooltip();
  }
}