Angular Tree Grid Column Resizing

With deferred grid column resizing, the user will see a temporary resize indicator while the Angular drag resizing operation is in effect. The new grid column width is applied once the drag operation has ended.

Angular Tree Grid Column Resizing Example

Column resizing is also enabled per-column level, meaning that the igx-tree-grid can have a mix of resizable and non-resizable columns. This is done via the resizable input of the igx-column.

<igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>

You can subscribe to the columnResized event of the igx-tree-grid to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the IgxColumnComponent object, are exposed through the event arguments.

<igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" (columnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'Title'" [resizable]="true" [width]="'100px'"></igx-column>
    <igx-column [field]="'HireDate'" [resizable]="true" [width]="'100px'"></igx-column>
</igx-tree-grid>

public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}

Resizing columns in pixels/percentages

Depending on the user scenario, the column width may be defined in pixels, percentages or a mix of both. All these scenarios are supported by the Column Resizing feature. By default if a column does not have width set, it fits the available space with width set in pixels.

This means that the following configuration is possible:

<igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" (columnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'Title'" [resizable]="true" [width]="'10%'"></igx-column>
    <igx-column [field]="'HireDate'" [resizable]="true" [width]="'100px'"></igx-column>
    <igx-column [field]="'Age'" dataType="number" [resizable]="true"></igx-column>
</igx-tree-grid>

Note

There is a slight difference in the way resizing works for columns set in pixels and percentages.

Pixels

Resizing columns with width in pixels works by directly adding or subtracting the horizontal amount of the mouse movement from the size of the column.

Percentages

When resizing columns with width in percentages, the horizontal amount of the mouse movement in pixels translates roughly to its percentage amount relative to the grid width. The columns remain responsive and any future grid resizing will still reflect on the columns as well.

Restrict column resizing

You can also configure the minimum and maximum allowable column widths. This is done via the minWidth and maxWidth inputs of the igx-column. In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by minWidth and maxWidth.

<igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

Mixing the minimum and maximum column width value types (pixels or percentages) is allowed. If the values set for minimum and maximum are set to percentages, the respective column size will be limited to those exact sizes similar to pixels.

This means the following configurations are possible:

<igx-column [field]="'ID'" width="10%" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

<igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'5%'" [maxWidth]="'15%'"></igx-column>

Auto-size columns on double click

Each column can be auto sized by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case maxWidth is set on that column and the new width exceeds that maxWidth value. In this case the column will be sized according to preset maxWidth value.

You can also auto-size a column dynamically using the exposed autosize() method on IgxColumnComponent.

@ViewChild('treeGrid') treeGrid: IgxTreeGridComponent;

let column = this.treeGrid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();

Auto-size columns on initialization

Each column can be set to auto-size on initialization by setting width to 'auto':

<igx-column width='auto'>...

When the column is first initialized in the view it resolves its width to the size of the longest visible cell or header. Note that cells that are outside of the visible rows are not included. This approach is more performance optimized than auto-sizing post initialization and is recommended especially in cases where you need to auto-size a large number of columns.

Styling

To get started with the styling of the Tree Grid column resize line, we need to import the index file, where all the theme functions and component mixins live:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

The simplest approach to achieve this is to create a new theme that extends the grid-theme and accepts many parameters as well as the $resize-line-color parameter.

$custom-grid-theme: grid-theme(
    $resize-line-color: #0288D1
);

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep.

:host {
    ::ng-deep {
        @include grid($custom-grid-theme);
    }
}

Defining a color palette

Instead of hard-coding the color values, we can achieve greater flexibility in terms of colors by using the igx-palette and igx-color functions.

igx-palette generates a color palette based on the specified primary and secondary color:

$primary-color: #0288D1;
$secondary-color: #BDBDBD;

$custom-theme-palette: palette($primary: $primary-color, $secondary: $secondary-color);

And then, with igx-color, we can easily retrieve the color from the palette.

$custom-grid-theme: grid-theme(
    $palette: $custom-theme-palette,
    $resize-line-color: color($custom-theme-palette, 'secondary', 500)
);

Note

The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please, refer to Palettes topic for detailed guidance on how to use them.

Using Schemas

Going further with the theming engine, you can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.

Extend the predefined schema provided for every component, in this case - light-grid schema:

// Extending the light grid schema
$light-grid-schema: extend($_light-grid,
    (
        resize-line-color: (
           color: ('secondary', 500)
            ),
        header-background: (
           color: ("primary", 100)
            ),
        header-text-color: (
           color: ("primary", 600)
            )
    )
);

In order to apply our custom schema, we have to extend one of the globals (light or dark), which is basically pointing out the components with a custom schema, and after that add it to the respective component theme:

// Extending the global light-schema
$custom-light-grid-schema: extend($light-schema,(
    igx-grid: $light-grid-schema
));

// Specifying the palette and schema of the custom grid theme
$custom-grid-theme: grid-theme(
    $palette: $custom-theme-palette,
    $schema: $custom-light-grid-schema
);

Don't forget to include the theme in the same way as it was demonstrated above.

Demo

Note

The sample will not be affected by the selected global theme from Change Theme.

API References

Additional Resources

Our community is active and always welcoming to new ideas.

Angular Tree Grid Column Resizing