Vertical Grid (RowDirection.Vertical) with AutoFit ignores header/data column separation

[Michel Moreira]

Hi Syncfusion Team,

We are using the SfGrid with RowDirection.Vertical to display detailed record views, which works great for our layout needs. However, we've encountered a layout issue when trying to auto-fit the columns.

The Problem

When we use AutoFitColumnsAsync() on a grid with RowDirection="RowDirection.Vertical", the grid calculates the total required width and then divides it equally (50/50) between the header column (the left side with the HeaderText values) and the data column (the right side with the record's values).

This results in the header column being far too wide, as it only needs to fit the longest header text, while the data column becomes too narrow, often truncating the actual data. This issue also occurs when EnableAdaptiveUI is active and the grid switches to a vertical layout on smaller screens.

Expected Behavior

The auto-fit logic should treat the header and data columns independently:

1. The header column (left side) should auto-fit to the width of the longest HeaderText.
2. The data column (right side) should auto-fit to the width of the widest data value, taking the remaining available space.

Reproducible Example

Here's a minimal example that demonstrates the issue. The "Product Description" header is short, but its data is very long. When you click the "Autofit" button, you'll see the header column becomes unnecessarily wide.

@using Syncfusion.Blazor.Grids

<h3>Vertical Autofit Issue</h3>

<button class="btn btn-primary mb-2" @onclick="Autofit">Autofit Columns</button>

<SfGrid @ref="Grid" DataSource="@Products" RowDirection="RowDirection.Vertical" RowRenderingMode="RowDirection.Vertical" EnableAdaptiveUI="true">
    <GridColumns>
        <GridColumn Field=@nameof(Product.Id) HeaderText="ID"></GridColumn>
        <GridColumn Field=@nameof(Product.Name) HeaderText="Product Name"></GridColumn>
        <GridColumn Field=@nameof(Product.Description) HeaderText="Product Description"></GridColumn>
    </GridColumns>
</SfGrid>

@code {
    private SfGrid<Product> Grid;
    private List<Product> Products;

    protected override void OnInitialized()
    {
        Products = new List<Product>
        {
            new Product
            {
                Id = 101,
                Name = "Desktop Computer",
                Description = "High-performance desktop computer with the latest generation processor, 32GB RAM, and a 2TB NVMe SSD."
            }
        };
    }

    private async Task Autofit()
    {
        if (Grid != null)
        {
            await Grid.AutoFitColumnsAsync();
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
    }
}
​

Question

Is there a built-in way to achieve the expected auto-fitting behavior for vertical grids? If not, what is the recommended approach (e.g., CSS override, custom logic) to correctly size the header and data columns independently in this scenario?

Thanks for your help!

[Michel Moreira]

Hi team,

Just a follow-up on this topic. For anyone else facing this issue, I've managed to create a CSS workaround that achieves the desired layout, where the header and data content wrap and resize correctly in the vertical/responsive mode.

Here is the CSS I'm using, which can be added to the application's stylesheet:

/*
 * CSS Workaround for Vertical/Responsive Grid Multi-line Layout
*/

/* 1. Resets the table cell to act as a flex container */
.e-grid.e-row-responsive .e-gridcontent td.e-rowcell {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    border-bottom: 1px solid var(--color-sf-border-light);
}

/* 2. Resets the pseudo-element header to be a static block in the layout flow */
.e-grid.e-row-responsive .e-gridcontent td.e-rowcell::before {
    position: static !important;
    width: auto !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-sf-content-text-color);
}

/* 3. Ensures the main cell content can also wrap */
.e-grid.e-row-responsive .e-gridcontent td.e-rowcell {
    white-space: normal !important;
    word-break: break-word !important;
    color: var(--color-sf-content-text-color);
}

/* 4. Properly hides columns that are set to Visible=false */
.e-grid.e-row-responsive td.e-rowcell.e-hide {
    display: none !important;
}

/* 5. Cleans up a lingering border in this layout mode. it is a bug on current component */
.e-grid.e-row-responsive .e-tableborder {
    border-right: none;
}

While this CSS resolves the immediate visual problem, I consider it a workaround. This solution is highly dependent on the current DOM structure and class names generated by the SfGrid component.

My concern is that this fix could easily be broken by future Syncfusion updates if the internal rendering of the responsive grid changes.

Therefore, I would like to formally request that a native solution be considered for a future release. Ideally, the component's AutoFitColumnsAsync logic would properly handle this vertical layout, or perhaps new properties could be introduced to give developers control over this behavior without relying on brittle CSS overrides. A built-in feature would be far more robust and maintainable.

Thanks for your consideration.

[Prathap Senthil]

Hi Michel Moreira,

Based on the reported issue, we would like to clarify that the AutoFit feature automatically adjusts the grid column widths based on the content. However, when using Vertical Render Mode, the content is rendered horizontally, and the AutoFit feature is not supported in this mode. As a workaround, we recommend applying your custom solution at the sample level to achieve your requirement.

Please feel free to get back to us if you encounter any further difficulties. Thank you for your understanding.

Regards,
Prathap S

[Michel Moreira]

Hi Prathap S,

Thank you for your response and for clarifying that AutoFitColumnsAsync is not officially supported in the vertical rendering mode. I appreciate you confirming that detail.

However, I want to clarify that the AutoFit issue is merely a symptom of a more fundamental problem with how the vertical/responsive mode handles column layout. My primary concern is not the lack of auto-fitting, but rather the core rendering logic of the vertical mode itself, which I believe is functionally flawed.

The central issue is that the grid seems to treat the header and data content as a single entity, applying width properties incorrectly. For example, if I define a column with a specific width, like this:

<GridColumn Field=@nameof(Product.Description) HeaderText="Product Description" Width="600px"></GridColumn>

The expected behavior is that the data cell for the "Product Description" would be allotted 600px of space. Instead, the vertical grid applies this 600px width to the header label (the ::before pseudo-element on the left), making the label absurdly wide while the actual data content on the right remains cramped and unreadable.

This behavior makes the vertical layout practically unusable for displaying records with varying data lengths, as there is no effective built-in way to control the space allocated to the header. The only reason my CSS workaround is necessary is to correct this fundamental layout logic.

To put it simply: The problem isn't just that AutoFit doesn't work; it's that manual width sizing doesn't work as expected either, which points to a deeper issue in the layout rendering.

Thank you for escalating this for further consideration.

[Prathap Senthil]

Based on your concern, we would like to clarify that the Width property on grid columns is applicable only in horizontal render mode. In vertical render mode, the grid treats the header and data content as a single row, and the layout is rendered on a row-based structure rather than by column.

In vertical mode, widths are not applied statically to the header and content separately. This mode is primarily designed for mobile view and limited display capacity, so varying widths for headers and data cells are not supported. This is the intended behavior by design.Additionally, we have documented the supported features and limitations of vertical render mode. Kindly refer to the documentation linked below for more details.

Adaptive Layout in Blazor DataGrid Component | Syncfusion