Search results

Data Binding

To bind local data source to the ContextMenu, menu items are populated from data source and mapped to items property.

The below example demonstrates how to bind local data source to the ContextMenu and separator is added using insertAfter method.

razor
databind.cs
<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
@Html.EJS().ContextMenu("contextmenu").Target("#contextmenutarget").Items("items").BeforeItemRender("beforeItemRender").Render()

<script>
    function items() {
        var data = [
        { id: 1, parentId: null, text: 'View' },
        { id: 2, parentId: null, text: 'Sort by' },
        { id: 3, parentId: null, text: '' },
        { id: 4, parentId: null, text: 'New' },
        { id: 5, parentId: null, text: '' },
        { id: 6, parentId: null, text: 'Display Settings' },
        { id: 7, parentId: null, text: 'Personalize' },
        //first level child
        { id: 8, parentId: 1, text: 'Large Icons' },
        { id: 9, parentId: 1, text: 'Medium Icons' },
        { id: 10, parentId: 1, text: 'Small Icons' },
        { id: 11, parentId: 2, text: 'Name' },
        { id: 12, parentId: 2, text: 'Size' },
        { id: 13, parentId: 4, text: 'Folder' },
        { id: 14, parentId: 4, text: 'Shortcut' },
        { id: 15, parentId: 4, text: '' },
        { id: 16, parentId: 4, text: 'Contact' }];

        var record;
        var menuItems = [];
        for (var i = 0; i < data.length; i++) {
            record = data[i];
            if (record.parentId) {
                if (!menuItems[record.parentId - 1].items) {
                    menuItems[record.parentId - 1].items = []
                }
                menuItems[record.parentId - 1].items.push({ text: record.text });
            } else {
                menuItems.push({ text: record.text });
            }
        }
    }

    function beforeItemRender(args) {
        if (!args.item.text) {
            args.element.classList.add('e-separator');
       }
    }

</script>

<style>

button {
  margin: 20px 0 0 5px;
}

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

</style>
public IActionResult Index()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            { 
                id=1,
                text = "View"
            });
            menuItems.Add(new
            {
                id = 2,
                text = "Sort By"
            });
            menuItems.Add(new
            {
                id = 5,
                text = ""
            });
            menuItems.Add(new
            {
                id = 3,
                text = "New"
            });
            menuItems.Add(new
            {
                id = 4,
                text = "Ascending",
                parentId = 2
            });
            ViewBag.menuItems = menuItems;
            return View();
        }