Resize Columns

The Grid features two different column resizing mechanisms:

• Resize by Dragging
• Fit to Content

The example at the end of this page shows both options in action.

Resize by Dragging

The Grid allows users to resize columns by dragging the borders between header cells.

To enable column resizing, set the Resizable parameter of the grid to true.

To prevent the user from resizing a certain column, set its own parameter Resizable="false". The user will still be able to resize other columns around it.

Here a few notes on the resizing behavior:

• If the column Width is less than MinResizableWidth and the user tries to resize the column, it will snap to its minimum width.
• Similarly, if the column Width is greater than MaxResizableWidth, the column will snap to its maximum width.
• In multi-column header scenarios, you may set MinResizableWidth or MaxResizableWidth to child columns only. Setting these attributes to parent columns will have no effect.

Autofit Columns

When column resizing is enabled, a double click on the resize handle between the header cells will automatically fit the column width to the content of the header, data and footers. This will remove text wrapping in the component.

The Grid also exposes methods to programmatically resize columns to fit their contents:

• AutoFitColumnAsync(string id)—Autofits the column with the specified Id attribute.
• AutoFitColumnsAsync(IEnumerable<string> ids)—Autofits multiple columns at once.
• AutoFitAllColumnsAsync()—Autofits all applicable columns. For example, this method does not affect the hierarchy expand/collapse columns.

Autofitting specific columns preserves the current widths of all the other columns. Similar to column resizing, column autofitting can trigger a horizontal Grid scrollbar, or leave empty space after the last column.

Programmatic autofitting works even if column resizing is disabled.

Limitations

The known limitations of the Autofit Columns feature include:

• Autofitting the columns is not supported with Virtual Columns.

• Autofitting the columns on initial load of the Grid is not supported.

Trying to autofit the columns on initial load will throw a NullReferenceException. Check the AutoFit all Grid columns on initial load knowledge-based article to see a possible solution to achieve this behavior.

Example

How Column Resizing Works in the Telerik Grid

Grid Column Resizing and Autofitting

<p>Resize the Grid columns and click the AutoFit buttons. The command column is not resizable by the user.</p>

<TelerikButton OnClick="@AutoFitSingleColumn">AutoFit ID Column</TelerikButton>
<TelerikButton OnClick="@AutoFitMultipleColumns">AutoFit String Columns</TelerikButton>
<TelerikButton OnClick="@AutoFitAllColumns">AutoFit All Columns</TelerikButton>

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             Resizable="true"
             Pageable="true"
             Sortable="true"
             Height="300px">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.Id) Title="ID" Id="@IdColumnId" />
        <GridColumn Field=@nameof(SampleData.FirstName) Title="First Name" Id="@FirstNameColumnId" />
        <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" Id="@LastNameColumnId" />
        <GridCommandColumn Width="100px" Resizable="false">
            <GridCommandButton Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
            <GridCommandButton Icon="@SvgIcon.Trash">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public TelerikGrid<SampleData>? GridRef { get; set; }
    public List<SampleData> GridData { get; set; } = new();

    // Columns IDs used in the Grid column definitions and in the AutoFit methods.
    private const string IdColumnId = "id-column";
    private const string FirstNameColumnId = "first-name-column";
    private const string LastNameColumnId = "last-name-column";

    private async Task AutoFitSingleColumn()
    {
        await GridRef!.AutoFitColumnAsync(IdColumnId);
    }

    private async Task AutoFitMultipleColumns()
    {
        var columnIds = new List<string>() { FirstNameColumnId, LastNameColumnId };
        await GridRef!.AutoFitColumnsAsync(columnIds);
    }

    private async Task AutoFitAllColumns()
    {
        await GridRef!.AutoFitAllColumnsAsync();
    }

    protected override void OnInitialized()
    {
        GridData = GetData();
    }

    private List<SampleData> GetData()
    {
        return Enumerable.Range(1, 50).Select(x => new SampleData
        {
            Id = x,
            FirstName = $"Name {x}",
            LastName = $"Surname {x}"
        }).ToList();
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string FirstName { get; set; } = string.Empty;
        public string LastName { get; set; } = string.Empty;
    }
}

See Also

• Live Demo: Column Resizing
• Blazor Grid