New to Telerik UI for Blazor? Download Free 30-day trial
Grid - Column Resizing
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
Auto Fit Columns
| ID | Name | Price | In stock | Quantity per unit | Discontinued |
|---|
| 1 | Chai | 18 | 39 | 10 boxes x 20 bags | False |
| 2 | Chang | 19 | 17 | 24 - 12 oz bottles | False |
| 3 | Aniseed Syrup | 10 | 13 | 12 - 550 ml bottles | False |
| 4 | Chef Anton's Cajun Seasoning | 22 | 53 | 48 - 6 oz jars | False |
| 5 | Chef Anton's Gumbo Mix | 21.35 | 0 | 36 boxes | True |
| 6 | Grandma's Boysenberry Spread | 25 | 120 | 12 - 8 oz jars | False |
| 7 | Uncle Bob's Organic Dried Pears | 30 | 15 | 12 - 1 lb pkgs. | False |
| 8 | Northwoods Cranberry Sauce | 40 | 6 | 12 - 12 oz jars | False |
| 9 | Mishi Kobe Niku | 97 | 29 | 18 - 500 g pkgs. | True |
| 10 | Ikura | 31 | 31 | 12 - 200 ml jars | False |
- Column-resizing.razor
- ProductService.cs
- ProductDto.cs
Description
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 also restrict resizing below or above a certain point through the MinResizableWidth and MaxResizableWidth, parameters.
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.