Resize a Column with the UI

The RadDataGrid control supports manual resizing of the grid columns using a column resize handle. This article describes the options for the column resizing UI.

Display Mode

The display mode of the resize handle can be specified with the ColumnResizeHandleDisplayMode property of the grid. The possible values are:

• Always: The handle is always visible.
• OnColumnHeaderActionFlyoutOpen: The handle is displayed only when the column header flyout is open.
• None: The handle is not visible. This is the default option.

If you set the ColumnResizeHandleDisplayMode to OnColumnHeaderActionFlyoutOpen, you have to also set the ColumnDataOperationsMode property to Flyout.

Here is an example:

Example 1: Set the CellDecorationStyleSelector property

<telerikGrid:RadDataGrid ColumnDataOperationsMode="Flyout" ColumnResizeHandleDisplayMode="OnColumnHeaderActionFlyoutOpen"/> 

See the full example setup in the Example section of this article.

Disable Resize UI for Specific Columns

The user can disable the resizing UI for specific columns with the CanUserResize column property.

Example 2: Set the CellDecorationStyleSelector property

<telerikGrid:DataGridTextColumn PropertyName="Country" Header="Country" CanUserResize="False"/> 

See the full example setup below.

Example

To begin this example we can create a custom class, that represents our objects and create sample data to populate the RadDataGrid with.

Example 3: Create Sample Data

public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
        this.InitializeComponent();  
        this.grid.ItemsSource = new List<Data> 
        { 
            new Data { Country = "Columbia", Capital = "Bogota" }, 
            new Data { Country = "Germany", Capital = "Berlin" }, 
            new Data { Country = "Italy", Capital = "Rome" }, 
            new Data { Country = "France", Capital = "Paris" }, 
            new Data { Country = "Bulgaria", Capital = "Sofia" }, 
        }; 
    } 
} 
 
public class Data 
{ 
    public string Country { get; set; }  
    public string Capital { get; set; } 
} 

What's left is to declare our RadDataGrid in XAML.

Example 4: Declare RadDataGrid

<telerikGrid:RadDataGrid x:Name="grid" ColumnDataOperationsMode="Flyout" AutoGenerateColumns="False" ColumnResizeHandleDisplayMode="Always"> 
    <telerikGrid:RadDataGrid.Columns> 
        <telerikGrid:DataGridTextColumn PropertyName="Country" Header="Country" CanUserResize="False"/> 
        <telerikGrid:DataGridTextColumn PropertyName="Capital" Header="Capital" /> 
    </telerikGrid:RadDataGrid.Columns> 
</telerikGrid:RadDataGrid>