DxContextMenuDataMapping Class

Maps Context Menu item properties to data source fields.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxContextMenuDataMapping :
    DxContextMenuDataMappingBase

Remarks

The Context Menu component supports binding to data. In 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’s markup.

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

   • Flat data - the Key and ParentKey properties are required. If the Context Menu’s structure consists of only one level, you can omit these properties.

   • 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.

Razor

<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"
                                  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();
    }
}

TextFormatting.cs

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 GetIsChanged() {
            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;
        }
    }
}

TextFormattingMenuData.cs

using System.Collections.Generic;

namespace BlazorDemo.Data {
    static class TextFormattingMenu {
        public static TextFormattingMenuItem FontFamilyMenuItem(TextFormatting textFormatting, bool withDefault = true) {
            var fontFamilies = 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"),
            };
            if(withDefault)
                fontFamilies.Add(new FontFamilyMenuItem(textFormatting, "Default", null) { BeginGroup = true });
            return new FontFormattingParentMenuItem(textFormatting, "Font", fontFamilies);
        }
        public static TextFormattingMenuItem FontSizeMenuItem(TextFormatting textFormatting) =>
            new FontFormattingParentMenuItem(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)
            });
        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 }
            };

        public static List<TextFormattingMenuItem> MenuItems(TextFormatting textFormatting) =>
            new List<TextFormattingMenuItem>() {
                FontFamilyMenuItem(textFormatting),
                FontSizeMenuItem(textFormatting),
                new ClearFormattingMenuItem(textFormatting) { BeginGroup = false }
            };
    }
}

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

Implements

IHandleEvent

IHandleAfterRender

IAsyncDisposable

IComponent

Inheritance

Object

ComponentBase

DevExpress.Blazor.Base.DxAsyncDisposableComponent

DxSettingsComponent

DxDataMappingBase<DevExpress.Blazor.Navigation.Internal.IContextMenuDataMappingModel>

DxNavigationDataMappingBase<DevExpress.Blazor.Navigation.Internal.IContextMenuDataMappingModel>

DxContextMenuDataMappingBase

DxContextMenuDataMapping