[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Grid Column Resizing

The Ignite UI for Blazor Data Grid supports the ability to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each.

Blazor Grid Column Resizing Example

Column resizing in the Ignite UI for Blazor DataGrid is on by default, and can be controlled by using the ColumnResizingMode property of the grid. This property has three options. Each option is explained below:

• Deferred: The default option. When resizing, a separator will appear showing how large or small the column will become when resized.
• Immediate: When resizing, there will be no separator. The column's width will follow the pointer as you drag the edge of the column and resize accordingly.
• None: Columns cannot be resized.

When column resizing is set to Deferred, the separator that shows up can be modified in color and width by using the ColumnResizingSeparatorBackground and ColumnResizingSeparatorWidth properties of the grid, respectively.

You can also animate the columns as they resize when the resizing mode is set to Deferred only. This is done by setting the ColumnResizingAnimationMode property to Interpolate.

Each column in the grid can be determined whether or not it can resize individually. If you want to enable or disable resizing on a particular column, you can set the IsResizingEnabled property of that column.

When resizing a star-width column, it will change that column to a fixed column.

Code Snippet

The following code snippet demonstrates how to implement column resizing in the Blazor data grid, where the Street column in this case will not be resizable. In this case, the column resizing separator will be 5 pixels wide and the columns that are resizable would animate when resized as well:

<IgbDataGrid Height="100%" Width="100%"
    AutoGenerateColumns="false"
    DataSource="DataSource"
    ColumnResizingMode="ColumnResizingMode.Deferred"
    ColumnResizingAnimationMode="ColumnResizingAnimationMode.Interpolate"
    ColumnResizingSeparatorWidth="5">
    <IgbTextColumn Field="FirstName" />
    <IgbTextColumn Field="LastName" />
    <IgbTextColumn Field="Street" IsResizingEnabled="false" />
    <IgbTextColumn Field="City" />
</IgbDataGrid>

API References

• ColumnResizingAnimationMode
• ColumnResizingMode
• ColumnResizingSeparatorBackground
• ColumnResizingSeparatorWidth
• Deferred
• Interpolate