Tutorial: Column Visibility

• Oct 29, 2020
• 3 minutes to read

This walkthrough is a transcript of the Column Visibility video available on the DevExpress YouTube Channel.

Default Behavior

The DevExpress Grid Control supports the Microsoft Outlook style Column Chooser window, which can be invoked in the column header context menu.

You can drag a column header onto that window to hide the column from the View.

Drag it back to make the column visible again.

Note that you can also drop a column header just a little below the column header panel when the cross cursor appears. This will also hide the column and its header will appear in the customization window.

The same features are available to you at design time in Visual Studio. You can use drag-and-drop or select the Remove This Column item from the context menu. And just as at runtime, you can drag the headers back into the View.

Specifying Column Visibility

If you need to change column visibility in code, the simplest way is to use its GridColumn.Visible property. Note that setting it to false also changes the VisibleIndex property value to -1.

Switch GridColumn.Visible back and see how the GridColumn.VisibleIndex is restored to its previous value.

Restricting End-User Capabilities

Run the application and invoke the Column Chooser dialog. One column header is displayed there, so you can drag it back to the View.

If you don’t want end-users to do that, you can hide the header even from the Column Chooser window. Select the desired column and disable its OptionsColumn.ShowInCustomizationForm option.

Now open the Column Chooser again to see that the header is no longer there.

Now hide a column by dragging it down a bit. This functionality is turned on by default, but you can disable it using the View’s GridOptionsCustomization.AllowQuickHideColumns option. In that case, the cross cursor never appears and end-users can only hide columns by dragging them onto the Column Chooser form.

You can also disable column drag and drop as described in a previous tutorial (see GridOptionsCustomization.AllowColumnMoving). The Column Chooser dialog is not available in this case. But you can still hide the column using the context menu.

Responding to Column Visibility Changes

Since hiding a column is essentially changing its position to -1, then the event to use to respond to visibility change is the View’s ColumnView.ColumnPositionChanged. This tutorial illustrates this event’s usage with a simple sample. The handler will calculate the total width of all columns currently visible within the View. Note that the View provides you with the ColumnView.VisibleColumns property to make this easier. Then, the View’s Auto Column Width feature gets enabled if the total column width is less than the control’s width.

C#

using DevExpress.XtraGrid.Views.Grid;
//...
private void gridView1_ColumnPositionChanged(object sender, EventArgs e) {
    GridView view = sender as GridView;
    if(view == null) return;
    int totalWidth = view.VisibleColumns.Sum(column => column.Width);
    view.OptionsView.ColumnAutoWidth = totalWidth < gridControl.Width;
}

Run the application. Horizontal scrolling is enabled by default. Now hide a few columns. Once horizontal scrolling is no longer necessary, the Auto Column Width mode gets enabled. Bring the columns back into the View to see the horizontal scrollbar again.

Column Visibility in Banded Views

It’s worth noting that similar visibility customization functionality is available in Banded Views and Advanced Banded Views. You can drag column or band headers until the cross cursor appears or directly onto the Column Chooser dialog and in the same manner drag them back into the View.