KB Article K18345
Visible to All Users

How to add a quick columns customization drop-down menu to a GridView

Description:
How to add a custom drop-down menu to a GridView, which will allow to show/hide columns and change columns order?

Answer:
For this purpose, you should create a GridView descendant, as shown in the How to create a GridView descendant that will allow users to customize columns order and visibility in a new drop-down menu example.
First of all, you should customize your GridView descendant for displaying a new column customization button on the column button and invoking the new ShowColumnCustomizationMenu method when a user clicks this button. For this purpose, the GridViewInfo, GridPainter and GridHandler descendants should be created. Moreover, you can add the GridView.OptionsCustomization.AllowQuickCustomizations and GridView.OptionsCustomization.QuickCustomizationIcon properties to your grid view descendant. This task can be accomplished by creating the ViewBaseOptions and GridOptionsCustomization classes descendants. Currently, the GridColumn class does not have the capability to prevent column hiding. A new GridColumn.OptionsColumn.AllowQuickHide property should be created for providing this capability. This task can be accomplished by creating the GridColumn, GridColumnCollection and OptionsColumn classes descendants.
Now, your GridView descendant is ready, and you need to create a drop-down menu for columns customization. For this purpose, create a CheckedListBoxControl descendant. Override the OnMouseMove, OnMouseUp and OnMouseDown methods to implement dragging functionality. The CheckedListBoxViewInfo, CheckedItemInfo and PainterCheckedListBox descendants should be created for making the dragging process visible.
After that, create a PopupContainerEdit descendant, which will implement the following functionality:

  1. Display the GridView.OptionsCustomization.QuickCustomizationIcon when the editor is active. The inactive editor should be hidden.
  2. Get information about the columns from the GridView.
  3. Populate the CheckedListBoxControl with items, created according to this information.
  4. Read the customization result and provide it for the GridView.
  5. Show your custom CheckedListBoxControl with the PopupContainerEdit.PopupForm.
    For the first task, the GridView.CreateHideEdit, GridView.LocateHideEdit, GridView.ShowColumnCustomizationMenu methods should be created. For the second task, the ColumnProperties, ColumnPropertiesCollection classes and the GridView.PopulateHideEdit methods should be created. For the third and fourth tasks, the PopupContainerForm.PopulateListBox, PopupContainerForm.GetCollumns and GridView.AcceptQuickHide methods should be created. For the fifth task, the PopupContainerEdit.CreatePopupControl and PopupContainerForm.CreateChekedListBox methods should be created.
    Finally, override the GridView.IsFocusedView property it should return the True value when the drop-down menu has focus.
    See Also:
    How to create a GridView descendant class and register it for design-time use
    How to inherit grid columns and use them in the XtraGrid

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.