Column resizing in Angular Treegrid component
17 Nov 202215 minutes to read
Column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To enable column resize, set the allowResizing
property to true.
To use the column resize, inject Resize
module in the treegrid.
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ResizeService } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height='315' [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>`,
providers: [ResizeService ]
})
export class AppComponent implements OnInit {
public data: Object[];
ngOnInit(): void {
this.data = sampleData;
}
}
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
- You can disable resizing for a particular column by setting the
columns.allowResizing
to false.- In RTL mode, you can click and drag the left edge of the header cell to resize the column.
Min and max width
Column resize can be restricted between minimum and maximum width by defining the columns->minWidth
and columns->maxWidth
.
In the following sample, minimum and maximum width are defined for Duration
, and Task Name
columns.
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ResizeService } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height='315' [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>`,
providers: [ResizeService ]
})
export class AppComponent implements OnInit {
public data: Object[];
ngOnInit(): void {
this.data = sampleData;
}
}
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Resize stacked column
Stacked columns can be resized by clicking and dragging the right edge of the stacked column header. While dragging, the width of the respective child columns will be resized at the same time. You can disable resize for particular stacked column by setting allowResizing
as false
to its columns.
import { Component, OnInit,ViewChild } from '@angular/core';
import { stackedData } from './datasource';
import { ResizeService } from '@syncfusion/ej2-angular-treegrid';
@Component({
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>`,
providers: [ResizeService ]
})
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' },
{ 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 { 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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Touch interaction
When the right edge of the header cell is tapped, a floating handler will be visible over the right border of the column. To resize the column, tap and drag the floating handler as needed.
The following screenshot represents the column resizing in touch device.
Resizing events
During the resizing action, the tree grid component triggers the following three events:
- The resizeStart event triggers when the column resize starts.
- The resizing event triggers when the column header element is dragged (resized) continuously..
- The resizeStop event triggers when the column resize ends.
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height='315' [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[];
ngOnInit(): void {
this.data = sampleData;
}
resizing() {
alert('resizing event is Triggered');
}
resizeStop() {
alert('resizeStop event is Triggered');
}
resizeStart() {
alert('resizeStart event is Triggered');
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule, ResizeService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ResizeService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);