New to Telerik UI for Blazor? Download free 30-day trial

Horizontal Grid Scrolling without Column Widths


Product Grid for Blazor,
TreeList for Blazor


This knowledge base article gives solution to the following scenario:

  • Some or none of the Grid columns have a Width.
  • The columns without a Width shrink too much or disappear when the browser window or the Grid become narrow. This phenomenon occurs no matter if the Grid shows a horizontal scrollbar or not.

How to keep the above column Width configuration and:

  • The width-less columns remain visible and do not shrink or disappear.
  • The Grid shows a horizontal scrollbar.


  1. Use the Grid's Class parameter to set a custom CSS class.
  2. Set a min-width style for the Grid table elements through the custom CSS class. The min-width value must be greater than the sum of the all set column Widths.

As a result, the width-less N number of columns will receive 1/N of the remaining space. A large-enough min-width value will ensure that the width-less columns remain visible and wide enough.

The Grid will show a horizontal scrollbar when its width is less than the table min-width.

<TelerikGrid Data="@GridData"
        <GridColumn Field="@nameof(Product.Name)" Title="Product Name" Width="200px" />
        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
        <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />

    .grid-min-width .k-table {
        min-width: 600px;
    /* optional - reset the min-width for detail Grids */
    .grid-min-width .k-table .k-table {
        min-width: auto;

@code {
    private List<Product> GridData { get; set; } = new();

    protected override void OnInitialized()
        var rnd = new Random();

        for (int i = 1; i <= 30; i++)
            GridData.Add(new Product
                Id = i,
                Name = "Product name " + i,
                Price = (decimal)(rnd.Next(1, 50) * 3.14),
                Released = DateTime.Now.AddDays(-rnd.Next(1, 365)).AddYears(-rnd.Next(1, 10)),


    public class Product
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public DateTime Released { get; set; }

See Also

In this article