- Restrict the resizing based on minimum and maximum width
- Prevent resizing for particular column
- Resizing modes
- Touch interaction
- Resizing column externally
- Resizing events
Contact Support
Column resizing in Angular Gantt component
13 May 202424 minutes to read
Gantt chart component provides an intuitive user interface for resizing columns to fit their content. This feature allows users to easily adjust the width of the columns to improve readability and aesthetics of the data presented. To enable column resizing, set the allowResizing property of the gantt to true.
Once column resizing is enabled, columns width can be resized by clicking and dragging at the right edge of the column header. While dragging the column, the width of the respective column will be resized immediately.
To use the column resize, inject ResizeService in the provider section of AppModule.
import { BrowserModule } from '@angular/platform-browser';
import { GanttModule, ResizeService } from '@syncfusion/ej2-angular-gantt';
import { Component, ViewEncapsulation, ViewChild, OnInit, NgModule } from '@angular/core';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
imports: [
GanttModule
],
providers: [ResizeService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" #gantt height="430px" [allowResizing]='true' [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=290></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>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// Data for Gantt
public data?: object[];
@ViewChild('gantt')
public gantt?: GanttComponent;
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));
- You can disable resizing for a particular column, by specifying columns.allowResizing to false.
- In RTL mode, you can click and drag the left edge of header cell to resize the column.
- The width property of the column can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns.
Restrict the resizing based on minimum and maximum width
The Gantt chart component allows you to restrict the column width resizing between a minimum and maximum width. This can be useful when you want to ensure that your gantt chart’s columns stay within a certain range of sizes.
To enable this feature, you can define the columns.minWidth and columns.maxWidth properties of the columns directive for the respective column.
In the below code, TaskID and TaskName columns are defined with minimum and maximum width. The TaskID column is set to have a minimum width of 100 pixels and a maximum width of 200 pixels. Similarly, the TaskName column is set to have a minimum width of 150 pixels and a maximum width of 300 pixels.
import { BrowserModule } from '@angular/platform-browser';
import { GanttModule, ResizeService } from '@syncfusion/ej2-angular-gantt';
import { Component, ViewEncapsulation, ViewChild, OnInit, NgModule } from '@angular/core';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
imports: [
GanttModule
],
providers: [ResizeService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" #gantt height="430px" [allowResizing]='true' [dataSource]="data"
[taskFields]="taskSettings" [treeColumnIndex]='1' [splitterSettings] = "splitterSettings">
<e-columns>
<e-column field='TaskID' headerText='Task ID' textAlign='Right' width=90 minWidth= 100 maxWidth= 200></e-column>
<e-column field='TaskName' headerText='Task Name' textAlign='Left' width=290 minWidth= 150 maxWidth= 300></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>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// Data for Gantt
public data?: object[];
@ViewChild('gantt')
public gantt?: GanttComponent;
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));
Prevent resizing for particular column
The Gantt chart component provides the ability to prevent resizing for a particular column. This can be useful if you want to maintain a consistent column width or prevent users from changing the width of a column.
You can disable resizing for a particular column by setting the allowResizing property of the column to false. The following example demonstrates, how to disable resize for TaskID column.
import { BrowserModule } from '@angular/platform-browser';
import { GanttModule, ResizeService } from '@syncfusion/ej2-angular-gantt';
import { Component, ViewEncapsulation, ViewChild, OnInit, NgModule } from '@angular/core';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
imports: [
GanttModule
],
providers: [ResizeService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" #gantt height="430px" [allowResizing]='true' [dataSource]="data" [columns]="columns"
[taskFields]="taskSettings" [treeColumnIndex]='1' [splitterSettings] = "splitterSettings">
<e-columns>
<e-column field='TaskID' headerText='Task ID' [allowResizing]= 'false' 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 ></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>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// Data for Gantt
public data?: object[];
@ViewChild('gantt')
public gantt?: GanttComponent;
public columns?: 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));
You can also prevent resizing by setting
args.cancel
to true in the resizeStart event.
Resizing modes
You can resize the column with different mode in gantt chart by using the mode property of grid. Grid component have a ResizeSettingsModel interface for configuring the resizing behavior of grid columns. The interface includes a property named mode
which is of the type ResizeMode. The ResizeMode
is an enum that determines the available resizing modes for the grid columns. There are two resizing modes available for gantt columns in Grid:
-
Normal Mode
: This mode does not adjust the columns to fit the remaining space. When the sum of column width is less than the gantt’s width, empty space will be present to the right of the last column. When the sum of column width is greater than the gantt’s width, columns will overflow, and a horizontal scrollbar will appear. -
Auto Mode
: This mode automatically resizes the columns to fill the remaining space. When the sum of column width is less than the gantt’s width, the columns will be automatically expanded to fill the empty space. Conversely, when the sum of column width is greater than the gantt’s width, the columns will be automatically contracted to fit within the available space.
You can use this feature through grid
property object of gantt instance in load event.
The following example demonstrates how to set the resizeSettings.mode
property of grid object in gantt instance to Normal and Auto on changing the dropdown value using the change event of the DropDownList component.
import { BrowserModule } from '@angular/platform-browser';
import { GanttModule, ResizeService } from '@syncfusion/ej2-angular-gantt';
import { Component, ViewEncapsulation, ViewChild, OnInit, NgModule } from '@angular/core';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { ResizeMode } from '@syncfusion/ej2-angular-grids';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
imports: [
GanttModule
],
providers: [ResizeService],
standalone: true,
selector: 'app-root',
template:
` <div style="display: flex">
<label style="padding: 10px 10px 26px 0"> Change the resize mode: </label>
<ejs-dropdownlist style="margin-top:5px" index="0" width="150" [dataSource]="ddlData"
(change)="valueChange($event)">
</ejs-dropdownlist>
</div>
<ejs-gantt id="ganttDefault" #gantt height="430px" [allowResizing]='true' [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=290></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>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// Data for Gantt
public data?: object[];
@ViewChild('gantt')
public gantt?: GanttComponent;
public taskSettings?: object;
public splitterSettings?: object;
public ddlData: object[] = [
{ text: 'Normal', value: 'Normal' },
{ text: 'Auto', value: 'Auto' },
];
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.splitterSettings = {
position: '75%'
};
}
valueChange(args: ChangeEventArgs): void {
(this.gantt as GanttComponent).treeGrid.grid.resizeSettings.mode = (args.value as ResizeMode);
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
When the autoFit property of grid object in gantt instance is set to true, the gantt will automatically adjust its column width based on the content inside them. In
normal
resize mode, if theautoFit
property is set to true, the gantt will maintain any empty space that is left over after resizing the columns. However, inauto
resize mode, the gantt will ignore any empty space.
Touch interaction
Gantt chart component provides support for touch interactions to enable users to interact with the gantt chart using their mobile devices. Users can resize columns in the gantt by tapping and dragging the floating handler, and can also use the column menu to autofit columns.
Resizing Columns on Touch Devices
To resize columns on a touch device:
1.Tap on the right edge of the header cell of the column that you want to resize.
2.A floating handler will appear over the right border of the column.
3.Tap and drag the floating handler to resize the column to the desired width.
The following screenshot represents the column resizing on the touch device.
Resizing column externally
Gantt chart component provides the ability to resize columns using an external button click. This can be achieved by changing the width property of the column and refreshing the gantt using the refreshColumns method of treegrid object in gantt instance in the external button click function.
The following example demonstrates how to resize the columns in a gantt chart. This is done by using the change event of the DropDownList component by change the width
property of the selected column. This is accomplished using the getColumnByField method of treegrid object in gantt instance on external button click. Then, the refreshColumns
method is called on the gantt chart component to update the displayed columns based on user interaction.
import { BrowserModule } from '@angular/platform-browser';
import { GanttModule, ResizeService } from '@syncfusion/ej2-angular-gantt';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewEncapsulation, ViewChild, OnInit, NgModule } from '@angular/core';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
@Component({
imports: [
GanttModule, DropDownListAllModule, TextBoxModule, ButtonModule
],
providers: [ResizeService],
standalone: true,
selector: 'app-root',
template:
`<div style="display:flex;">
<label style="padding: 10px 10px 26px 0">Change the field: </label>
<ejs-dropdownlist
style="margin-top:5px"
id="value"
#dropdown
index="0"
width="120"
[fields]="field"
[dataSource]="ddlData"
></ejs-dropdownlist>
</div>
<div>
<label style="padding: 30px 17px 0 0">Enter the width: </label>
<ejs-textbox #textbox required placeholder="Enter new width" width="120"></ejs-textbox>
<button ejs-button id="button" cssClass="e-outline" (click)="onExternalResize()">Resize</button>
</div>
<ejs-gantt id="ganttDefault" #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=290></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>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// Data for Gantt
public data?: object[];
public field: object = { text: 'text', value: 'value' };
@ViewChild('gantt')
public gantt?: GanttComponent;
@ViewChild('dropdown')
public dropDown?: DropDownListComponent;
@ViewChild('textbox')
public textbox?: any;
public taskSettings?: object;
public splitterSettings?: object;
public ddlData: object[] = [
{ text: 'TaskID', value: 'TaskID' },
{ text: 'TaskName', value: 'TaskName' },
{ text: 'StartDate', value: 'StartDate' },
{ text: 'Duration', value: 'Duration' },
];
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.splitterSettings = {
position: '75%'
};
}
onExternalResize() {
(this.gantt as GanttComponent).treeGrid.getColumnByField((this.dropDown as DropDownListComponent).value as string).width = this.textbox.element.value;
(this.gantt 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));
The refreshColumns method of treegrid object in gantt instance is used to refresh the gantt after the column widths are updated. Column resizing externally is useful when you want to provide a custom interface to the user for resizing columns.
Resizing events
During the resizing action, the gantt chart component triggers the below three events.
1.The resizeStart event triggers when column resize starts. This event can be used to perform actions when the user begins to resize a column.
2.The resizing event triggers when column header element is dragged (moved) continuously. This event is useful when you want to perform certain actions during the column resize process.
3.The resizeStop event triggers when column resize ends. This event can be used to perform actions after the column is resized.
The following is an example of using the resizing events, the resizeStart
event is used to cancel the resizing of the TaskID column. The resizeStop
event is used to apply custom CSS attributes to the resized column.
import { BrowserModule } from '@angular/platform-browser';
import { GanttModule, ResizeService } from '@syncfusion/ej2-angular-gantt';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewEncapsulation, ViewChild, OnInit, NgModule } from '@angular/core';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ResizeArgs, Column } from '@syncfusion/ej2-angular-grids';
import { GanttData } from './data';
@Component({
imports: [
GanttModule, DropDownListAllModule, TextBoxModule, ButtonModule
],
providers: [ResizeService],
standalone: true,
selector: 'app-root',
template:
`<div style="margin-left:180px"><p style="color:red;" id="message"></p></div>
<ejs-gantt id="ganttDefault" #gantt height="430px" [dataSource]="data"
[taskFields]="taskSettings" [splitterSettings] = "splitterSettings" [allowResizing]='true'
(resizeStart)="resizeStart($event)" (resizing)="resizing($event)" (resizeStop)="resizeStop($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=290></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>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// Data for Gantt
public data?: object[];
public message?: string;
@ViewChild('gantt')
public gantt?: GanttComponent;
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%'
};
}
resizeStart(args: ResizeArgs) {
this.message = `resizeStart event triggered`;
if ((args.column as Column).field === 'TaskID') {
args.cancel = true;
}
}
resizing(args: ResizeArgs) {
this.message = `resizing event triggered`;
}
resizeStop(args: ResizeArgs) {
this.message = `resizeStop event triggered`;
const headerCell = (this.gantt as GanttComponent).treeGrid.getColumnHeaderByField((args.column as Column).field);
headerCell.classList.add('customcss');
const columnCells = (this.gantt as GanttComponent).treeGrid
.getContentTable()
.querySelectorAll(`[data-colindex="${(args.column as Column).index}"]`);
for (let i = 0; i < columnCells.length; i++) {
const cell = columnCells[i] as HTMLElement;
cell.style.backgroundColor = 'rgb(43, 195, 226)';
}
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
The ResizeArgs object passed to the events contains information such as the current column width, new column width, column index, and the original event. The resizing event is triggered multiple times during a single resize operation, so be careful when performing heavy operations in this event.