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

Grid - Column Resizing

1Chai18.00003910 boxes x 20 bagsFalse
2Chang19.00001724 - 12 oz bottlesFalse
3Aniseed Syrup10.00001312 - 550 ml bottlesFalse
4Chef Anton's Cajun Seasoning22.00005348 - 6 oz jarsFalse
5Chef Anton's Gumbo Mix21.3500036 boxesTrue
6Grandma's Boysenberry Spread25.000012012 - 8 oz jarsFalse
7Uncle Bob's Organic Dried Pears30.00001512 - 1 lb pkgs.False
8Northwoods Cranberry Sauce40.0000612 - 12 oz jarsFalse
9Mishi Kobe Niku97.00002918 - 500 g pkgs.True
10Ikura31.00003112 - 200 ml jarsFalse
  • Column-resizing.razor
  • WeatherForecastService.cs
  • WeatherForecast.cs
Loading the demo source code...please wait.


The Telerik Grid component for Blazor allows you to resize its columns in order to align the column width to the content in the way you prefer.

To start resizing, drag the border of the header of the Grid column and drop it to a new location.

When you double click the resize border in the header of the grid, the column will automaically fit its width to the contents of its data, header and footer.

You can let the users resize the grid columns by setting the Resizable parameter to true.

If you would like to prevent resizing for a particular column, you can set the Resizable parameter of that particular column to false.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.