Customization Window

• Feb 02, 2023
• 3 minutes to read

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.

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.

Showing and Hiding the Customization Window

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

To hide the window, call the client ASPxClientGridView.HideCustomizationWindow 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.

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.

Example

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

View code:

C#

<script type="text/javascript">
    function onButtonClick() {
        // When an end-user clicks the button, the Customization Window appears.
        GridView.ShowCustomizationWindow();
        // Available methods:
        // GridView.HideCustomizationWindow() - hides the Customization Window.
        // GridView.IsCustomizationWindowVisible() - returns "true" if the Customization Window is visible.
    }
</script>

@Html.Action("GridViewPartial")

@Html.DevExpress().Button(settings =>
{
    settings.Name = "btShowCustomizationWindow";
    settings.UseSubmitBehavior = false;
    settings.Text = "Show Customization Window";
    settings.ClientSideEvents.Click = "onButtonClick";
}).GetHtml()

Partial View code:

C#

@Html.DevExpress().GridView(settings => {
    settings.Name = "GridView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
    // Enable the Customization Window.
    settings.SettingsBehavior.EnableCustomizationWindow = true;

    settings.KeyFieldName = "EmployeeID";
    settings.Columns.Add("LastName");
    settings.Columns.Add("FirstName");
    settings.Columns.Add("City");
    settings.Columns.Add("Country");
    // The following columns are not initially visible in GridView, 
    // but they are displayed within the Customization Window.
    settings.Columns.Add(col => {
        col.FieldName = "BirthDate";
        col.ShowInCustomizationForm = true;
        col.Visible = false;
    });
    settings.Columns.Add(col => {
        col.FieldName = "HireDate";
        col.ShowInCustomizationForm = true;
        col.Visible = false;
    });
    settings.Columns.Add(col => {
        col.FieldName = "PostalCode";
        col.ShowInCustomizationForm = true;
        col.Visible = false;
    });
}).Bind(Model).GetHtml()

The image below illustrates the result.