Column resizing in Angular TreeGrid component
25 Aug 202524 minutes to read
The TreeGrid component provides an intuitive user interface for resizing columns to fit their content. This feature allows users to easily adjust the width of columns to improve readability and aesthetics of the data presented. To enable column resizing, set the allowResizing property of the TreeGrid to true.
Once column resizing is enabled, column 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 feature, inject ResizeService in the provider section of AppModule.
import { NgModule, } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent, ResizeService } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule,],
providers: [ResizeService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [allowResizing]='true' (dataBound)='onDataBound()' [treeColumnIndex]='1' childMapping='subtasks' >
<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=180></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=130></e-column>
<e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data?: Object[];
@ViewChild('treegrid')
public treeGridObj?: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
}
onDataBound() {
(this.treeGridObj as TreeGridComponent).autoFitColumns(['taskName']);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
- Resizing can be disabled for a particular column by specifying columns.allowResizing to false.
- In RTL mode, click and drag the left edge of header cell to resize the column.
- The
widthproperty of the column can be set initially to define the default width of the column. However, when column resizing is enabled, the default width can be overridden by manually resizing the columns.
Restrict the resizing based on minimum and maximum width
The TreeGrid component allows restricting column width resizing between a minimum and maximum width. This can be useful when ensuring that TreeGrid columns stay within a certain range of sizes.
To enable this feature, define the columns.minWidth and columns.maxWidth properties of the columns directive for the respective column.
In the following code, TaskName and duration columns are defined with minimum and maximum width. The TaskName column is set to have a minimum width of 170 pixels and a maximum width of 250 pixels. Similarly, the duration column is set to have a minimum width of 50 pixels and a maximum width of 150 pixels.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ResizeService } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule, ButtonModule],
providers: [PageService, SortService, FilterService, ResizeService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [allowResizing]='true' [treeColumnIndex]='1' childMapping='subtasks' >
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' minWidth=170 maxWidth=250 textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' minWidth=50 maxWidth=150 textAlign='Right' width=80></e-column>
<e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data?: Object[];
ngOnInit(): void {
this.data = sampleData;
}
}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 TreeGrid component provides the ability to prevent resizing for a particular column. This can be useful for maintaining a consistent column width or preventing users from changing the width of a column.
Resizing can be disabled for a particular column by setting the allowResizing property of the column to false. The following example demonstrates how to disable resize for the Task Name column.
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { ResizeService } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule,],
providers: [PageService, ResizeService, SortService, FilterService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height='250' [allowResizing]='true' [treeColumnIndex]='1' childMapping='subtasks' >
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' [allowResizing]="false" width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
<e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data?: Object[];
ngOnInit(): void {
this.data = sampleData;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Resizing can also be prevented by setting
args.cancelto true in the resizeStart event.
Resize stacked header column
The TreeGrid component allows resizing stacked columns by clicking and dragging the right edge of the stacked column header. During the resizing action, the width of the child columns is resized at the same time. Resize can be disabled for any particular stacked column by setting allowResizing as false to its columns.
In the following code, resize has been disabled for the Shipped Date column.
import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit} from '@angular/core';
import { stackedData } from './datasource';
import { ResizeService } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [ TreeGridModule,],
providers: [PageService, SortService, FilterService, ResizeService],
standalone: true,
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' height='260' [allowResizing]='true' [treeColumnIndex]='1' >
<e-columns>
<e-column headerText='Order Details' [columns]='orderColumns'></e-column>
<e-column headerText='Shipment Details' [columns]='shipColumns'></e-column>
<e-column headerText='Price Details' [columns]='priceColumns'></e-column>
</e-columns>
</ejs-treegrid>`,
})
export class AppComponent implements OnInit {
public data?: Object[];
public orderColumns?: Object[];
public shipColumns?: Object[];
public priceColumns?: Object[];
ngOnInit(): void {
this.data = stackedData;
this.orderColumns = [
{ field: 'orderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
{ field: 'orderName', headerText: 'Order Name', textAlign: 'Left', width: 180 },
{ field: 'orderDate', headerText: 'Order Date', textAlign: 'Right', width: 120, format: 'yMd'}
];
this.shipColumns = [
{ field: 'shipMentCategory', headerText: 'Shipment Category', textAlign: 'Left', width: 150 },
{ field: 'shippedDate', headerText: 'Shipped Date', textAlign: 'Right', width: 120, format: 'yMd' , allowResizing: false},
{ field: 'units', headerText: 'Units', textAlign: 'Right', width: 90 }
];
this.priceColumns = [
{ field: 'unitPrice', headerText: 'Price per unit', format: 'c2', type: 'number', width: 120, textAlign: 'Right' },
{ field: 'price', headerText: 'Total Price', width: 110, format: 'c2', type: 'number', textAlign: 'Right' }
];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Resizing modes
Columns can be resized with different modes in the TreeGrid by using the mode property of the grid. The Grid component has 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 grid columns:
-
Normal Mode: This mode does not adjust the columns to fit the remaining space. When the sum of column width is less than the grid’s width, empty space will be present to the right of the last column. When the sum of column width is greater than the grid’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 grid’s width, the columns will be automatically expanded to fill the empty space. Conversely, when the sum of column width is greater than the grid’s width, the columns will be automatically contracted to fit within the available space.
This feature can be used through the grid property object of the TreeGrid instance in the load event.
The following example demonstrates how to set the resizeSettings.mode property to Normal and Auto on changing the dropdown value using the change event of the DropDownList component.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule, } from '@syncfusion/ej2-angular-treegrid'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ResizeMode } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { ResizeService, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [TreeGridModule, DropDownListAllModule],
providers: [ResizeService],
standalone: true,
selector: 'app-container',
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-treegrid #treegrid [dataSource]='data' height='250' [allowResizing]='true' [treeColumnIndex]='1' childMapping='subtasks'>
<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=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
<e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: object[];
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
public ddlData: object[] = [
{ text: 'Normal', value: 'Normal' },
{ text: 'Auto', value: 'Auto' },
];
ngOnInit(): void {
this.data = sampleData;
}
valueChange(args: ChangeEventArgs): void {
(this.treegrid as TreeGridComponent).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 is set to true, the TreeGrid will automatically adjust its column width based on the content inside them. In
normalresize mode, if theautoFitproperty is set to true, the TreeGrid will maintain any empty space that is left over after resizing the columns. However, inautoresize mode, the TreeGrid will ignore any empty space.
Touch interaction
The TreeGrid component provides support for touch interactions to enable users to interact with the TreeGrid using their mobile devices. Users can resize columns in the TreeGrid 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:
-
Tap on the right edge of the header cell of the column that needs to be resized.
-
A floating handler will appear over the right border of the column.
-
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
The TreeGrid 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 TreeGrid using the refreshColumns method in the external button click function.
The following example demonstrates how to resize the columns in a TreeGrid. This is done by using the change event of the DropDownList component by changing the width property of the selected column. This is accomplished using the getColumnByField on external button click. Then, the refreshColumns method is called on the TreeGrid component to update the displayed columns based on user interaction.
import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { ResizeMode } from '@syncfusion/ej2-angular-grids';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { ResizeService, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
@Component({
imports: [TreeGridModule, ButtonModule, TextBoxModule, DropDownListModule],
providers: [PageService, SortService, ResizeService, FilterService],
standalone: true,
selector: 'app-container',
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-treegrid #treegrid [dataSource]='data' height='250' [allowResizing]='true' [treeColumnIndex]='1' childMapping='subtasks'>
<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=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
<e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: object[];
public field: object = { text: 'text', value: 'value' };
@ViewChild('treegrid')
public treegrid?: TreeGridComponent;
@ViewChild('dropdown')
public dropDown?: DropDownListComponent;
@ViewChild('textbox')
public textbox?: any;
ngOnInit(): void {
this.data = sampleData;
}
public ddlData: object[] = [
{ text: 'taskID', value: 'taskID' },
{ text: 'taskName', value: 'taskName' },
{ text: 'startDate', value: 'startDate' },
{ text: 'duration', value: 'duration' },
{ text: 'progress', value: 'progress' },
];
onExternalResize() {
(this.treegrid as TreeGridComponent).getColumnByField((this.dropDown as DropDownListComponent).value as string).width = this.textbox.element.value;
(this.treegrid as TreeGridComponent).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 is used to refresh the TreeGrid after the column widths are updated. Column resizing externally is useful when providing a custom interface to the user for resizing columns.
Resizing events
During the resizing action, the TreeGrid component triggers the following three events:
-
The resizeStart event triggers when column resize starts. This event can be used to perform actions when the user begins to resize a column.
-
The resizing event triggers when column header element is dragged (moved) continuously. This event is useful when performing certain actions during the column resize process.
-
The resizeStop event triggers when column resize ends. This event can be used to perform actions after the column is resized.
The following example demonstrates 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule, ResizeService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
@Component({
imports: [TreeGridModule],
providers: [ResizeService],
standalone: true,
selector: 'app-container',
template: `<div style="margin-left:180px"><p style="color:red;" id="message"></p></div>
<ejs-treegrid #treegrid [dataSource]='data' height='250' [allowResizing]='true' [treeColumnIndex]='1' childMapping='subtasks'
(resizeStart)="resizeStart()" (resizing)="resizing()" (resizeStop)="resizeStop()">
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' minWidth=170 maxWidth=250 textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' minWidth=50 maxWidth=150 textAlign='Right' width=80></e-column>
<e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data?: object[];
public message?: string;
ngOnInit(): void {
this.data = sampleData;
}
resizing() {
this.message = 'resizing event is Triggered';
}
resizeStop() {
this.message = 'resizeStop event is Triggered';
}
resizeStart() {
this.message = 'resizeStart event is Triggered';
}
}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.