Log In
[Expand]General Information
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Collapse]Grid View
    [Collapse]Columns and Card Fields
     [Expand]Customization Form
      Tutorial: Column Resizing
      Tutorial: Best Fit Option
      Tutorial: Auto Width Mode
      Tutorial: Fixed Columns
      Tutorial: Column Reordering
      Tutorial: Column Visibility
      Tutorial: Column Chooser API
      Column and Card Field Overview
      Data Cells
      Column Width Options - Auto-Width, Best Fit and Auto-Fill Column
      Column Visibility
      Creating Columns and Binding Them to Data Fields
      Fixed Columns
    [Expand]Rows and Cards
    [Expand]Row, Column and Cell Access API
    [Expand]Split Presentation
    [Expand]Cell Merging
    [Expand]Row Preview Sections
   [Expand]View Technology
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: Column Visibility

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

Expanded 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.

Expanded 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.

Expanded 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.

Expanded 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.

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.

Expanded 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.

Expanded See Also

How would you rate this topic?​​​​​​​