GridCustomizeContextMenuEventArgs.Items Property

Contains context menu items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

Declaration

public IContextMenuItemCollection Items { get; }

Property Value

Type	Description
IContextMenuItemCollection	A context menu item collection.

Remarks

The DevExpress Blazor Grid allows you to display context menus with predefined and custom commands. Use the ContextMenus property to activate context menus for specific Grid elements.

Run Demo: Context Menu

Handle the CustomizeContextMenu event to modify the menu item collection. The Items event argument stores commands to display in the context menu.

Built-in Commands

The initial Items collection depends on the menu type, Grid settings, and component state. For instance, a header context menu contains the SortColumnAscending command only if sorting is allowed (on both Grid and column levels). The ClearColumnSorting command is disabled if the target column is not sorted.

The table below lists context menu types and built-in commands available in the Grid:

- The context menu includes this item by default.
- You can add this item to the context menu.
- The context menu does not support this item.

Menu Item	Data Row	Footer	Group Footer	Group Panel	Group Row	Header
AutoFitAll
ClearColumnSorting
ClearGrouping
CollapseAll
ExpandAll
GroupByColumn
HideColumn
HideGroupPanel
ShowColumnChooser
ShowFilterBuilder
ShowGroupPanel
SortColumnAscending
SortColumnDescending
UngroupColumn

Example

The following code snippet customizes commands available in the header context menu:

Razor

@inject WeatherForecastService ForecastService

<DxGrid Data="@Data" ContextMenus="GridContextMenus.Header" CustomizeContextMenu="CustomizeContextMenu">
    <Columns>
        <DxGridSelectionColumn />
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="120px" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" Width="120px" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }

    void CustomizeContextMenu(GridCustomizeContextMenuEventArgs args) {
        if (args.Context is GridHeaderCommandContext headerContext) {
            // Customizes context menu commands for the Date column header
            if (headerContext.Column is IGridDataColumn dataColumn && dataColumn.FieldName == "Date") {
                args.Items.Remove(GridContextMenuDefaultItemNames.GroupByColumn);
                args.Items.Remove(GridContextMenuDefaultItemNames.UngroupColumn);
            }
            // Customizes context menu commands for the selection column header
            if (headerContext.Column is IGridSelectionColumn selectionColumn) {
                var isFixed = selectionColumn.FixedPosition != GridColumnFixedPosition.None;
                string itemText = isFixed ? "Unfix Column" : "Fix Column to the Left";
                var newValue = isFixed ? GridColumnFixedPosition.None : GridColumnFixedPosition.Left;

                args.Items.AddCustomItem(itemText, () => {
                    headerContext.Grid.BeginUpdate();
                    headerContext.Column.FixedPosition = newValue;
                    headerContext.Grid.EndUpdate();
                });
            }
        }
    }
}

WeatherForecast

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
    public bool Precipitation { get; set; }
}

WeatherForecastService

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

public class WeatherForecastService {
    private List<WeatherForecast> Forecast { get; set; }

    private static string[] CloudCover = new[] {
        "Sunny", "Partly cloudy", "Cloudy", "Storm"
    };

    Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
        Tuple.Create( 22 , "Hot"),
        Tuple.Create( 13 , "Warm"),
        Tuple.Create( 0 , "Cold"),
        Tuple.Create( -10 , "Freezing")
    };

    public WeatherForecastService() {
        Forecast = CreateForecast();
    }

    private List<WeatherForecast> CreateForecast() {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Enumerable.Range(1, 15).Select(index => {
            var temperatureC = rng.Next(-10, 30);
            return new WeatherForecast {
                Date = startDate.AddDays(index),               
                TemperatureC = temperatureC,
                CloudCover = CloudCover[rng.Next(0, 4)],
                Precipitation = Convert.ToBoolean(rng.Next(0, 2)),
                Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
            };
        }).ToList();
    }

    public IEnumerable<WeatherForecast> GetForecast() {
        return Forecast.ToArray();
    }
    // ...
}

Program.cs

// ...
builder.Services.AddSingleton<WeatherForecastService>();