Move and Resize Columns

  • 3 minutes to read

The GridControl displays column headers if the DataViewBase.ShowColumnHeaders property is set to true.

Move Columns

The GridControl displays colums in the order they are stored in the GridControl.Columns collection.

<dxg:GridControl Name="grid">
    <dxg:GridControl.Columns>
        <dxg:GridColumn FieldName="GroupName"/>
        <dxg:GridColumn FieldName="FullName"/>
        <dxg:GridColumn FieldName="BirthDate"/>
        <dxg:GridColumn FieldName="JobTitle"/>
        <dxg:GridColumn FieldName="CountryRegionName"/>
        <dxg:GridColumn FieldName="Phone" />        
    </dxg:GridControl.Columns>
    <dxg:GridControl.View>
        <dxg:TableView Name="view"/>
    </dxg:GridControl.View>
</dxg:GridControl> 

In UI

If the DataViewBase.AllowColumnMoving property value is true, users can drag and drop column headers.

A column's BaseColumn.AllowMoving property has priority over the DataViewBase.AllowColumnMoving property. You can use this property to keep a column in a specific position.

Users can also use the Column Chooser to move columns:

In Code

To move a column in code, use the DataViewBase.MoveColumnTo method.

grid.View.MoveColumnTo(grid.Columns["GroupName"], 2,
    HeaderPresenterType.Headers,
    HeaderPresenterType.Headers,
    MergeGroupPosition.Right);

Resize Columns

In UI

If the TableView.AllowResizing / TreeListView.AllowResizing property value is true, users can drag header side edges.

A column's BaseColumn.AllowResizing property has priority over the TableView.AllowResizing / TreeListView.AllowResizing property.

In Code

To resize a column in code, specify the BaseColumn.Width property.

Absolute Column Size

Set the BaseColumn.Width property to a value in pixels:

<dxg:GridControl.Columns>
    <dxg:GridColumn FieldName="GroupName" Width="50"/>
    <dxg:GridColumn FieldName="FullName" Width="150"/>
    <dxg:GridColumn FieldName="BirthDate" Width="100"/>
    <dxg:GridColumn FieldName="JobTitle" Width="150"/>
    <dxg:GridColumn FieldName="CountryRegionName" Width="100"/>
    <dxg:GridColumn FieldName="Phone" Width="100"/>        
</dxg:GridControl.Columns>

Relative (Star) Column Size

Set the BaseColumn.Width property to a weighted proportion of the available space. The available space is distributed between columns similar to the "star sizing" mechanism in the MS Data Grid.

<dxg:GridControl.Columns>
    <dxg:GridColumn FieldName="GroupName" Width="*"/>
    <dxg:GridColumn FieldName="FullName" Width="3*"/>
    <dxg:GridColumn FieldName="BirthDate" Width="2*"/>
    <dxg:GridColumn FieldName="JobTitle" Width="3*"/>
    <dxg:GridColumn FieldName="CountryRegionName" Width="2*"/>
    <dxg:GridColumn FieldName="Phone" Width="2*"/>        
</dxg:GridControl.Columns>
NOTE
  • Relative sizing does not work when the GridControl's width measures the infinite value (for example, the grid is placed within a horizontally oriented stack panel).
  • Relative sizing does not work in column bands.

Auto Column Size

Set a column's BaseColumn.Width property to Auto to make the GridControl automatically recalculate the optimal width for this column based on its content:

<dxg:GridControl.Columns>
    <dxg:GridColumn FieldName="GroupName" Width="*"/>
    <dxg:GridColumn FieldName="FullName" Width="3*"/>
    <dxg:GridColumn FieldName="BirthDate" Width="2*"/>
    <dxg:GridColumn FieldName="JobTitle" Width="Auto" AllowResizing="False"/> <!-- this column has Auto size -->
    <dxg:GridColumn FieldName="CountryRegionName" Width="2*"/>
    <dxg:GridColumn FieldName="Phone" Width="2*"/>        
</dxg:GridControl.Columns>

When a user changes the column's width, the GridControl stops recalculating the optimal width for this column. Set the BaseColumn.AllowResizing property to false to prohibit users from resizing the column.

Best Fit

The GridControl can calculate and apply the optimal width required for a column to completely display its contents. Refer to the Best Fit topic for more information.

Automatic Column Width Calculation

If the total column width exceeds the grid's width, the GridControl displays a horizontal scrollbar that allows users to scroll grid columns.

Set the TableView.AutoWidth / TreeListView.AutoWidth property to true. The GridControl changes column widths to match the total column width with the grid's width. When a user changes the width of one column, the GridControl changes the widths of other columns.

NOTE
  • The AutoWidth property does not work when the GridControl's width measures the infinite value (for example, the grid is placed within a horizontally oriented stack panel).
  • If the AutoWidth property value is true, do not set the BaseColumn.Width property to Auto.
API Description
BaseColumn.FixedWidth Set this property to true to not change the column width when other columns are resized.
BaseColumn.MinWidth / BaseColumn.MaxWidth Specifies the column's minimum / maximum width.
BaseColumn.ActualWidth Returns the column's actual width.