How To Hide Column from the Grid Context Menu

Environment

Product Version	2019.3.917
Product	RadGrid for ASP.NET AJAX

Description

On occasion it is necessary to remove one ore more hide/show Column options available to the user in a RadGrid Header Context Menu. This can be accomplished using a combination of the RadGrid Client-side API and the RadMenu Client-side API.

Solution

Using the following Client Settings on a RadGrid, call the OnHeaderShowingMenu event. Since the Header Context Menu is just a RadMenu Context Menu use the Client-side API to hide the element. In the below example, the column Id will not be visible.

JavaScript

<script type="text/javascript">
    function OnHeaderMenuShowing(sender, args) {
        var menu = args.get_menu(); //  Gets the RadContextMenu object
        var radMenuItem = menu.findItemByText("Columns");   //  Gets the Columns RadMenuItem Object
        var radMenuItemCollection = radMenuItem.get_items();    //  Gets the Collection of Items in the Columns Object

        //  Iterate the Collection
        for (var i = 0; i < radMenuItemCollection.get_count(); i++) {
            // Do Some Logic to Hide the Item
            if (radMenuItemCollection.getItem(i).get_text() === "Id") {
                radMenuItemCollection.getItem(i).set_visible(false);
            }
        }
    }
</script>

ASP.NET

<telerik:RadGrid ID="RadGrid1" runat="server"
    EnableHeaderContextMenu="true"
    AutoGenerateColumns="False"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    OnItemCommand="RadGrid1_ItemCommand">
    <ClientSettings AllowColumnHide="true">
        <ClientEvents OnHeaderMenuShowing="OnHeaderMenuShowing"/>
    </ClientSettings>
    <MasterTableView Width="100%">
        <Columns>
            <telerik:GridBoundColumn HeaderText="Id"
                DataField="ProductId" UniqueName="Id">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Name"
                DataField="ProductName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Unit Price"
                DataField="UnitPrice">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Quantity Per Unit"
                DataField="QuantityPerUnit">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Units In Stock"
                DataField="UnitsInStock">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Units In Transit"
                DataField="UnitsOnOrder">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Reorder Level"
                DataField="ReorderLevel">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

See Also

• GridHeaderContextMenu
• GridOneHeaderMenuShowing
• RadContextMenu
• RadMenu Client-side API