Search results

Data Binding

To bind local data source to the ContextMenu, menu items are populated from data source and mapped to Items property. In the following example, data given in CustomItems.cs file is mapped to Items property.

@using Syncfusion.EJ2.Blazor.Navigations
@using BlazorApp.MenuItems

<div id="target">Right click/Touch hold to open the ContextMenu </div>
<EjsContextMenu Target="#target" Items="@CustomItems.GetItems()"></EjsContextMenu>

<style>
    #target {
        border: 1px dashed;
        height: 150px;
        padding: 10px;
        position: relative;
        text-align: justify;
        color: gray;
        user-select: none;
    }
</style>

CustomItems.cs

public class CustomItems
    {
        public CustomItems()
        {

        }

        public CustomItems(string Text, int Id)
        {
            this.Text = Text;
            this.Id = Id;
        }

        public string Text { get; set; }
        public int Id { get; set; }
        public static List<CustomItems> GetItems()
        {
            List<CustomItems> Items = new List<CustomItems>();
            Items.Add(new CustomItems { Text = "Cut", Id = 1 });
            Items.Add(new CustomItems { Text = "Copy", Id = 2 });
            Items.Add(new CustomItems { Text = "Paste", Id = 3 });
            Items.Add(new CustomItems { Text = "New", Id = 4 });
            return Items;
        }
    }

Output be like

ContextMenu Sample