[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Collapse]Grid View
    Main Features
    [Expand]Binding to Data
    [Collapse]Data Representation Basics
      Customization Window
    [Expand]Data Shaping and Manipulation
    [Expand]Focus and Navigation
    [Expand]Data Editing and Validation
   [Expand]Visual Elements
   [Expand]Member Tables
  [Expand]Tree List
  [Expand]Card View
  [Expand]Pivot Grid
   Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Customization Window

The Customization Window enables end-users to show and hide columns from GridView at runtime via drag-and-drop. Dragging the column header and dropping it onto the customization window hides the column. To show the column, drag its header from the customization window to the grid's column header panel.

The image below illustrates a sample customization window.

The Customization Window is disabled by default. To enable it, set the ASPxGridViewBehaviorSettings.EnableCustomizationWindow (via GridViewSettings.SettingsBehavior.EnableCustomizationWindow) property to true.

Expanded Customization Window Functionality

End-users can drag column headers and move them to the Customization Window. Placing the column header in the Customization Window sets the column's WebColumnBase.Visible property to false. If the column's GridViewColumn.ShowInCustomizationForm (via MVCxGridViewColumn.ShowInCustomizationForm) option is enabled, its header is displayed within the Customization Window.

To access and customize the Customization Window settings, use the ASPxGridViewPopupControlSettings.CustomizationWindow (via GridViewSettings.SettingsPopup.CustomizationWindow) property. These settings allow you to specify the Customization Window's position.

Expanded Showing and Hiding the Customization Window

To show the Customization Window, use the ASPxClientGridView.ShowCustomizationWindow client method.

To hide the window, call the ASPxClientGridView.HideCustomizationWindow client method. End-users can hide the window by clicking its Close button.

After the Customization Window has been closed, the ASPxClientGridView.CustomizationWindowCloseUp event is raised.

Use the ASPxClientGridView.IsCustomizationWindowVisible method to determine whether or not the Customization Window is visible.

Expanded Style

GridView provides a set of style properties that allow you to customize the appearance of various elements displayed within the Customization Window. These properties are listed in the table below.

Property Description
PopupControlStyles.CloseButton (via GridViewSettings.StylesPopup.CustomizationWindow.CloseButton) Contains style settings used to paint the Customization Window's Close button.
PopupControlStyles.Content (via GridViewSettings.StylesPopup.CustomizationWindow.Content) Contains style settings used to paint the Customization Window's content.
PopupControlStyles.Header (via GridViewSettings.StylesPopup.CustomizationWindow.Header) Contains style settings used to paint the Customization Window's header.

Expanded Example

The example below demonstrates how to enable the Customization Window within the GridView and manipulate it on the client side.

View code:

Partial View code:

The image below illustrates the result.

Expanded See Also

Is this topic helpful?​​​​​​​