Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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
   [Collapse]Getting Started
    [Collapse]Walkthroughs
     [Expand]Appearance and Conditional Formatting
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Collapse]Grid View - Columns, Rows and Cells
       Tutorial: Column Resizing
       Tutorial: Best Fit Option
       Tutorial: Auto Width Mode
       Tutorial: Fixed Columns
       Tutorial: Column Reordering
       Tutorial: Column Visibility
       Tutorial: Column Chooser API
       Tutorial: Auto Row Height
       Tutorial: Cell Merging
       Tutorial: Identifying Rows
       Tutorial: Row Height and Layout Basics
     [Expand]Banded Views
     [Expand]WinExplorer View
     [Expand]Tile View
     [Expand]Grouping
     [Expand]Filter and Search
     [Expand]Sorting
     [Expand]Summaries
     [Expand]Split Presentation
     [Expand]Row Preview Sections
     Data Grid and Views
   [Expand]Data Binding
   [Expand]Views
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Filter and Search
   [Expand]Summaries
   [Expand]Focus and Selection Handling
    Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
    Scrolling
   [Expand]Batch Modifications
   [Expand]Hit Information
    Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [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]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[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?​​​​​​​