How can I help you?
Columns in Angular Gantt Chart Component
6 Feb 202624 minutes to read
The Syncfusion® Angular Gantt Chart component displays task data in a tabular format using columns. Columns help organize data efficiently and support user interaction within the Gantt chart.
Each column is defined using the field property, which maps values from the dataSource. This mapping ensures accurate data binding and enables formatting and customization for each column.
Column types
The Syncfusion® Angular Gantt Chart component supports specifying the data type for each column using the type property. This ensures that values are displayed with the correct formatting—such as number or date—based on the column’s data.
Gantt supports the following column types:
- string: Default type for text data.
- number: For numeric values with formatting.
- boolean: Displays checkboxes for true/false values.
- date: For date values.
- datetime: For date and time values.
- checkbox: Displays a checkbox column.
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
providers: [SelectionService],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt height="430px" [dataSource]="data" [splitterSettings]="splitterSettings" [taskFields]="taskSettings" [treeColumnIndex]="1">
<e-columns>
<e-column type='checkbox' width=90></e-column>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90" type="number"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270" type="string"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="150" format="yMd" type="date"></e-column>
<e-column field="EndDate" headerText="End Date" textAlign="Right" width="150" format="dd/MM/yyyy hh:mm" type="dateTime"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90" type="number"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120" type="number"></e-column>
<e-column field="Verified" headerText="Verified" width="100" type="boolean" displayAsCheckBox="true"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks',
Verified: 'Verified'
};
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, Verified: true },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, Verified: true },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, Verified: true},
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, Verified: true }
]
},
];
- If
typeis not defined, it is auto-detected from the first record of the data source.- If the first record has a null or blank value, define the
typeexplicitly to ensure correct filter dialog behavior.
Difference between boolean type and checkbox type column
- Use boolean type to bind and edit true/false values from the data source.
- Use checkbox type to enable row selection or deselection in the UI.
- When column
typeis checkbox, GanttselectionSettingsdefaults to multiple selection. - If multiple checkbox columns exist, selecting one auto-selects others in the same row.
To learn more about how to render boolean values as checkboxes in a Syncfusion® GanttColumn, please refer to the Render Boolean Values as Checkbox section.
Column width
In Syncfusion® Gantt for Angular, column width can be adjusted using the width property within the column configuration. This property accepts values in pixels (e.g., 100) or percentages (e.g., 25%) to define the column’s width relative to the Gantt container.
- Column width is calculated based on the total available width. For example, in a container with 4 columns and a total width of 800 pixels, each column will default to 200 pixels.
- If widths are defined for some columns but not others, the remaining width is distributed equally among columns without explicit widths. For example, if you have 3 columns with widths of 100px, 200px, and no width specified for the third column, the third column will occupy the remaining width after accounting for the first two columns.
- Percentage-based widths are responsive and adjust dynamically when the Gantt container is resized. For example, a column with a width of 50% will occupy 50% of the Gantt width and will adjust proportionally when the Gantt container is resized to a smaller size.
- When columns are manually resized, a minimum width is enforced to maintain readability. By default, this minimum is set to 10 pixels unless specified otherwise.
- If the total column width exceeds the container width, a horizontal scrollbar appears to enable scrolling.
- The Gantt Chart component inherits the width of its parent element. If the parent has a fixed width, the Gantt will occupy that space; otherwise, it adjusts dynamically based on available space.
To learn more about resizing, you can refer to the resizing section here
Supported types for column width
The Syncfusion® Gantt supports the following three types of column width:
1. Auto
The column width is automatically calculated based on the content within the column cells. If the content exceeds the width of the column, it will be truncated with an ellipsis (…) at the end. You can set the width for columns as auto in your Gantt configuration as shown below:
<e-column field='TaskID' headerText='Task ID' textAlign='Right' width='auto'></e-column>2. Percentage
The column width is specified as a percentage value relative to the width of the gantt container. For example, a column width of 25% will occupy 25% of the total gantt width. You can set the width for columns as percentage in your Gantt configuration as shown below:
<e-column field='TaskID' headerText='Task ID' textAlign='Right' width='25%'></e-column>3. Pixel
The column width is specified as an absolute pixel value. For example, a column width of 100px will have a fixed width of 100 pixels regardless of the gantt container size. You can set the width for columns as pixel in your Gantt configuration as shown below:
<e-column field='TaskID' headerText='Task ID' textAlign='Right' width='100'></e-column>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt height="430px" [dataSource]="data" [splitterSettings]="splitterSettings" [taskFields]="taskSettings" [treeColumnIndex]="1">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="auto"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="30%"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '90%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let GanttData: Object[] = [
{ TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
{ TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
];Column formatting
The Syncfusion® Gantt Chart component for Angular supports column formatting to customize data presentation. You can format numbers, dates, or apply templates based on specific requirements. Use the columns.format property to define the desired format for each column.
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt height="430px" [dataSource]="data" [splitterSettings]="splitterSettings" [taskFields]="taskSettings">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120" format="yyyy/MM/dd"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120" format="C2" type="number"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let GanttData: Object[] = [
{ TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
];
- The Gantt uses the Internationalization library to format values based on the specified format and culture.
- By default, the number and date values are formatted in en-US locale. You can localize the currency and date in different locale as explained here.
- The available format codes may vary depending on the data type of the column.
- You can also customize the formatting further by providing a custom function to the format property, instead of a format string.
- Make sure that the format string is valid and compatible with the data type of the column, to avoid unexpected results.
Number formatting
The Syncfusion® Gantt Chart component for Angular supports number formatting through the columns.format property, where standard format strings define numeric value presentation including currency, percentage, and decimal formats. The following standard format strings are available:
| Format | Description | Remarks |
|---|---|---|
| N | Numeric format | Use N2, N3, etc., to set the number of decimal places. |
| C | Currency format | Use C2, C3, etc., to define precision for currency values. |
| P | Percentage format | Input should be between 0 and 1; P2, P3, etc., control precision. |
The following example code demonstrates the formatting of data for the TaskID column using the N format, the Progress column using the P format, and a currency column using the C format.
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt height="430px" [dataSource]="data" [splitterSettings]="splitterSettings" [taskFields]="taskSettings" [treeColumnIndex]="1">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90" format="N" type="number"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120" format="yMd"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress (%)" textAlign="Right" width="120" format="P2"></e-column>
<e-column field="Progress" headerText="Progress ($)" textAlign="Right" width="120" format="C" type="number"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export const GanttData = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('2023-01-01'),
EndDate: new Date('2023-01-05'),
Duration: 5,
Progress: 0.3,
ParentID: null
},
{
TaskID: 2,
TaskName: 'Site Analysis',
StartDate: new Date('2023-01-06'),
EndDate: new Date('2023-01-10'),
Duration: 4,
Progress: 0.5,
ParentID: null
},
{
TaskID: 3,
TaskName: 'Soil Testing',
StartDate: new Date('2023-01-11'),
EndDate: new Date('2023-01-14'),
Duration: 3,
Progress: 0.4,
ParentID: null
},
{
TaskID: 4,
TaskName: 'Approval Process',
StartDate: new Date('2023-01-15'),
EndDate: new Date('2023-01-18'),
Duration: 3,
Progress: 0.6,
ParentID: null
},
{
TaskID: 5,
TaskName: 'Budget Estimation',
StartDate: new Date('2023-01-19'),
EndDate: new Date('2023-01-23'),
Duration: 4,
Progress: 0.7,
ParentID: null
},
{
TaskID: 6,
TaskName: 'Floor Plan Design',
StartDate: new Date('2023-01-24'),
EndDate: new Date('2023-01-28'),
Duration: 4,
Progress: 0.8,
ParentID: null
},
{
TaskID: 7,
TaskName: 'Material Listing',
StartDate: new Date('2023-01-29'),
EndDate: new Date('2023-02-02'),
Duration: 4,
Progress: 0.9,
ParentID: null
},
{
TaskID: 8,
TaskName: 'Final Approval',
StartDate: new Date('2023-02-03'),
EndDate: new Date('2023-02-06'),
Duration: 3,
Progress: 1.0,
ParentID: null
}
];To learn more about number formatting, you can refer to the number section.
Date formatting
The Syncfusion® Gantt Chart component for Angular supports date formatting in columns using the columns.format property, where format strings such as d, D, MMM dd, yyyy can be applied. Both built-in formats like yMd and custom formats are supported to define the layout and detail of date and time values based on column requirements. The following custom formats and their corresponding output are listed below:
| Format | Formatted value |
|---|---|
| { type:’date’, format:’dd/MM/yyyy’ } | 04/07/1996 |
| { type:’date’, format:’dd.MM.yyyy’ } | 04.07.1996 |
| { type:’date’, skeleton:’short’ } | 7/4/96 |
| { type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ } | 04/07/1996 12:00 AM |
| { type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ } | 07/04/1996 12:00:00 AM |
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [treeColumnIndex]="1">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="150" [format]="formatOptions"></e-column>
<e-column field="EndDate" headerText="End Date" textAlign="Right" width="210" [format]="formatOptionstwo"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
public formatOptions: object = {};
public formatOptionstwo: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.formatOptions = { type: 'date', format: 'dd/MM/yyyy' };
this.formatOptionstwo = { type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' };
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export const GanttData = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('2023-01-01'),
EndDate: new Date('2023-01-05'),
Duration: 5,
Progress: 30,
ParentID: null
},
{
TaskID: 2,
TaskName: 'Site Analysis',
StartDate: new Date('2023-01-06'),
EndDate: new Date('2023-01-10'),
Duration: 4,
Progress: 50,
ParentID: null
},
{
TaskID: 3,
TaskName: 'Soil Testing',
StartDate: new Date('2023-01-11'),
EndDate: new Date('2023-01-14'),
Duration: 3,
Progress: 40,
ParentID: null
},
{
TaskID: 4,
TaskName: 'Approval Process',
StartDate: new Date('2023-01-15'),
EndDate: new Date('2023-01-18'),
Duration: 3,
Progress: 60,
ParentID: null
},
{
TaskID: 5,
TaskName: 'Budget Estimation',
StartDate: new Date('2023-01-19'),
EndDate: new Date('2023-01-23'),
Duration: 4,
Progress: 70,
ParentID: null
},
{
TaskID: 6,
TaskName: 'Floor Plan Design',
StartDate: new Date('2023-01-24'),
EndDate: new Date('2023-01-28'),
Duration: 4,
Progress: 80,
ParentID: null
},
{
TaskID: 7,
TaskName: 'Material Listing',
StartDate: new Date('2023-01-29'),
EndDate: new Date('2023-02-02'),
Duration: 4,
Progress: 90,
ParentID: null
},
{
TaskID: 8,
TaskName: 'Final Approval',
StartDate: new Date('2023-02-03'),
EndDate: new Date('2023-02-06'),
Duration: 3,
Progress: 100,
ParentID: null
}
];To learn more about date formatting, you can refer to Date formatting.
Format the date column based on localization
You can format the date column in Gantt Chart component based on localization settings by using the format property to define the date pattern and the locale property to apply regional settings.
The following example demonstrates the format property specifies the date format as yyyy-MMM-dd, and the locale property specifies the locale as es-AR for Spanish (Argentina).
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { setCulture, loadCldr, setCurrencyCode } from '@syncfusion/ej2-base';
import { GanttData } from './data';
// CLDR JSON imports.
import cagregorian from './ca-gregorian.json';
import currencies from './currencies.json';
import numbers from './numbers.json';
import timeZoneNames from './timeZoneNames.json';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [locale]="locale" [treeColumnIndex]="1">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="150" [format]="formatOptions"></e-column>
<e-column field="EndDate" headerText="End Date" textAlign="Right" width="210" [format]="formatOptionstwo"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120" format="c2" type="number"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
public formatOptions: object = {};
public formatOptionstwo: object = {};
public locale: string = 'es-AR';
ngOnInit(): void {
setCulture(this.locale);
setCurrencyCode('ARS');
loadCldr(cagregorian, currencies, numbers, timeZoneNames);
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.formatOptions = { type: 'date', format: 'yyyy-MMM-dd' };
this.formatOptionstwo = { type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' };
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export const GanttData = [
{
TaskID: 1,
TaskName: 'Inicio del proyecto',
StartDate: new Date('2023-01-01'),
EndDate: new Date('2023-01-05'),
Duration: 5,
Progress: 1000,
ParentID: null
},
{
TaskID: 2,
TaskName: 'Análisis del sitio',
StartDate: new Date('2023-01-06'),
EndDate: new Date('2023-01-10'),
Duration: 4,
Progress: 1500,
ParentID: null
},
{
TaskID: 3,
TaskName: 'Pruebas de suelo',
StartDate: new Date('2023-01-11'),
EndDate: new Date('2023-01-14'),
Duration: 3,
Progress: 1200,
ParentID: null
},
{
TaskID: 4,
TaskName: 'Proceso de aprobación',
StartDate: new Date('2023-01-15'),
EndDate: new Date('2023-01-18'),
Duration: 3,
Progress: 1800,
ParentID: null
},
{
TaskID: 5,
TaskName: 'Estimación de presupuesto',
StartDate: new Date('2023-01-19'),
EndDate: new Date('2023-01-23'),
Duration: 4,
Progress: 2000,
ParentID: null
},
{
TaskID: 6,
TaskName: 'Diseño del plano',
StartDate: new Date('2023-01-24'),
EndDate: new Date('2023-01-28'),
Duration: 4,
Progress: 2500,
ParentID: null
},
{
TaskID: 7,
TaskName: 'Listado de materiales',
StartDate: new Date('2023-01-29'),
EndDate: new Date('2023-02-02'),
Duration: 4,
Progress: 3000,
ParentID: null
},
{
TaskID: 8,
TaskName: 'Aprobación final',
StartDate: new Date('2023-02-03'),
EndDate: new Date('2023-02-06'),
Duration: 3,
Progress: 3500,
ParentID: null
}
];Format template column value
You can customize the appearance of values in Gantt template columns using HTML markup and number formatting. To format values, use Angular pipes along with the format property. In this example, the date pipe formats the StartDate value as 'dd/MMM/yyyy'.
<e-column field='StartDate' headerText='Start Date' textAlign='Left' width=120>
<ng-template #template let-data>
{{ data.StartDate | date:'dd/MMM/yyyy' }}
</ng-template>
</e-column>import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [treeColumnIndex]="1">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Left" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Left" width="120">
<ng-template #template let-data>
{{ data.StartDate | date: 'yyyy/MMM/dd' }}
</ng-template>
</e-column>
<e-column field="Duration" headerText="Duration" textAlign="Left" width="150"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Left" width="120"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let WBSData = [
{
TaskID: 1,
TaskName: 'Product concept',
StartDate: new Date('04/02/2024'),
EndDate: new Date('04/21/2024')
},
{
TaskID: 2,
TaskName: 'Defining the product and its usage',
StartDate: new Date('04/02/2024'),
Duration: 3,
Progress: 30,
ParentID: 1
},
{
TaskID: 3,
TaskName: 'Defining target audience',
StartDate: new Date('04/02/2024'),
Duration: 3,
ParentID: 1
},
{
TaskID: 4,
TaskName: 'Prepare product sketch and notes',
StartDate: new Date('04/02/2024'),
Duration: 2,
Progress: 30,
Predecessor: '2FS+1',
ParentID: 1
},
{
TaskID: 5,
TaskName: 'Manufacturing cost',
StartDate: new Date('04/04/2024'),
Duration: 2,
Progress: 30,
ParentID: 4
},
{
TaskID: 6,
TaskName: 'Selling cost',
StartDate: new Date('04/04/2024'),
Duration: 2,
ParentID: 4
},
{
TaskID: 7,
TaskName: 'Selling Items',
StartDate: new Date('04/04/2024'),
Duration: 2,
ParentID: 6
},
{
TaskID: 8,
TaskName: 'Market research',
StartDate: new Date('04/02/2024'),
EndDate: new Date('04/21/2024')
},
{
TaskID: 9,
TaskName: 'Demand analysis',
StartDate: new Date('04/04/2024'),
EndDate: new Date('04/21/2024'),
ParentID: 8
},
{
TaskID: 10,
TaskName: 'Customer strength',
StartDate: new Date('04/04/2024'),
Duration: 4,
Progress: 30,
Predecessor: '5',
ParentID: 9
},
{
TaskID: 11,
TaskName: 'Market opportunity analysis',
StartDate: new Date('04/04/2024'),
Duration: 4,
Predecessor: '5',
ParentID: 9
},
{
TaskID: 12,
TaskName: 'Competitor analysis',
StartDate: new Date('04/04/2024'),
Duration: 4,
Predecessor: '7, 8',
Progress: 30,
ParentID: 8
},
{
TaskID: 13,
TaskName: 'Product strength analsysis',
StartDate: new Date('04/04/2024'),
Duration: 4,
Predecessor: '9',
ParentID: 8
},
{
TaskID: 14,
TaskName: 'Research complete',
StartDate: new Date('04/04/2024'),
Duration: 0,
Predecessor: '10',
ParentID: 8,
Indicators: [
{
'date': new Date('04/27/2024'),
'name': 'Research completed',
'tooltip': 'Research completed',
'iconClass': 'description e-icons'
}
]
},
{
TaskID: 15,
TaskName: 'Product design and development',
StartDate: new Date('04/04/2024'),
EndDate: new Date('04/21/2024')
},
{
TaskID: 16,
TaskName: 'Functionality design',
StartDate: new Date('04/04/2024'),
Duration: 3,
Progress: 30,
Predecessor: '12',
ParentID: 15
},
{
TaskID: 17,
TaskName: 'Quality design',
StartDate: new Date('04/04/2024'),
Duration: 3,
Predecessor: '12',
ParentID: 15
},
{
TaskID: 18,
TaskName: 'Define reliability',
StartDate: new Date('04/04/2024'),
Duration: 2,
Progress: 30,
Predecessor: '15',
ParentID: 15
},
{
TaskID: 19,
TaskName: 'Identifying raw materials',
StartDate: new Date('04/04/2024'),
Duration: 2,
Predecessor: '14',
ParentID: 15
},
{
TaskID: 20,
TaskName: 'Define cost plan',
StartDate: new Date('04/04/2024'),
EndDate: new Date('04/21/2024'),
ParentID: 15
},
{
TaskID: 21,
TaskName: 'Manufacturing cost',
StartDate: new Date('04/04/2024'),
Duration: 2,
Progress: 30,
Predecessor: '17',
ParentID: 20
},
{
TaskID: 22,
TaskName: 'Selling cost',
StartDate: new Date('04/04/2024'),
Duration: 2,
Predecessor: '17',
ParentID: 20
},
{
TaskID: 23,
TaskName: 'Development of the final design',
StartDate: new Date('04/04/2024'),
EndDate: new Date('04/21/2024'),
ParentID: 15
},
{
TaskID: 24,
TaskName: 'Defining dimensions and package volume',
StartDate: new Date('04/04/2024'),
Duration: 2,
Predecessor: '19, 20',
Progress: 30,
ParentID: 23
},
{
TaskID: 25,
TaskName: 'Develop design to meet industry standards',
StartDate: new Date('04/04/2024'),
Duration: 2,
Predecessor: '22',
ParentID: 23
},
{
TaskID: 26,
TaskName: 'Include all the details',
StartDate: new Date('04/04/2024'),
Duration: 3,
Predecessor: '23',
ParentID: 23
},
{
TaskID: 27,
TaskName: 'CAD computer-aided design',
StartDate: new Date('04/04/2024'),
Duration: 3,
Progress: 30,
Predecessor: '24',
ParentID: 15
},
{
TaskID: 28,
TaskName: 'CAM computer-aided manufacturing',
StartDate: new Date('04/04/2024'),
Duration: 3,
Predecessor: '25',
ParentID: 15
},
{
TaskID: 29,
TaskName: 'Design complete',
StartDate: new Date('04/04/2024'),
Duration: 0,
Predecessor: '26',
ParentID: 15
},
{
TaskID: 30,
TaskName: 'Prototype testing',
StartDate: new Date('04/04/2024'),
Duration: 4,
Progress: 30,
Predecessor: '27'
},
{
TaskID: 31,
TaskName: 'Include feedback',
StartDate: new Date('04/04/2024'),
Predecessor: '28',
Duration: 4,
Indicators: [
{
'date': new Date('05/31/2024'),
'name': 'Production phase',
'tooltip': 'Production phase completed',
'iconClass': 'okIcon e-icons'
}
]
},
{
TaskID: 32,
TaskName: 'Manufacturing',
StartDate: new Date('04/04/2024'),
Duration: 5,
Progress: 30,
Predecessor: '28,29'
},
{
TaskID: 33,
TaskName: 'Assembling materials to finsihed goods',
StartDate: new Date('04/04/2024'),
Duration: 5,
Predecessor: '30'
},
{
TaskID: 34,
TaskName: 'Feedback and testing',
StartDate: new Date('04/04/2024'),
EndDate: new Date('04/21/2024')
},
{
TaskID: 35,
TaskName: 'Internal testing and feedback',
StartDate: new Date('04/04/2024'),
Duration: 3,
Progress: 45,
Predecessor: '31',
ParentID: 34
},
{
TaskID: 36,
TaskName: 'Customer testing and feedback',
StartDate: new Date('04/04/2024'),
Duration: 3,
Progress: 50,
Predecessor: '33',
ParentID: 34
},
{
TaskID: 37,
TaskName: 'Final product development',
StartDate: new Date('04/04/2024'),
EndDate: new Date('04/21/2024')
},
{
TaskID: 38,
TaskName: 'Important improvements',
StartDate: new Date('04/04/2024'),
Duration: 4,
Progress: 30,
Predecessor: '34',
ParentID: 37
},
{
TaskID: 39,
TaskName: 'Address any unforeseen issues',
StartDate: new Date('04/04/2024'),
Duration: 4,
Progress: 30,
Predecessor: '36',
ParentID: 37,
Indicators: [
{
'date': new Date('06/28/2024'),
'name': 'Sales and marketing',
'tooltip': 'Sales and marketing',
'iconClass': 'description e-icons'
}
]
}
];You can use other Angular pipes, such as currency, decimal, percent, etc., to format other types of values in the column template based on your requirements.
Custom formatting
The Syncfusion® Gantt Chart component supports custom formatting for numeric and date values. You can use the format property to display data in a specific format based on requirements.
In the example below, numberFormatOptions is used for the Progress column to show four decimal places, and dateFormatOptions is used for the StartDate column to display the date as day-of-week, month abbreviation, day, and 2-digit year (e.g., Sun, May 8, ‘23).
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [treeColumnIndex]="1">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="170" [format]="dateFormatOptions"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120" [format]="numberFormatOptions"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
public dateFormatOptions: object = {};
public numberFormatOptions: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.dateFormatOptions = {
type: 'date',
format: "EEE, MMM d, ''yy"
};
this.numberFormatOptions = {
format: '##.0000'
};
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export const GanttData = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('2023-01-01'),
EndDate: new Date('2023-01-05'),
Duration: 5,
Progress: 30.1234,
ParentID: null
},
{
TaskID: 2,
TaskName: 'Site Analysis',
StartDate: new Date('2023-01-06'),
EndDate: new Date('2023-01-10'),
Duration: 4,
Progress: 50.5678,
ParentID: null
},
{
TaskID: 3,
TaskName: 'Soil Testing',
StartDate: new Date('2023-01-11'),
EndDate: new Date('2023-01-14'),
Duration: 3,
Progress: 40.0001,
ParentID: null
},
{
TaskID: 4,
TaskName: 'Approval Process',
StartDate: new Date('2023-01-15'),
EndDate: new Date('2023-01-18'),
Duration: 3,
Progress: 60.9999,
ParentID: null
},
{
TaskID: 5,
TaskName: 'Budget Estimation',
StartDate: new Date('2023-01-19'),
EndDate: new Date('2023-01-23'),
Duration: 4,
Progress: 70.4567,
ParentID: null
},
{
TaskID: 6,
TaskName: 'Floor Plan Design',
StartDate: new Date('2023-01-24'),
EndDate: new Date('2023-01-28'),
Duration: 4,
Progress: 80.8888,
ParentID: null
},
{
TaskID: 7,
TaskName: 'Material Listing',
StartDate: new Date('2023-01-29'),
EndDate: new Date('2023-02-02'),
Duration: 4,
Progress: 90.0000,
ParentID: null
},
{
TaskID: 8,
TaskName: 'Final Approval',
StartDate: new Date('2023-02-03'),
EndDate: new Date('2023-02-06'),
Duration: 3,
Progress: 100.0000,
ParentID: null
}
];To learn more about custom formatting, you can refer to Custom Date formatting and Custom Number formatting.
Align the text of content
You can use the textAlign property in Gantt Chart component to set the alignment of text within column cells. By default, the text is aligned to the left. The available options are:
- Left: Aligns the text to the left (default).
- Center: Aligns the text to the center.
- Right: Aligns the text to the right.
- Justify: Align the text to the justify.
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { GanttModule, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { DropDownListModule, ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule, DropDownListModule],
encapsulation: ViewEncapsulation.None,
template: `
<div style="display: flex; align-items: center; margin-bottom: 10px;">
<label style="margin-right: 10px;font-weight:bold">Align the text for columns:</label>
<ejs-dropdownlist width="120" [dataSource]="alignmentData" [fields]="{ text: 'text', value: 'value' }" [value]="alignmentData[1].value" (change)="changeAlignment($event)">
</ejs-dropdownlist>
</div>
<ejs-gantt #gantt height="370px" [dataSource]="data" [splitterSettings]="splitterSettings" [taskFields]="taskSettings">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" format="yMd" width="150"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
@ViewChild('gantt') public ganttInstance?: GanttComponent;
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
public alignmentData: { text: string; value: string }[] = [
{ text: 'Left', value: 'Left' },
{ text: 'Right', value: 'Right' },
{ text: 'Center', value: 'Center' },
{ text: 'Justify', value: 'Justify' }
];
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
public changeAlignment(args: ChangeEventArgs): void {
const alignment = args.value as 'Left' | 'Right' | 'Center' | 'Justify';
const columns: ColumnModel[] = this.ganttInstance?.treeGrid.grid.columns as ColumnModel[];
columns.forEach((col: ColumnModel) => {
col.textAlign = alignment;
});
this.ganttInstance?.treeGrid.grid.refreshColumns();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export const GanttData = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('2023-01-01'),
EndDate: new Date('2023-01-05'),
Duration: 5,
Progress: 30,
ParentID: null
},
{
TaskID: 2,
TaskName: 'Site Analysis',
StartDate: new Date('2023-01-06'),
EndDate: new Date('2023-01-10'),
Duration: 4,
Progress: 50,
ParentID: null
},
{
TaskID: 3,
TaskName: 'Soil Testing',
StartDate: new Date('2023-01-11'),
EndDate: new Date('2023-01-14'),
Duration: 3,
Progress: 40,
ParentID: null
},
{
TaskID: 4,
TaskName: 'Approval Process',
StartDate: new Date('2023-01-15'),
EndDate: new Date('2023-01-18'),
Duration: 3,
Progress: 60,
ParentID: null
},
{
TaskID: 5,
TaskName: 'Budget Estimation',
StartDate: new Date('2023-01-19'),
EndDate: new Date('2023-01-23'),
Duration: 4,
Progress: 70,
ParentID: null
},
{
TaskID: 6,
TaskName: 'Floor Plan Design',
StartDate: new Date('2023-01-24'),
EndDate: new Date('2023-01-28'),
Duration: 4,
Progress: 80,
ParentID: null
},
{
TaskID: 7,
TaskName: 'Material Listing',
StartDate: new Date('2023-01-29'),
EndDate: new Date('2023-02-02'),
Duration: 4,
Progress: 90,
ParentID: null
},
{
TaskID: 8,
TaskName: 'Final Approval',
StartDate: new Date('2023-02-03'),
EndDate: new Date('2023-02-06'),
Duration: 3,
Progress: 100,
ParentID: null
}
];
- The
textAlignproperty changes the alignment for both the column content and header. If you want to align header differently, you can use the headerTextAlign property.
Render boolean value as checkbox
You can render boolean values as checkboxes in Gantt Chart component by setting the displayAsCheckBox property to true for the desired column. This replaces the default text representation of true or false with a checkbox, making boolean fields visually clearer and more intuitive.
The following sample demonstrates how to display a boolean value as a checkbox for the Verified column.
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [treeColumnIndex]="1">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="Verified" headerText="Verified" displayAsCheckBox="true" type="boolean" textAlign="Center" width="100"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
verified: 'Verified'
};
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export const GanttData = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('2023-01-01'),
EndDate: new Date('2023-01-05'),
Duration: 5,
Progress: 30,
Verified: true,
ParentID: null
},
{
TaskID: 2,
TaskName: 'Site Analysis',
StartDate: new Date('2023-01-06'),
EndDate: new Date('2023-01-10'),
Duration: 4,
Progress: 50,
Verified: false,
ParentID: null
},
{
TaskID: 3,
TaskName: 'Soil Testing',
StartDate: new Date('2023-01-11'),
EndDate: new Date('2023-01-14'),
Duration: 3,
Progress: 40,
Verified: true,
ParentID: null
},
{
TaskID: 4,
TaskName: 'Approval Process',
StartDate: new Date('2023-01-15'),
EndDate: new Date('2023-01-18'),
Duration: 3,
Progress: 60,
Verified: false,
ParentID: null
},
{
TaskID: 5,
TaskName: 'Budget Estimation',
StartDate: new Date('2023-01-19'),
EndDate: new Date('2023-01-23'),
Duration: 4,
Progress: 70,
Verified: true,
ParentID: null
},
{
TaskID: 6,
TaskName: 'Floor Plan Design',
StartDate: new Date('2023-01-24'),
EndDate: new Date('2023-01-28'),
Duration: 4,
Progress: 80,
Verified: false,
ParentID: null
},
{
TaskID: 7,
TaskName: 'Material Listing',
StartDate: new Date('2023-01-29'),
EndDate: new Date('2023-02-02'),
Duration: 4,
Progress: 90,
Verified: true,
ParentID: null
},
{
TaskID: 8,
TaskName: 'Final Approval',
StartDate: new Date('2023-02-03'),
EndDate: new Date('2023-02-06'),
Duration: 3,
Progress: 100,
Verified: true,
ParentID: null
}
];
- The
displayAsCheckBoxproperty is only applicable to boolean values in Gantt columns.- When
displayAsCheckBoxis set to true, the boolean values will be rendered as checkboxes in the Gantt column, with checked state indicating true and unchecked state indicating false.
How to prevent checkbox for particular row
You can prevent the checkbox from rendering in a specific row of the Gantt even when displayAsCheckBox is set to true for the column. This can be done using the rowDataBound event, where you check the row index and conditionally set the inner HTML of the target cell to an empty string to hide the checkbox.
The following sample hides the checkbox for the row with ariaRowIndex set to 3.
import { GanttModule, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { Component, ViewEncapsulation, ViewChild, OnInit} from '@angular/core';
import { RowDataBoundEventArgs } from '@syncfusion/ej2-angular-grids';
import { GanttData } from './data';
@Component({
imports: [ GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]='1' [splitterSettings] = "splitterSettings" (rowDataBound)='rowDataBound($event)' >
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign='Right' width=90 ></e-column>
<e-column field='TaskName' headerText='Task Name' textAlign='Left' width=270 ></e-column>
<e-column field='Duration' headerText='Duration' textAlign='Right' width=90></e-column>
<e-column field='verified' headerText= 'Verified' displayAsCheckBox= true type= 'boolean' textAlign='Center'></e-column>
<e-column field='Progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
@ViewChild('gantt') public gantt?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
verified: 'verified'
};
this.splitterSettings = {
position: '75%'
};
}
public rowDataBound(args: RowDataBoundEventArgs) {
if (args.row?.ariaRowIndex === '3') {
args.row.children[3].innerHTML = '';
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, verified: true },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, verified: true },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, verified: true},
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, verified: true }
]
},
];AutoFit columns
The Syncfusion® Gantt Chart component for Angular supports automatic column width adjustment based on content. Double-clicking the column header resizer adjusts the width to fit the maximum content, ensuring clear data visibility without wrapping.
To enable this feature, set allowResizing to true and inject ResizeService in the providers of the component.
The following screenshot represents the resizing the column using resizer symbol.
Resizing a column to fit its content using method support
You can resize a column in Gantt to fit its content using the autoFitColumns method from the treeGrid object. This adjusts the column width based on the widest cell without wrapping. To apply this during initial rendering, call the method in the dataBound event.
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttComponent, GanttModule, ResizeService } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
standalone: true,
selector: 'app-root',
imports: [GanttModule],
providers: [ResizeService],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [allowResizing]="true" (dataBound)="dataBound()">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" format="yMd" width="120"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
</e-columns>
</ejs-gantt> `
})
export class AppComponent implements OnInit {
@ViewChild('gantt') public ganttInstance?: GanttComponent;
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
};
this.splitterSettings = {
position: '75%',
};
}
public dataBound(): void {
this.ganttInstance?.treeGrid.autoFitColumns(['TaskName']);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];You can autofit all the columns by invoking the
autoFitColumnsmethod without specifying column names.
Locked columns
You can lock columns in Syncfusion® Gantt Chart component to prevent them from being reordered and to keep them fixed at the first position. This is achieved by setting the column.lockColumn property to true in the column configuration. To visually differentiate locked columns, you can apply custom CSS using attribute selectors.
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GanttModule, ReorderService } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
providers: [ReorderService],
encapsulation: ViewEncapsulation.None,
template: `
<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [columns]="columns" [allowReordering]="true">
</ejs-gantt>`,
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
public columns: object[] = [];
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{
field: 'TaskName',
headerText: 'Task Name',
width: '270',
lockColumn: true,
customAttributes: { class: 'customcss' }
},
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
];
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));.e-gantt .e-grid .e-rowcell.customcss {
background-color: #ecedee;
}
.e-grid .e-headercell.customcss {
background-color: #ecedee;
}export const GanttData = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('2023-01-01'),
EndDate: new Date('2023-01-05'),
Duration: 5,
Progress: 30,
ParentID: null
},
{
TaskID: 2,
TaskName: 'Site Analysis',
StartDate: new Date('2023-01-06'),
EndDate: new Date('2023-01-10'),
Duration: 5,
Progress: 30,
ParentID: 1
},
{
TaskID: 3,
TaskName: 'Soil Testing',
StartDate: new Date('2023-01-11'),
EndDate: new Date('2023-01-14'),
Duration: 3,
Progress: 40,
ParentID: 1
},
{
TaskID: 4,
TaskName: 'Approval Process',
StartDate: new Date('2023-01-15'),
EndDate: new Date('2023-01-18'),
Duration: 3,
Progress: 60,
ParentID: 1
},
{
TaskID: 5,
TaskName: 'Budget Estimation',
StartDate: new Date('2023-01-19'),
EndDate: new Date('2023-01-23'),
Duration: 4,
Progress: 70,
ParentID: null
},
{
TaskID: 6,
TaskName: 'Floor Plan Design',
StartDate: new Date('2023-01-24'),
EndDate: new Date('2023-01-28'),
Duration: 4,
Progress: 80,
ParentID: 5
},
{
TaskID: 7,
TaskName: 'Material Listing',
StartDate: new Date('2023-01-29'),
EndDate: new Date('2023-02-02'),
Duration: 4,
Progress: 90,
ParentID: 5
},
{
TaskID: 8,
TaskName: 'Final Approval',
StartDate: new Date('2023-02-03'),
EndDate: new Date('2023-02-06'),
Duration: 3,
Progress: 100,
ParentID: 5
}
];Show or hide columns
The Syncfusion® Angular Gantt Chart component allows dynamic control over column visibility using built-in properties and methods. This is useful for customizing which columns are shown or hidden based on specific requirements.
Using property
You can control the visibility of columns in the Angular Gantt Chart component by setting the visible property of each column to true or false.
The following example illustrates how to dynamically toggle the visibility of the Duration column. Initially, the column is set with the visible property as false. When the switch component triggers a change event, the getColumnByField method retrieves the column, its visible property is updated based on the switch state, and refreshColumns is called to apply the changes to the UI.
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttComponent, GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
import { ChangeEventArgs, SwitchModule } from '@syncfusion/ej2-angular-buttons';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule, SwitchModule],
encapsulation: ViewEncapsulation.None,
template: `
<div style="margin-bottom:20px">
<label style="padding: 10px 10px">Enable or disable visible property</label>
<ejs-switch id="switch" (change)="change($event)"></ejs-switch>
</div>
<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings" [treeColumnIndex]="1">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90" [visible]="false"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="150"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
@ViewChild('gantt') public ganttInstance?: GanttComponent
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
public change(args: ChangeEventArgs) {
if (args.checked) {
(this.ganttInstance as GanttComponent).treeGrid.getColumnByField('Duration').visible = true;
} else {
(this.ganttInstance as GanttComponent).treeGrid.getColumnByField('Duration').visible = false;
}
(this.ganttInstance as GanttComponent).treeGrid.refreshColumns();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export const GanttData = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('2023-01-01'),
EndDate: new Date('2023-01-05'),
Duration: 5,
Progress: 30,
ParentID: null
},
{
TaskID: 2,
TaskName: 'Site Analysis',
StartDate: new Date('2023-01-06'),
EndDate: new Date('2023-01-10'),
Duration: 4,
Progress: 50,
ParentID: null
},
{
TaskID: 3,
TaskName: 'Soil Testing',
StartDate: new Date('2023-01-11'),
EndDate: new Date('2023-01-14'),
Duration: 3,
Progress: 40,
ParentID: null
},
{
TaskID: 4,
TaskName: 'Approval Process',
StartDate: new Date('2023-01-15'),
EndDate: new Date('2023-01-18'),
Duration: 3,
Progress: 60,
ParentID: null
},
{
TaskID: 5,
TaskName: 'Budget Estimation',
StartDate: new Date('2023-01-19'),
EndDate: new Date('2023-01-23'),
Duration: 4,
Progress: 70,
ParentID: null
},
{
TaskID: 6,
TaskName: 'Floor Plan Design',
StartDate: new Date('2023-01-24'),
EndDate: new Date('2023-01-28'),
Duration: 4,
Progress: 80,
ParentID: null
},
{
TaskID: 7,
TaskName: 'Material Listing',
StartDate: new Date('2023-01-29'),
EndDate: new Date('2023-02-02'),
Duration: 4,
Progress: 90,
ParentID: null
},
{
TaskID: 8,
TaskName: 'Final Approval',
StartDate: new Date('2023-02-03'),
EndDate: new Date('2023-02-06'),
Duration: 3,
Progress: 100,
ParentID: null
}
];
- Hiding a column using the
visibleproperty affects only its display; the data remains accessible in the source.- Hidden columns are excluded from the total width calculation.
- To keep a column hidden permanently, set
visibleto false or remove its definition.
Using methods
You can also show or hide columns in the Angular Gantt Chart component using the showColumn and hideColumn methods available in the Gantt. These methods allow you to control column visibility based on either the headerText or the field property.
Based on header text:
You can dynamically show or hide columns by passing either a single header text or an array of header texts as the first parameter, and specifying headerText as the second parameter. This enables dynamic control over column visibility based on the displayed header.
You can use the getGanttColumns method to retrieve all defined columns, and the getVisibleColumns method to get only the visible columns.
The following sample demonstrates how to hide and show columns using button clicks. When the Hide Column button is clicked, the hideColumn method is called with Duration as the first parameter and headerText as the second. Clicking the Show Column button restores the column using the showColumn method.
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { GanttModule, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule, ButtonModule],
encapsulation: ViewEncapsulation.None,
template: `
<button ejs-button id="show" (click)="show()" style="margin-right: 10px;">Show Column</button>
<button ejs-button id="hide" (click)="hide()">Hide Column</button>
<br /><br /><br />
<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
</e-columns>
</ejs-gantt>`
})
export class AppComponent implements OnInit {
@ViewChild('gantt') public ganttInstance?: GanttComponent;
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
public show(): void {
const allColumns = (this.ganttInstance as GanttComponent).getGanttColumns();
if (allColumns.length > 0) {
const firstColumnField = allColumns[2].headerText as string;
(this.ganttInstance as GanttComponent).showColumn(firstColumnField, 'headerText');
}
}
public hide(): void {
const visibleColumns = (this.ganttInstance as GanttComponent).treeGrid.getVisibleColumns();
if (visibleColumns.length > 0) {
const firstVisibleField = visibleColumns[2].headerText;
(this.ganttInstance as GanttComponent).hideColumn(firstVisibleField, 'headerText');
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let GanttData: Object[] = [
{ TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
];Based on field:
You can dynamically show or hide columns by passing either a single field name or an array of field names as the first parameter, and field as the second parameter to indicate that visibility is controlled using the field name.
The following sample demonstrates how to hide and show columns using button clicks. When the Hide Column button is clicked, the hideColumn method is triggered with ['TaskName', 'Duration'] as the first parameter and field as the second. Clicking the Show Column button displays the columns again using the showColumn method.
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttComponent, GanttModule } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule, ButtonModule],
template: `
<button ejs-button id="show" style="margin-right: 10px;" (click)="show()">Show Column</button>
<button ejs-button id="hide" (click)="hide()">Hide Column</button>
<br /><br /><br />
<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
</e-columns>
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild('gantt') public ganttInstance?: GanttComponent;
public data: object[] = GanttData;
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
public show(): void {
(this.ganttInstance as GanttComponent).showColumn(['TaskName', 'Duration'], 'field');
}
public hide(): void {
(this.ganttInstance as GanttComponent).hideColumn(['TaskName', 'Duration'], 'field');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let GanttData: Object[] = [
{ TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
];Controlling Gantt actions
You can manage actions like filtering, sorting, resizing, reordering, editing, and searching for specific columns in the Syncfusion® Angular Gantt using the following options:
- allowEditing: Enables or disables editing for a column.
- allowFiltering: Enables or disables filtering for a column.
- allowSorting: Enables or disables sorting for a column.
- allowReordering: Enables or disables reordering for a column.
- allowResizing: Enables or disables resizing for a column.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, ResizeService, ReorderService, SortService, FilterService } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
providers: [ResizeService, ReorderService, SortService, FilterService],
template: `
<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" [allowSorting]="true" [allowFiltering]="true" [allowReordering]="true" [allowResizing]="true">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="120" [allowSorting]="false"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270" [allowFiltering]="false"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="150"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="150"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="150"></e-column>
</e-columns>
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let GanttData: Object[] = [
{ TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
];Customize column styles
Customizing Gantt column styles allows you to modify the appearance to match your design needs. You can customize font, background color, and other style attributes using supported events, CSS, properties, or methods.
For more information check on this documentation.
Updating column definitions
To update column definitions in Angular Gantt Chart component, modify the columns property to adjust column appearance and behavior by changing attributes like headerText, width, or visible. After making the required updates, use the refreshColumns method from the treeGrid object to apply and reflect the changes in the Gantt chart.
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, GanttComponent, Column } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule, ButtonModule],
template: `
<button ejs-button cssClass="e-info" style="margin-bottom: 20px;" (click)="updateColumns()">Update Columns</button>
<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
</e-columns>
</ejs-gantt>`,
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt') public ganttInstance?: GanttComponent;
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
public updateColumns(): void {
const columns = ((this.ganttInstance as GanttComponent).treeGrid.columns as Column[]);
if (columns) {
columns[0].textAlign = 'Center';
columns[0].width = '100';
columns[2].visible = false;
columns[1].customAttributes = {
class: 'customcss'
};
(this.ganttInstance as GanttComponent).treeGrid.refreshColumns();
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));.e-headercell.customcss {
background-color: rgb(43, 195, 226);
}
.e-gantt .e-grid .e-rowcell.customcss{
background-color: rgb(43, 195, 226);
}export const GanttData = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('2023-01-01'),
EndDate: new Date('2023-01-05'),
Duration: 5,
Progress: 30,
ParentID: null
},
{
TaskID: 2,
TaskName: 'Site Analysis',
StartDate: new Date('2023-01-06'),
EndDate: new Date('2023-01-10'),
Duration: 4,
Progress: 50,
ParentID: null
},
{
TaskID: 3,
TaskName: 'Soil Testing',
StartDate: new Date('2023-01-11'),
EndDate: new Date('2023-01-14'),
Duration: 3,
Progress: 40,
ParentID: null
},
{
TaskID: 4,
TaskName: 'Approval Process',
StartDate: new Date('2023-01-15'),
EndDate: new Date('2023-01-18'),
Duration: 3,
Progress: 60,
ParentID: null
},
{
TaskID: 5,
TaskName: 'Budget Estimation',
StartDate: new Date('2023-01-19'),
EndDate: new Date('2023-01-23'),
Duration: 4,
Progress: 70,
ParentID: null
},
{
TaskID: 6,
TaskName: 'Floor Plan Design',
StartDate: new Date('2023-01-24'),
EndDate: new Date('2023-01-28'),
Duration: 4,
Progress: 80,
ParentID: null
},
{
TaskID: 7,
TaskName: 'Material Listing',
StartDate: new Date('2023-01-29'),
EndDate: new Date('2023-02-02'),
Duration: 4,
Progress: 90,
ParentID: null
},
{
TaskID: 8,
TaskName: 'Final Approval',
StartDate: new Date('2023-02-03'),
EndDate: new Date('2023-02-06'),
Duration: 3,
Progress: 100,
ParentID: null
}
];Adding/removing columns
You can add or remove columns in the Angular Gantt by updating the columns option in the Gantt instance. To add a column, push a new column object into the columns array. To remove a column, use pop to delete the last item or splice to remove a specific one from the array.
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { ColumnModel } from '@syncfusion/ej2-angular-grids';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule, ButtonModule],
template: `
<div style="margin-bottom: 20px;">
<button ejs-button style="margin-right: 10px;" id="add" cssClass="e-info" (click)="addColumns()">Add Column</button>
<button ejs-button id="delete" cssClass="e-info" (click)="deleteColumns()">Delete Column</button>
</div>
<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="270"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="150"></e-column>
</e-columns>
</ejs-gantt> `,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt') public ganttInstance?: GanttComponent;
public taskSettings: object = {};
public data: object[] = [];
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
public addColumns(): void {
const newColumns: ColumnModel[] = [
{ field: 'TaskID', headerText: 'TaskID', width: 120 },
{ field: 'StartDate', headerText: 'StartDate', width: 120, format: 'yMd' }
];
newColumns.forEach((col: any) => {
this.ganttInstance?.treeGrid.grid.columns.push(col);
});
this.ganttInstance?.treeGrid.grid.refreshColumns();
}
public deleteColumns(): void {
this.ganttInstance?.treeGrid.grid.columns.pop();
this.ganttInstance?.treeGrid.grid.refreshColumns();
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let GanttData: Object[] = [
{ TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
];Responsive columns
The Syncfusion® Angular Gantt Chart component provides a built-in feature to control column visibility based on media queries using the hideAtMedia property in the column object. This method can be used to hide columns automatically when the screen width matches specified media query conditions.
The following example demonstrates a Gantt chart where the Task Name column is set to (min-width: 700px), meaning it will be hidden when the browser width is less than or equal to 700px. Similarly, the Duration column is set to (max-width: 500px), so it will be hidden when the browser width exceeds 500px.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttModule],
template: `
<ejs-gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" [allowResizing]="true">
<e-columns>
<e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
<!-- Column hides when screen width is less than 700px -->
<e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290" hideAtMedia="(min-width: 700px)"></e-column>
<e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
<!-- Column shows only when screen width is less than or equal to 500px -->
<e-column field="Duration" headerText="Duration" textAlign="Right" width="90" hideAtMedia="(max-width: 500px)"></e-column>
<e-column field="Progress" headerText="Progress" textAlign="Right" width="150"></e-column>
</e-columns>
</ejs-gantt> `,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data: object[] = [];
public taskSettings: object = {};
public splitterSettings: object = {};
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let GanttData: Object[] = [
{ TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: true },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50, Approved: false },
{ TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), Approved: true },
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: false },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50, Approved: true }
];Clip mode
The clip mode provides options to display overflow cell content using the columns.clipMode property. The following are three types of clipMode:
- Clip: Truncates content that exceeds the cell width.
- Ellipsis: Displays ellipsis when content exceeds the cell area.
- EllipsisWithTooltip: Displays ellipsis and shows full content in a tooltip on hover.
By default, all the column’s clipMode property is defined as EllipsisWithTooltip.
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
imports: [ GanttModule],
standalone: true,
selector: 'app-root',
template:
`
<ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]='1' [splitterSettings] = "splitterSettings">
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign='Right' width=120 ></e-column>
<e-column field='TaskName' headerText='Task Name' textAlign='Left' clipMode='EllipsisWithTooltip' width=70></e-column>
<e-column field='StartDate' headerText='Start Date' textAlign='Right' width=60 ></e-column>
<e-column field='Duration' headerText='Duration' textAlign='Right' clipMode='Ellipsis' width=35 ></e-column>
<e-column field='Progress' headerText='Progress' textAlign='Right' width=190></e-column>
</e-columns>
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt') public gantt?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.splitterSettings = {
position: '75%'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];