How to: Add a Custom Popup Menu Item

• Dec 17, 2020
• 3 minutes to read

This example demonstrates how to add a custom menu item (“Hide this value”) to the field value popup menu and get information on a clicked field.

In this example, the following API is used:

• ASPxPivotGrid.PopupMenuCreated event is handled to add a custom menu item;
• ASPxPivotGrid.CustomCallback event is handled to process an item click on the server side;
• ASPxClientPivotGrid.PopupMenuItemClick client-side event performs a callback to the server to supply required values to the ASPxPivotGrid.CustomCallback event handler;
• ASPxPivotGrid.GetFieldValueInfo method returns information about the clicked field;
• PivotFieldEventArgsBase<T>.Field property gets the clicked field;
• PivotGridFieldBase.FilterValues property allows filter criteria addition to hide the specified value;
• ASPxPivotGrid.JSProperties property stores the notification string to display on the client side using the JS alert function.

C#

using DevExpress.Web.ASPxPivotGrid;
using System;
using System.Data;

namespace ASPxPivotGrid_AddCustomPopupMenuItem
{
    public partial class Default : System.Web.UI.Page {

        protected void Page_Load(object sender, EventArgs e)
        {
            DataSet ds = new DataSet();
            ds.ReadXml(Server.MapPath(@"~/App_Data/CustomerReports.xml"));
            ASPxPivotGrid1.DataSource = ds.Tables[0];
            ASPxPivotGrid1.DataBind();
        }
        protected void ASPxPivotGrid1_PopupMenuCreated(object sender, PivotPopupMenuCreatedEventArgs e)
        {
            if (e.MenuType == PivotGridPopupMenuType.FieldValueMenu)
            {
                e.Menu.Items.Add("Hide this value", "hideValue");
            }
        }

        protected void ASPxPivotGrid1_CustomCallback(object sender, PivotGridCustomCallbackEventArgs e)
        {
            ASPxPivotGrid pivot = (ASPxPivotGrid)sender;
            pivot.JSProperties["cpAlertMessage"] = null;
            string[] parameters = e.Parameters.Split(new char[] { '|' });
            if (parameters.Length == 5 && parameters[0] == "MenuItemClick")
            {
                if (parameters[1] == "hideValue")
                {
                    bool isColumn = parameters[4] == "ColumnArea";
                    PivotFieldValueEventArgs fieldValueInfo = pivot.GetFieldValueInfo(isColumn, Convert.ToInt32(parameters[3]));
                    if (isColumn)
                    {
                        pivot.JSProperties["cpAlertMessage"] = string.Format("Cannot hide the {0} column", fieldValueInfo.Value);
                    }
                    else
                    {
                        if (fieldValueInfo.Field != null)
                            fieldValueInfo.Field.FilterValues.Add(fieldValueInfo.Value);
                    }
                }
            }
        }
    }
}

VB.NET

Imports DevExpress.Web.ASPxPivotGrid
Imports System
Imports System.Data

Namespace ASPxPivotGrid_AddCustomPopupMenuItem
    Partial Public Class [Default]
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            Dim ds As New DataSet()
            ds.ReadXml(Server.MapPath("~/App_Data/CustomerReports.xml"))
            ASPxPivotGrid1.DataSource = ds.Tables(0)
            ASPxPivotGrid1.DataBind()
        End Sub
        Protected Sub ASPxPivotGrid1_PopupMenuCreated(ByVal sender As Object, ByVal e As PivotPopupMenuCreatedEventArgs)
            If e.MenuType = PivotGridPopupMenuType.FieldValueMenu Then
                e.Menu.Items.Add("Hide this value", "hideValue")
            End If
        End Sub

        Protected Sub ASPxPivotGrid1_CustomCallback(ByVal sender As Object, ByVal e As PivotGridCustomCallbackEventArgs)
            Dim pivot As ASPxPivotGrid = DirectCast(sender, ASPxPivotGrid)
            pivot.JSProperties("cpAlertMessage") = Nothing
            Dim parameters() As String = e.Parameters.Split(New Char() { "|"c })
            If parameters.Length = 5 AndAlso parameters(0) = "MenuItemClick" Then
                If parameters(1) = "hideValue" Then
                    Dim isColumn As Boolean = parameters(4) = "ColumnArea"
                    Dim fieldValueInfo As PivotFieldValueEventArgs = pivot.GetFieldValueInfo(isColumn, Convert.ToInt32(parameters(3)))
                    If isColumn Then
                        pivot.JSProperties("cpAlertMessage") = String.Format("Cannot hide the {0} column", fieldValueInfo.Value)
                    Else
                        If fieldValueInfo.Field IsNot Nothing Then
                            fieldValueInfo.Field.FilterValues.Add(fieldValueInfo.Value)
                        End If
                    End If
                End If
            End If
        End Sub
    End Class
End Namespace

ASPX

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

<%@ Register assembly="DevExpress.Web.ASPxPivotGrid.v24.1, Version=24.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPivotGrid" tagprefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <script type="text/javascript">
        function HideValue(s, e) {
            pivotGrid.PerformCallback('MenuItemClick|' +
                e.MenuItemName + '|' +
                e.FieldID + '|' +
                e.FieldValueIndex + '|' +
                e.Area
            );
        }
        function DisplayAlert(s, e) {
         if (s.cpAlertMessage != null)
          {
               alert(s.cpAlertMessage);
          }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <dx:ASPxPivotGrid ID="ASPxPivotGrid1" runat="server"
                ClientInstanceName="pivotGrid" OnCustomCallback="ASPxPivotGrid1_CustomCallback"
                OnPopupMenuCreated="ASPxPivotGrid1_PopupMenuCreated" 
                ClientIDMode="AutoID">
                <ClientSideEvents PopupMenuItemClick="HideValue" EndCallback="DisplayAlert" />
                <Fields>
                    <dx:PivotGridField ID="fieldProductName" AreaIndex="1"
                        FieldName="ProductName"
                        Area="RowArea">
                    </dx:PivotGridField>
                    <dx:PivotGridField ID="fieldCompanyName" Area="RowArea" AreaIndex="0"
                        FieldName="CompanyName">
                    </dx:PivotGridField>
                    <dx:PivotGridField ID="fieldOrderDate" Area="ColumnArea" AreaIndex="0"
                        FieldName="OrderDate"
                        GroupInterval="DateYear"
                        UnboundFieldName="fieldOrderDate">
                    </dx:PivotGridField>
                    <dx:PivotGridField ID="fieldProductAmount" Area="DataArea" AreaIndex="0"
                        FieldName="ProductAmount">
                    </dx:PivotGridField>
                </Fields>
            </dx:ASPxPivotGrid>
        </div>
    </form>
</body>
</html>