DxContextMenuDataMappingBase Class

Contains the base API for classes that implement mappings in the DxContextMenu component.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public abstract class DxContextMenuDataMappingBase :
    DxNavigationDataMappingBase<IContextMenuDataMappingModel>

Remarks

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

Follow the steps below to bind Context Menu to data:

Use the Data property to specify a data source. You can use different collection types:
Add the DataMappings tag to the component’s markup.
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.

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.

Razor
TextFormatting.cs
TextFormattingMenuData.cs

razor

<div class="demo-preventsel target-container context-menu-text-container" tabindex="0"
    @oncontextmenu="@OnContextMenu"
    @oncontextmenu:preventDefault
    @onkeydown="@OnKeyDown">
    @* ... *@
</div>
<DxContextMenu PositionTarget="#section-DataBinding .target-container" Data="@MenuItems" ItemClick="@ItemClick" SizeMode="Params.SizeMode" @ref="@ContextMenu">
    <DataMappings>
        <DxContextMenuDataMapping Children="Children"
                                  Text="Text"
                                  IconCssClass="IconCss"
                                  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);
    }
}

csharp

using System.Collections.Generic;
using System.Linq;

namespace BlazorDemo.Data {
    public class TextFormatting {
        public Dictionary<string, bool> Decoration { get; } = new Dictionary<string, bool>() {
            { "Bold", false },
            { "Italic" , false },
            { "Underline" , false },
            { "Strikethrough" , false },
            { "Overline" , false }
        };

        public string FontFamily { get; set; }
        public int FontSize { get; set; }
        public string TextCase { get; set; }
        string GetTextDecoration() {
            string textDecoration = "";
            if(Decoration["Underline"])
                textDecoration += "underline";
            if(Decoration["Overline"])
                textDecoration += " overline";
            if(Decoration["Strikethrough"])
                textDecoration += " line-through";
            return textDecoration;
        }
        public string GetStyleString() {
            string style = "";
            if(!string.IsNullOrEmpty(FontFamily))
                style += $"font-family: {FontFamily}; ";
            if(FontSize > 0)
                style += $"font-size: {FontSize}pt; ";
            if(Decoration["Bold"])
                style += "font-weight: bold; ";
            if(Decoration["Italic"])
                style += "font-style: italic; ";
            if(!string.IsNullOrEmpty(TextCase))
                style += $"text-transform: {TextCase}; ";
            string textDecoration = GetTextDecoration();
            if(!string.IsNullOrEmpty(textDecoration))
                style += $"text-decoration: {textDecoration};";
            return !string.IsNullOrEmpty(style) ? style : null;
        }
        public bool IsStyleChanged() {
            return TextCase != null || FontFamily != null || FontSize != 0 || Decoration.Values.Any(x => x);
        }
        public void ClearFormatting() {
            TextCase = null;
            FontFamily = null;
            FontSize = 0;
            Decoration["Bold"] = false;
            Decoration["Italic"] = false;
            Decoration["Underline"] = false;
            Decoration["Overline"] = false;
            Decoration["Strikethrough"] = false;
        }
    }
}

csharp

using System.Collections.Generic;

namespace BlazorDemo.Data {
    static class TextFormattingMenu {
        public static TextFormattingMenuItem FontFamilyMenuItem(TextFormatting textFormatting) =>
            new TextFormattingParentMenuItem(textFormatting, "Font", new List<TextFormattingMenuItem>() {
                new FontFamilyMenuItem(textFormatting, "Times New Roman", "Times New Roman"),
                new FontFamilyMenuItem(textFormatting, "Tahoma", "Tahoma"),
                new FontFamilyMenuItem(textFormatting, "Verdana", "Verdana"),
                new FontFamilyMenuItem(textFormatting, "Arial", "Arial"),
                new FontFamilyMenuItem(textFormatting, "MS Sans Serif", "MS Sans Serif"),
                new FontFamilyMenuItem(textFormatting, "Courier", "Courier"),
                new FontFamilyMenuItem(textFormatting, "Segoe UI", "Segoe UI"),
                new FontFamilyMenuItem(textFormatting, "Default", null) { BeginGroup = true, IconCss = "menu-icon menu-icon-check" }
            });
        public static TextFormattingMenuItem FontSizeMenuItem(TextFormatting textFormatting) =>
            new TextFormattingParentMenuItem(textFormatting, "Size", new List<TextFormattingMenuItem>() {
                new FontSizeMenuItem(textFormatting, "8pt", 8),
                new FontSizeMenuItem(textFormatting, "10pt", 10),
                new FontSizeMenuItem(textFormatting, "12pt", 12),
                new FontSizeMenuItem(textFormatting, "14pt", 14),
                new FontSizeMenuItem(textFormatting, "18pt", 18),
                new FontSizeMenuItem(textFormatting, "24pt", 24),
                new FontSizeMenuItem(textFormatting, "36pt", 36),
                new FontSizeMenuItem(textFormatting, "Default", 0) { BeginGroup = true }
            });
        static TextFormattingMenuItem FontFormattingMenuItem(TextFormatting textFormatting) =>
            new TextFormattingParentMenuItem(textFormatting, "Style", new List<TextFormattingMenuItem>() {
                new TextDecorationMenuItem(textFormatting, "Bold", "Bold"),
                new TextDecorationMenuItem(textFormatting, "Italic", "Italic"),
                new TextDecorationMenuItem(textFormatting, "Underline", "Underline"),
                new TextDecorationMenuItem(textFormatting, "Overline", "Overline"),
                new TextDecorationMenuItem(textFormatting, "Strikethrough", "Strikethrough")
            });

        public static List<TextFormattingMenuItem> ContextMenuItems(TextFormatting textFormatting) =>
            new List<TextFormattingMenuItem>() {
                FontFamilyMenuItem(textFormatting),
                FontSizeMenuItem(textFormatting),
                FontFormattingMenuItem(textFormatting),
                new ClearFormattingMenuItem(textFormatting) { BeginGroup = true }
            };
            // ...
    }
}

Run Demo: Context Menu - Data Binding

YouTube video

Implements

Inheritance

Object ComponentBase DxComponentBase DxModelComponent DxDataMappingBase<DevExpress.Blazor.Navigation.Internal.IContextMenuDataMappingModel> DxNavigationDataMappingBase<DevExpress.Blazor.Navigation.Internal.IContextMenuDataMappingModel> DxContextMenuDataMappingBase DxContextMenuDataMapping