DxContextMenu.Data Property

Specifies a data source.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public IEnumerable Data { get; set; }

Property Value

Type Description
IEnumerable

An IEnumerable object that specifies a data source.

Remarks

The Context Menu component supports binding to data. In the bound mode, items from the data source automatically populate menu items.

Follow the steps below to bind Context Menu to data:

  1. Use the Data property to specify a data source. You can use different data types:

    • Flat data - a collection of items that are available at one level.
    • Hierarchical data - a collection of nested items.
  2. Add the DataMappings tag to the component markup.

  3. Create the DxContextMenuDataMapping instance and map item properties (BeginGroup, Enabled, and so on) to data source fields. Mappings are used to adjust the Context Menu data model to the data source.

    • Flat data - the Key and ParentKey properties are required.

    • Hierarchical data - the Children property is required.

    You can also create multiple DxContextMenuDataMapping instances to specify different mappings for different item levels. Use the Level property to specify the item level for which data mappings are applied.

The code below loads context menu items from the TextFormattingMenu class. Each menu item has child items. The code specifies the Children, Text, IconUrl, and BeginGroup mappings to adjust the context menu data model to the specified data source.

    <div style="@Formatting.GetStyleString()" class="dxbs-preventsel target-container"
         @oncontextmenu="((e) => { ContextMenu.ShowAsync(e); } )"
         @oncontextmenu:preventDefault>
         ...
    </div>
    <DxContextMenu Data="@MenuItems" ItemClick="@ItemClick" @ref="@ContextMenu">
        <DataMappings>
            <DxContextMenuDataMapping Children="Children"
                                      Text="Text"
                                      IconUrl="IconUrl"
                                      BeginGroup="BeginGroup" />
        </DataMappings>
    </DxContextMenu>

    @code {
        List<TextFormattingMenuItem> menuItems;
        List<TextFormattingMenuItem> MenuItems => menuItems = menuItems ?? TextFormattingMenu.ContextMenuItems(Formatting);
        DxContextMenu ContextMenu { get; set; }
        TextFormatting Formatting { get; set; } = new TextFormatting();

        void ItemClick(ContextMenuItemClickEventArgs args) {
            ((TextFormattingMenuItem)args.ItemInfo.DataItem).Click();
        }
    }
</DemoPageSectionComponent>

Data Binding

Run Demo: Context Menu - Data Binding

See Also