Blazor Grid – How to Fit Columns to Content and Available Space

This example implements a DevExpress Blazor Grid column layout that adapts to different desktop screen sizes as follows:

• Columns occupy available space
• Cell content is always visible (word trimming/wrapping is disabled)

Implementation Details

1. Bind our Blazor Grid to a data source and populate the component with columns.

2. Use the Grid.TextWrapEnabled property to disable word wrapping.

3. Identify columns with fixed content width (for instance, ID, Date, Name). For "fixed content width" columns, assign maximum content length to MinWidth (Width property must not be set). This configuration ensures that a column does not shrink below a specified limit but can stretch on wide screens.

4. For remaining columns, set Width to 0px.

5. Call the AutoFitColumnWidths method to adjust zero-width columns to content and stretch fixed-width columns.

IGrid Grid { get; set; }
List<string> FixedWidthColumnCaptions = new List<string> { "ID", "First Name", 
                                        "Last Name", "Honorific", "Occupation" };

protected override void OnAfterRender(bool firstRender) {
    if (firstRender) {
        Grid.BeginUpdate();
        foreach (var column in Grid.GetColumns()) {
            if (FixedWidthColumnCaptions.Contains(column.Caption)) {
                column.MinWidth = 100;
            } 
            else {
                column.Width = "0px";
            }
        }
        Grid.EndUpdate();
        Grid.AutoFitColumnWidths();
    }
}

Files to Review

• Index.razor
• Person.cs
• PersonDataService.cs

Documentation

• Blazor Grid – Columns

More Examples

• Blazor Grid – Responsive Layout Demo

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)