Skip to main content

DxContextMenuDataMapping Class

Maps Context Menu item properties to data source fields.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxContextMenuDataMapping :
    DxContextMenuDataMappingBase

Remarks

You can populate the Context Menu component with items from a data source.

Follow the steps below to bind Context Menu to data:

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

    • Flat data (a collection of items organized as a single-level structure)
    • Hierarchical data (a collection of nested items)
  2. Add the DataMappings tag to the component’s markup.

  3. Create the DxContextMenuDataMapping instance and map item properties (BeginGroup, Enabled, and so on) to data source fields. Mappings are used to assign data from the source collection to the component’s data model.

    • For flat data collections, use the Key and ParentKey properties to create a hierarchy of items. If the Context Menu’s structure is linear, you can omit these properties.

    • For hierarchical data collections, the Children property is required to build the data model.

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

The following code snippet 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="demo-preventsel target-container" tabindex="0"
    @oncontextmenu="@OnContextMenu"
    @oncontextmenu:preventDefault
    @onkeydown="@OnKeyDown">
    @* ... *@
    <span style="display: inline-block; text-align: center; margin: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</span>
    @* ... *@
</div>
@* ... *@
<DxContextMenu PositionTarget="#section-DataBinding .target-container" Data="@MenuItems" ItemClick="@ItemClick" SizeMode="Params.SizeMode" @ref="@ContextMenu">
    <DataMappings>
        <DxContextMenuDataMapping Children="Children"
                                  Text="Text"
                                  IconUrl="IconUrl"
                                  BeginGroup="BeginGroup"
                                  Enabled="Enabled" />
    </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();
    }
    async void OnContextMenu(MouseEventArgs args) {
        await ContextMenu.ShowAsync(args);
    }
    async void OnKeyDown(KeyboardEventArgs args) {
        if (args.Key == "F10" && args.ShiftKey)
            await ContextMenu.ShowAsync(ContextMenuPosition.Center);
    }
}

Data Binding

Run Demo: Context Menu - Data Binding Watch Video: Data Binding in Navigation Components

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DxSettingsComponent
DxDataMappingBase<DevExpress.Blazor.Navigation.Internal.IContextMenuDataMappingModel>
DxNavigationDataMappingBase<DevExpress.Blazor.Navigation.Internal.IContextMenuDataMappingModel>
DxContextMenuDataMappingBase
DxContextMenuDataMapping
See Also