ASPxClientGridView.GetColumnByField(columnFieldName) Method

Returns the client column which is bound to the specified data source field.

Declaration

GetColumnByField(
    columnFieldName: string
): ASPxClientGridViewColumn

Parameters

Name	Type	Description
columnFieldName	string	A string value that specifies the name of the data source field to which the column is bound (the column’s GridViewDataColumn.FieldName property value).

Returns

Type	Description
ASPxClientGridViewColumn	An ASPxClientGridViewColumn object that represents the client column bound to the specified data source field.

Example

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-show-hide-grid-columns-via-aspxpopupmenu-client-side-version-e3631

using System;
using DevExpress.Web.ASPxMenu;
using DevExpress.Web.ASPxGridView;
using DevExpress.Web.ASPxClasses;

public partial class _Default : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        if(!IsPostBack)
            CreateMenuItems();
        UpdateMenuState();
    }

    protected void CallbackPanel_Callback(object source, CallbackEventArgsBase e) {
        if(e.Parameter.StartsWith("toggle")) {
            string name = e.Parameter.Substring(7);
            GridViewColumn column = Grid.Columns[name];
            if(column == null)
                return;
            column.Visible = !column.Visible;            
        }        
    }

    void CreateMenuItems() {
        for(int i = 0; i < Grid.Columns.Count; i++) {
            GridViewColumn column = Grid.Columns[i];
            GridViewDataColumn dataColumn = column as GridViewDataColumn;
            PopupMenu.Items.Add(dataColumn != null ? dataColumn.FieldName : "#", dataColumn.FieldName);
        }
    }

    void UpdateMenuState() {
        for (int i = 0; i < Grid.Columns.Count; i++) {
            MenuItem item = PopupMenu.Items[i];
            GridViewDataColumn column = Grid.Columns[i] as GridViewDataColumn;            
            item.GroupName = column.FieldName;
            item.Checked = column.Visible;
        }
    }

}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxEditors"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxMenu"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxCallbackPanel"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxRoundPanel"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxGridView"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxPanel" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPopupControl" 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>
    <script type="text/javascript">
        function Grid_ContextMenu(s, e) {
            if (e.objectType == "header") {
                var x = ASPxClientUtils.GetEventX(e.htmlEvent);
                var y = ASPxClientUtils.GetEventY(e.htmlEvent);
                PopupMenu.ShowAtPos(x, y);
            }
        }

        function OnEndCallback(s, e) {
            RefreshMenu();
        }
        function RefreshMenu(s, e) {
            for (var i = 0; i < PopupMenu.GetItemCount(); i++) {
                var item = PopupMenu.GetItem(i);

                var column = Grid.GetColumnByField(item.name);
                if (!!column) {        
                    item.SetChecked(column.visible);
                }                
            }
        }    

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <br />
    <br />
    <dx:ASPxCallbackPanel runat="server" ID="CallbackPanel" ClientInstanceName="CallbackPanel"
        Width="100%" OnCallback="CallbackPanel_Callback">
        <ClientsideEvents endcallback="OnEndCallback" />
        <panelcollection><dx:PanelContent runat="server">
                <dx:ASPxGridView ID="Grid" runat="server" Width="80%" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" KeyFieldName="ProductID" ClientInstanceName="Grid">
<ClientSideEvents ContextMenu="Grid_ContextMenu"></ClientSideEvents>
                    <Columns>
                        <dx:GridViewDataTextColumn FieldName="ProductID" VisibleIndex="0" />
                        <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="1" />
                        <dx:GridViewDataTextColumn FieldName="SupplierID" VisibleIndex="2" />
                        <dx:GridViewDataTextColumn FieldName="CategoryID" VisibleIndex="3" />
                        <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="4" />
                        <dx:GridViewDataTextColumn FieldName="UnitsInStock" VisibleIndex="5" />
                        <dx:GridViewDataTextColumn FieldName="UnitsOnOrder" VisibleIndex="6" />
                        <dx:GridViewDataTextColumn FieldName="ReorderLevel" VisibleIndex="7" />
                        <dx:GridViewDataCheckColumn FieldName="Discontinued" VisibleIndex="8" />
                    </Columns>
                    <ClientSideEvents ContextMenu="Grid_ContextMenu" />
                </dx:ASPxGridView>
                <%--Other panel content. If you do not need to update an additional content, you do not need to use ASPxCallbackPanel--%>
            </dx:PanelContent></panelcollection>
    </dx:ASPxCallbackPanel>
    <dx:ASPxPopupMenu ID="PopupMenu" runat="server" ClientInstanceName="PopupMenu"  
        SyncSelectionMode="None" CloseAction="MouseOut">
        <clientsideevents itemclick="function(s, e){ CallbackPanel.PerformCallback('toggle ' + e.item.name); }" />
    </dx:ASPxPopupMenu>
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
        SelectCommand="SELECT * FROM [Products]" />    
    </form>
</body>
</html>

Imports Microsoft.VisualBasic
Imports System
Imports DevExpress.Web.ASPxMenu
Imports DevExpress.Web.ASPxGridView
Imports DevExpress.Web.ASPxClasses

Partial Public Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If (Not IsPostBack) Then
            CreateMenuItems()
        End If
        UpdateMenuState()
    End Sub

    Protected Sub CallbackPanel_Callback(ByVal source As Object, ByVal e As CallbackEventArgsBase)
        If e.Parameter.StartsWith("toggle") Then
            Dim name As String = e.Parameter.Substring(7)
            Dim column As GridViewColumn = Grid.Columns(name)
            If column Is Nothing Then
                Return
            End If
            column.Visible = Not column.Visible
        End If
    End Sub

    Private Sub CreateMenuItems()
        For i As Integer = 0 To Grid.Columns.Count - 1
            Dim column As GridViewColumn = Grid.Columns(i)
            Dim dataColumn As GridViewDataColumn = TryCast(column, GridViewDataColumn)
            Dim itemText As String
            If dataColumn IsNot Nothing Then
                itemText = dataColumn.FieldName
            Else
                itemText = "#"
            End If
            PopupMenu.Items.Add(itemText, dataColumn.FieldName)
        Next i
    End Sub

    Private Sub UpdateMenuState()
        For i As Integer = 0 To Grid.Columns.Count - 1
            Dim item As MenuItem = PopupMenu.Items(i)
            Dim column As GridViewDataColumn = TryCast(Grid.Columns(i), GridViewDataColumn)
            item.GroupName = column.FieldName
            item.Checked = column.Visible
        Next i
    End Sub

End Class

<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxEditors"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxMenu"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxCallbackPanel"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxRoundPanel"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxGridView"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxPanel" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPopupControl" 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>
    <script type="text/javascript">
        function Grid_ContextMenu(s, e) {
            if (e.objectType == "header") {
                var x = ASPxClientUtils.GetEventX(e.htmlEvent);
                var y = ASPxClientUtils.GetEventY(e.htmlEvent);
                PopupMenu.ShowAtPos(x, y);
            }
        }

        function OnEndCallback(s, e) {
            RefreshMenu();
        }
        function RefreshMenu(s, e) {
            for (var i = 0; i < PopupMenu.GetItemCount(); i++) {
                var item = PopupMenu.GetItem(i);

                var column = Grid.GetColumnByField(item.name);
                if (!!column) {        
                    item.SetChecked(column.visible);
                }                
            }
        }    

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <br />
    <br />
    <dx:ASPxCallbackPanel runat="server" ID="CallbackPanel" ClientInstanceName="CallbackPanel"
        Width="100%" OnCallback="CallbackPanel_Callback">
        <ClientsideEvents endcallback="OnEndCallback" />
        <panelcollection><dx:PanelContent runat="server">
                <dx:ASPxGridView ID="Grid" runat="server" Width="80%" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" KeyFieldName="ProductID" ClientInstanceName="Grid">
<ClientSideEvents ContextMenu="Grid_ContextMenu"></ClientSideEvents>
                    <Columns>
                        <dx:GridViewDataTextColumn FieldName="ProductID" VisibleIndex="0" />
                        <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="1" />
                        <dx:GridViewDataTextColumn FieldName="SupplierID" VisibleIndex="2" />
                        <dx:GridViewDataTextColumn FieldName="CategoryID" VisibleIndex="3" />
                        <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="4" />
                        <dx:GridViewDataTextColumn FieldName="UnitsInStock" VisibleIndex="5" />
                        <dx:GridViewDataTextColumn FieldName="UnitsOnOrder" VisibleIndex="6" />
                        <dx:GridViewDataTextColumn FieldName="ReorderLevel" VisibleIndex="7" />
                        <dx:GridViewDataCheckColumn FieldName="Discontinued" VisibleIndex="8" />
                    </Columns>
                    <ClientSideEvents ContextMenu="Grid_ContextMenu" />
                </dx:ASPxGridView>
                <%--Other panel content. If you do not need to update an additional content, you do not need to use ASPxCallbackPanel--%>
            </dx:PanelContent></panelcollection>
    </dx:ASPxCallbackPanel>
    <dx:ASPxPopupMenu ID="PopupMenu" runat="server" ClientInstanceName="PopupMenu"  
        SyncSelectionMode="None" CloseAction="MouseOut">
        <clientsideevents itemclick="function(s, e){ CallbackPanel.PerformCallback('toggle ' + e.item.name); }" />
    </dx:ASPxPopupMenu>
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
        SelectCommand="SELECT * FROM [Products]" />    
    </form>
</body>
</html>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

ASPxClientGridView.GetColumnByField(columnFieldName) Method

Declaration

Parameters

Returns

Example