Grid View for ASP.NET Web Forms - Enable or disable context menu items and change their visibility based on selected row data

This example demonstrate how to create context menu items and enable/disable or show/hide them on the client or server.

Overview

In this example, the context menu has three items:

1. The first item is always visible and enabled.
2. The second item is enabled, but visible only for selected rows.
3. The third item is always visible, but enabled only for selected rows that have a checked checkbox in the Discontinued column.

To create context menu items, handle the grid's FillContextMenuItems event. To enable/disable and show/hide menu items, use the client-side or server-side approach.

Client-Side Approach

Handle the grid's server-side CustomJSProperties event to get row values from the server. Store the values in a List object and pass them to the client.

protected void Grid_CustomJSProperties(object sender, ASPxGridViewClientJSPropertiesEventArgs e) {
    List<bool> list = new List<bool>();
    for (int i = 0; i < Grid.VisibleRowCount; i++)
        list.Add((bool)Grid.GetRowValues(i, "Discontinued"));
    e.Properties["cpDiscontinued"] = list;
}

Handle the grid's client-side ContextMenu event. In the handler, do the following:

• Use the e.menu argument property to access the ClientPopupMenu object.
• Call the GetItemByName method to get a menu item.
• Call SetEnabled and SetVisible methods to enable/disable and show/hide menu items based on a condition.

function OnContextMenu(s, e) {
    if(e.objectType == "row") {
        var menuItemSelected = e.menu.GetItemByName("OnlySelectedRows");
        var menuItemSelectedAndDiscontinued = e.menu.GetItemByName("OnlySelectedAndDiscontinuedRows");
        var isRowSelected = s.IsRowSelectedOnPage(e.index);
        var isRowDiscontinued = s.cpDiscontinued[e.index];
        menuItemSelected.SetVisible(isRowSelected);
        menuItemSelectedAndDiscontinued.SetEnabled(isRowSelected && isRowDiscontinued);
    }
}

Server-Side Approach

Handle the grid's ContextMenuItemVisibility event. In the handler, call SetVisible and SetEnabled methods to show/hide and enable/disable menu items based on a condition.

protected void Grid_ContextMenuItemVisibility(object sender, ASPxGridViewContextMenuItemVisibilityEventArgs e) {
    if (e.MenuType == GridViewContextMenuType.Rows) {
        GridViewContextMenuItem menuItemSelected = e.Items.Find(item => item.Name == "OnlySelectedRows") as GridViewContextMenuItem;
        GridViewContextMenuItem menuItemSelectedAndDiscontinued = e.Items.Find(item => item.Name == "OnlySelectedAndDiscontinuedRows") as GridViewContextMenuItem;
        for (int i = 0; i < Grid.VisibleRowCount; i++) {
            e.SetVisible(menuItemSelected, i, Grid.Selection.IsRowSelected(i));
            e.SetEnabled(menuItemSelectedAndDiscontinued, i, Grid.Selection.IsRowSelected(i) && (bool)Grid.GetRowValues(i, "Discontinued"));
        }
    }
}

Note that this approach requires sending callbacks to the server. To enable this functionality, set the grid's ProcessSelectionChangedonServer property to true.

Files to Review

• Client-side.aspx (VB: Client-side.aspx)
• Client-side.aspx.cs (VB: Client-side.aspx.vb)
• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)
• Server-side.aspx (VB: Server-side.aspx)
• Server-side.aspx.cs (VB: Server-side.aspx.vb)

Documentation

• Grid Context Menu Items
• Grid Selection
• Passing Values Between Client and Server Sides

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)