Current filter:
                                You should refresh the page.
                                E

                                ASPxGridView - How to implement showing/hiding columns in the manner similar to ASPxPivotGrid

                                Tags:
                                0

                                The example demonstrates how to implement showing/hiding ASPxGridView columns in the manner similar to ASPxPivotGrid. To accomplish this, perform the following steps:

                                1. Place the ASPxPopupMenu control on a page. Add two items with such names as "HideColumn" and "ShowHideList".

                                2. Handle the client-side ASPxClientGridView.ContextMenu event. Show a popup menu if a user clicks on the grid's header.

                                3. Handle the client-side ASPxClientPopupMenu.ItemClick event. Check on which item the user has clicked and perform proper manipulations. If an item's name is "HideColumn", perform a grid's callback via the ASPxClientGridView.PerformCallback method and pass the required column name. In the ASPxGridView.CustomCallback event handler hide a column whose name we can get using e.Parameters. If an item's name is "ShowHideList", show or hide the grid's CustomizationWindow.

                                See also:
                                How to show/hide grid columns via ASPxPopupMenu (client-side version)
                                How to show/hide grid columns via ASPxPopupMenu

                                Leave a Comment
                                You must  log in  or  register  to leave comments
                                Select file
                                • Default.aspx
                                • Default.aspx.cs
                                Select language
                                • C#
                                • VB.NET
                                Select version
                                • v2011 vol 2.8 - v2012 vol 2.8
                                <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v11.2, Version=11.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxMenu" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.ASPxGridView.v11.2, Version=11.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v11.2, Version=11.2.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var colName;
        function OnItemClick(s, e) {
            if (e.item.name == 'HideColumn') {
                grid.PerformCallback(colName);
                colName = null;
            }
            else {
                if (grid.IsCustomizationWindowVisible())
                    grid.HideCustomizationWindow();
                else
                    grid.ShowCustomizationWindow();
            }
        }

        function OnContextMenu(s, e) {
            if (e.objectType == 'header') {
                colName = s.GetColumn(e.index).fieldName;
                headerMenu.GetItemByName('HideColumn').SetEnabled((colName == null ? false : true));
                headerMenu.ShowAtPos(ASPxClientUtils.GetEventX(e.htmlEvent), ASPxClientUtils.GetEventY(e.htmlEvent));
            }
        }
    </script>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxGridView ID="gvData" runat="server" AutoGenerateColumns="False" 
            DataSourceID="ads" KeyFieldName="ProductID" 
            ClientInstanceName="grid" oncustomcallback="gvData_CustomCallback">
            <Columns>
                <dx:GridViewCommandColumn VisibleIndex="0">
                    <EditButton Visible="True">
                    </EditButton>
                </dx:GridViewCommandColumn>
                <dx:GridViewDataTextColumn FieldName="ProductID" VisibleIndex="1">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="2">
                </dx:GridViewDataTextColumn>
            </Columns>
            <SettingsCustomizationWindow Enabled="True" />
            <ClientSideEvents ContextMenu="OnContextMenu" />
        </dx:ASPxGridView>
        <asp:AccessDataSource ID="ads" runat="server" DataFile="~/App_Data/data.mdb"
            SelectCommand="SELECT [ProductID], [ProductName] FROM [Products]"></asp:AccessDataSource>
        <br />
        <dx:ASPxPopupMenu ID="headerMenu" runat="server" ClientInstanceName="headerMenu">
            <Items>
                <dx:MenuItem Text="Hide column" Name="HideColumn">
                </dx:MenuItem>
                <dx:MenuItem Text="Show/hide hidden field list" Name="ShowHideList">
                </dx:MenuItem>
            </Items>
         <ClientSideEvents ItemClick="OnItemClick"/>
        </dx:ASPxPopupMenu>
    </div>
    </form>
</body>
</html>