Columns Layout and Width
- 3 minutes to read
The DXGrid control provides two options that, if enabled, allow end-users to modify the layout of columns within a Table View. The DataViewBase.AllowColumnMoving option controls whether end-users can change the visible position of columns via drag and drop. The TableView.AllowResizing option controls whether end-users can resize columns by dragging the right edge of their headers.
Individual columns provide the BaseColumn.AllowMoving and BaseColumn.AllowResizing options that, if specified, take priority over the view’s corresponding options. For instance, you can prevent individual columns from being moved by an end-user.
Column Position
Columns are identified by their headers. Column headers are displayed if the view’s DataViewBase.ShowColumnHeaders property is set to true.
By default, columns are displayed within a view in the same order they appear in the GridControl.Columns collection. If column moving is allowed, end-users can reorder columns by dragging their headers.
To move a column in code, use the DataViewBase.MoveColumnTo method.
To hide a column, set its BaseColumn.Visible property to false. End-users can temporarily hide individual columns via the Column Chooser. To learn more, see Showing and Hiding Columns.
Column Width
Column widths can be changed automatically, so that the total columns’ width matches the grid’s width. In this instance, changing the width of one column automatically changes the widths of other columns. This behavior is controlled by the view’s TableView.AutoWidth property. To obtain the actual width of columns, use their BaseColumn.ActualWidth property.
To prevent the width of an individual column(s) from being changed when resizing other columns, you should set its BaseColumn.FixedWidth property to true. Use the BaseColumn.MinWidth property to specify the minimum width.
If the automatic column width calculation is disabled, a column’s width is specified by its BaseColumn.Width property. Grid columns support both absolute and proportional (star) width value. If the total column width exceeds the grid’s width, a horizontal scrollbar is displayed, allowing an end-user to scroll grid columns. If you want a column (or columns) to always be displayed onscreen, regardless of scrolling, set its BaseColumn.Fixed property. For detailed information, see Fixed Columns and Bands.
Proportional column sizing.
WPF Data Grid allows you to define the proportional (star) column size. Available space is distributed among columns by weighted proportions similar to the “star sizing” mechanism used by the MS Data Grid.
Note
The proportional sizing and TableView.AutoWidth work only when the GridControl has a finite width.
The code sample below demonstrates how to define proportional column width.
<dxg:GridControl AutoGenerateColumns="AddNew" ItemsSource="{Binding Customers}" >
<dxg:GridControl.View>
<dxg:TableView />
</dxg:GridControl.View>
<dxg:GridColumn FieldName="Name" Width="3*"/>
<dxg:GridColumn FieldName="City" Width="3*"/>
<dxg:GridColumn FieldName="Visits" Width="*"/>
<dxg:GridColumn FieldName="BirthDate" Width="2*"/>
</dxg:GridControl>
Note
The proportional sizing does not work in column bands.
Best Fit
Table Views provide the capability to automatically calculate and apply the optimal width required for a column to completely display its contents. Refer to the Best Fit topic to learn more.