Column resizing in Angular Grid Component

19 Mar 202624 minutes to read

Column resizing in the Syncfusion^® Angular Grid component allows adjusting column widths dynamically to fit content and improve data readability. This feature provides flexibility in customizing the grid layout based on data requirements and screen size.

To enable column resizing, set the allowResizing property to true and inject the ResizeService in the providers section. Once enabled, columns can be resized by clicking and dragging the right edge of the column header. The column width updates immediately during the drag operation, providing real-time visual feedback.

app.component.ts

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, ResizeService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [ResizeService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowResizing]='true' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=80></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right' width=100></e-column>
                    <e-column field='ShipAddress' headerText='Ship Address' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' width=80></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}

main.ts

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 the 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, the default width can be overridden by manually resizing the columns.

Set column resizing limits

Column resizing can be limited to a specific range by defining minimum and maximum widths. This ensures that columns remain readable and do not shrink too small or expand too wide during resize actions. The minWidth and maxWidth properties control these boundaries for each column. Both properties accept numeric values that represent pixel widths.

Behavior:

Property	Description	Example
minWidth	Defines the minimum width (in pixels). The column cannot be resized smaller than this value.	minWidth='100' keeps the column width at “100px” or more.
maxWidth	Defines the maximum width (in pixels). The column cannot be resized larger than this value	maxWidth='250' keeps the column width at “250px” or less.

In the following example, resize constraints are applied to multiple columns:

• “Order ID” column: minimum width of “100px”, maximum width of “250px”.
• “Ship Name” column: minimum width of “150px”, maximum width of “300px”.
• “Ship Country” column: minimum width of “120px”, maximum width of “280px”.

app.component.ts

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, ResizeService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [ResizeService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowResizing]='true' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' minWidth= 100 width=150 maxWidth=250 ></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name'  minWidth= 150 width=200 maxWidth=300></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right'  minWidth= 120 width=150 maxWidth=280></e-column>
                    <e-column field='ShipAddress' headerText='Ship Address' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' width=80></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];

    ngOnInit(): void {
        this.data = data;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

• The columns.minWidth and columns.maxWidth properties are applied only during column resizing. They are not considered when resizing the window, as columns cannot be re-rendered dynamically during that process.
• When setting the minWidth and maxWidth properties, ensure that the values are appropriate for the data and layout requirements.
• The specified minWidth and maxWidth values take precedence over any user-initiated resizing attempts that fall outside the defined range.

Prevent resizing for specific column

In some scenarios, certain columns may need to maintain a fixed width to preserve data consistency or layout structure. The Grid provides column-level control to prevent resizing for specific columns while allowing others to be resized freely. To disable resizing for a particular column, set the allowResizing property of that column to false. This property overrides the grid-level allowResizing setting for the specified column.

The following example demonstrates disabling resize functionality for the “Customer ID” column while keeping other columns resizable:

app.component.ts

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, ResizeService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [ResizeService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowResizing]='true' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' [allowResizing]="false" width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='Freight' headerText='Freight' width=80></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}

main.ts

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.cancel to true in the resizeStart event.

Resize stacked header columns

The Grid supports resizing stacked header columns, which are columns grouped under a parent header. When resizing a stacked column, the behavior differs from standard column resizing.

Stacked column resize behavior:

• Dragging the right edge of a stacked header resizes all child columns together.
• The total width of the child columns adjusts to match the new stacked header width.
• Each child column keeps its proportional width during the resize.
• Resizing can be disabled for specific child columns by setting their allowResizing property to false.

In the following code, resizing is disabled for the “Ship City” column:

app.component.ts

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ColumnModel, GridModule, ResizeService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [ResizeService],
    standalone: true,
    selector: 'app-root',
    template: `
    <ejs-grid [dataSource]='data' [allowResizing]='true' height='295px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' width='100' textAlign="Center" minWidth=10></e-column>
            <e-column headerText='Order Details' [columns]='orderColumns'></e-column>
            <e-column headerText='Ship Details' [columns]='shipColumns' ></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public orderColumns?: ColumnModel[];
    public shipColumns?: ColumnModel[];

    ngOnInit(): void {
        this.data = data;
        this.orderColumns = [
            {
                field: 'OrderDate',
                headerText: 'Order Date',
                format: 'yMd',
                width: 120,
                textAlign: 'Right',
                minWidth: 10,
            },
            {
                field: 'Freight',
                headerText: 'Freight ($)',
                width: 100,
                format: 'C1',
                textAlign: 'Right',
                minWidth: 10
            }
        ];

        this.shipColumns = [
            {
                field: 'ShipCity',
                headerText: 'Ship City',
                width: 100,
                minWidth: 10,
                allowResizing: false
            },
            {
                field: 'ShipCountry',
                headerText: 'Ship Country',
                width: 120,
                minWidth: 10
            }
        ];
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Resizing modes

The Syncfusion^® Angular Grid component provides flexible column resizing behavior through the ResizeSettingsModel interface. The mode property determines the way the Grid handles space distribution when columns are resized.

Available resize modes:

The ResizeMode enum provides two distinct resizing behaviors:

Mode	Description	Behavior	When to Use
Normal	Keeps fixed column widths without automatic adjustment.	- If total column width < grid width: Empty space appears to the right. - If total column width > grid width: A horizontal scrollbar appears.	Use when exact column widths are required and extra space or scrolling is acceptable.
Auto	Dynamically adjusts columns to fill available space.	- If total column width < grid width: Columns expand proportionally to fill space. - If total column width > grid width: Columns shrink proportionally to fit within the grid.	Use when the grid should always fill its container without empty space or scrollbars.

The following example demonstrates dynamically switching between Normal and Auto resize modes using a DropDownList. The resizeSettings.mode property is updated in the change event handler:

app.component.ts

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs, DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { GridComponent, GridModule, ResizeMode, ResizeService } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule, DropDownListAllModule],
  providers: [ResizeService],
  standalone: true,
  selector: 'app-root',
  template: `
  <div style="display: flex">
    <label style="padding: 5px 5px 5px 0"> Change the resize mode: </label>
    <ejs-dropdownlist index="0" width="150" [dataSource]="ddlData" (change)="valueChange($event)"></ejs-dropdownlist>
  </div>
  <ejs-grid #grid style="padding: 5px 5px" [dataSource]='data' [allowResizing]='true' height='290px'>
    <e-columns>
      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
      <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
      <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
      <e-column field='Freight' headerText='Freight' width=80></e-column>
    </e-columns>
  </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  @ViewChild('grid')
  public grid?: GridComponent;
  public ddlData: object[] = [
    { text: 'Normal', value: 'Normal' },
    { text: 'Auto', value: 'Auto' },
  ];

  ngOnInit(): void {
    this.data = data;
  }

  valueChange(args: ChangeEventArgs): void {
    (this.grid as GridComponent).resizeSettings.mode = (args.value as ResizeMode);
  }
}

main.ts

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 Grid will automatically adjust its column width based on the content inside them. In normal resize mode, if the autoFit property is set to true, the Grid will maintain any empty space that is left over after resizing the columns. However, in auto resize mode, the Grid will ignore any empty space.

Touch interaction

The Grid provides full touch support for column resizing on mobile and tablet devices. Touch-based resizing offers an intuitive interface for adjusting column widths on touchscreen devices.

Resizing Columns on touch devices

Touch-based column resizing follows a slightly different interaction pattern compared to mouse-based resizing to accommodate touch precision:

1. Tap the column edge: Tap the right edge of the header cell for the column to resize.
2. Handler appears: A floating resize handler appears over the right border of the column, making it easier to grab with touch.
3. Drag to resize: Tap and drag the floating handler left or right to adjust the column width to the desired size.
4. Release to apply: Release finger to apply the new column width.

The following screenshot represents the column resizing on the touch device:

Resizing column externally

The Grid supports programmatic column resizing through external controls or application logic. This enables creating custom interfaces for column width management, implementing preset column layouts, or responding to application state changes.

Programmatic column resizing involves two steps:

1. Update column width: Modify the width property of the target column using the getColumnByField or getColumnByUid method.

2. Refresh display: Call the refreshColumns method to apply the width changes and update the grid display.

app.component.ts

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule, DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { GridComponent, GridModule, ResizeService } from '@syncfusion/ej2-angular-grids';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [ GridModule,DropDownListAllModule,TextBoxModule,ButtonModule ],
  providers: [ResizeService],
  standalone: true,
  selector: 'app-root',
  template: `
    <div style="display:flex;">
      <label style="padding: 5px 5px 5px 0">Change the field: </label>
      <ejs-dropdownlist id="value" #dropdown index="0" width="120" [fields]="field" [dataSource]="ddlData" ></ejs-dropdownlist>
    </div>
    <div>
      <label style="padding: 5px 5px 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-grid #grid style="padding: 5px 5px" [dataSource]='data' [allowResizing]='true' height='230px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='Freight' headerText='Freight' width=80></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right' width=100></e-column>          
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  public field: object = { text: 'text', value: 'value' };
  @ViewChild('grid')
  public grid?: GridComponent;
  @ViewChild('dropdown')
  public dropDown?: DropDownListComponent;
  @ViewChild('textbox')
  public textbox?: any;
  ngOnInit(): void {
    this.data = data;
  }
  public ddlData: object[] = [
    { text: 'OrderID', value: 'OrderID' },
    { text: 'CustomerID', value: 'CustomerID' },
    { text: 'Freight', value: 'Freight' },
    { text: 'ShipCountry', value: 'ShipCountry' },
  ];
  onExternalResize() {
    (this.grid as GridComponent).getColumnByField((this.dropDown as DropDownListComponent).value as string).width = this.textbox.element.value;
    (this.grid as GridComponent).refreshColumns();
  }
}

main.ts

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 essential for applying width changes made through the column object. Without calling this method, width changes will not be reflected in the grid display.

Resizing events

The Grid provides three events that trigger during column resize operations. These events enable custom logic, validation, and status updates throughout the resize process, giving complete control over the resizing life cycle.

Available resize events:

Event	Timing	Usage	Cancelable
resizeStart	Triggered when column resize begins (on initial mouse/touch down)	Validate resize action, prevent specific columns from resizing, initialize custom logic	Yes (set args.cancel = true)
resizing	Triggered continuously while dragging the resize handle	Display real-time feedback, track width changes, update related UI	No
resizeStop	Triggered when column resize ends (on mouse/touch release)	Save resize preferences, apply post-resize styles, log resize actions	No

The following example demonstrates practical use of resize events:

• resizeStart: Prevents resizing of the “Order ID” column.
• resizing: Displays a message indicating active resize operation.
• resizeStop: Applies custom styling to the resized column and its cells.

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { GridModule, ResizeService ,GridComponent, ResizeArgs, Column } from '@syncfusion/ej2-angular-grids';
import { data } from './datasource';

@Component({
imports: [GridModule],
providers: [ResizeService],
standalone: true,
    selector: 'app-root',
    template: ` 
    <div style="margin-left:180px"><p style="color:red;" id="message">{{ message }}</p></div>
    <ejs-grid #grid [dataSource]='data' [allowResizing]='true' [enableHover]='false' height='315px' (resizeStart)="resizeStart($event)" (resizing)="resizing($event)" (resizeStop)="resizeStop($event)">
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=80></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right' width=100></e-column>
            <e-column field='ShipAddress' headerText='Ship Address' width=120></e-column>
            <e-column field='Freight' headerText='Freight' width=80></e-column>
        </e-columns>
    </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public message?: string;
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }

    resizeStart(args: ResizeArgs) {
        this.message = `resizeStart event triggered`;
        if ((args.column as Column).field === 'OrderID') {
            args.cancel = true;
        }
    }

    resizing(args: ResizeArgs) {
        this.message = `resizing event triggered`;
    }
    resizeStop(args: ResizeArgs) {
        this.message = `resizeStop event triggered`;
        const headerCell = (this.grid as GridComponent).getColumnHeaderByField((args.column as Column).field);
        headerCell.classList.add('customcss');
        const columnCells = (this.grid as GridComponent)
            .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)';
        }

    }

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

• The ResizeArgs object provides comprehensive information such as the current column width, new column width, column index, and the original DOM event.
• The resizing event is triggered continuously during drag operations, potentially triggering dozens of times per second. Avoid heavy computations or DOM manipulations in this event handler to maintain smooth performance.