Search results

How To

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
@section ControlsSection{

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

Open and Close Context Menu

Open and close the ContextMenu manually whenever required by using the open and close methods. In the following sample, to open the ContextMenu at specified position the open method is used with X and Y coordinates and to close ContextMenu close method can be used.

razor
openclose.cs
@section ControlsSection{

    <button class='e-btn' id="btnElement">Open ContextMenu</button>
    @Html.EJS().ContextMenu("contextmenu").Items((IEnumerable<object>)ViewBag.items).Render()

}

<script>

    document.getElementById('btnElement').onclick=function() {
      var contextMenuObj = document.getElementById("contextmenu").EJ2_instances[0];
      contextMenuObj.open(60, 20);
    }

</script>

<style>

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

</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ContextMenuController : Controller
    {
        public IActionResult OpenClose()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Cut"
            });
            menuItems.Add(new
            {
                text = "Copy"
            });
            menuItems.Add(new
            {
                text = "Paste"
            });
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}

Table in Sub ContextMenu

Menu items of the ContextMenu can be customized according to the requirement. The section explains about how to customize table template in sub menu item.

This can be achieved by appending table layout while li rendering by using beforeItemRender event.

razor
table.cs
@section ControlsSection{

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

}

<script>

    function beforeItemRender(args) {
        if (args.item.text === 'Insert') {
            args.element.innerText = '';
            args.element.appendChild(this.createTable());
            args.element.style.height = '105px';
            args.element.classList.add('e-hover-list');
        }
        if (args.item.text === 'Insert Table') {
            args.element.classList.add('e-hover-list');
        }
    }

    function createTable() {
        var table = document.createElement('table');
        for (let i: number = 0; i < 5; i++) {
            let row: HTMLElement = document.createElement('tr');
            table.appendChild(row);
            for (let j: number = 0; j < 6; j++) {
                let col: HTMLElement = document.createElement('td');
                row.appendChild(col);
                col.setAttribute('class', 'e-data');
            }
        }
        return table;
    }

</script>

<style>

#contextmenutarget {
    border: 1px dashed;
    height: 250px;
    padding: 10px;
    position: relative;
    text-align: center;
    color: gray;
    line-height: 17;
    font-size: 14px;
}

/* csslint ignore:start */
@@font-face {
    font-family: 'ddb-icons';
    src:
    url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* csslint ignore:stop */

.e-cm-icons {
    font-family: 'ddb-icons' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.e-cut::before {
  content: '\e700';
}

.e-copy::before {
  content: '\e70a';
}

.e-paste::before {
  content: '\e701';
}

.e-link::before {
  content: '\e290';
}

.e-table::before {
  content: '\e705';
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ContextMenuController : Controller
    {
        public IActionResult Table()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Cut",
                iconCss = "e-cm-icons e-cut"
            });
            menuItems.Add(new
            {
                text = "Copy",
                iconCss = "e-icons e-copy"
            });
            menuItems.Add(new
            {
                text = "Paste",
                iconCss = "e-cm-icons e-paste"
            });
            menuItems.Add(new
            {
                separator = true
            });
            menuItems.Add(new
            {
                text = "Link",
                iconCss = "e-icons e-link"
            });
            menuItems.Add(new
            {
                text = "Table",
                items = new List<object>()
                {
                    new { 
                        text = "Insert Table",
                    },
                    new {
                        separator = true
                    },
                    new {
                        text = "Insert"
                    }
                }
            });
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}

UI Components in ContextMenu

UI components can also be placed inside the each li element of ContextMenu.

In the following example, CheckBox component is placed inside each li element and this can be achieved by creating CheckBox component in beforeItemRender event and appending it into the li element.

razor
uicomponents.cs
@section ControlsSection{

    <div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
    @Html.EJS().ContextMenu("contextmenu").Target("#contextmenutarget").Items((IEnumerable<object>)ViewBag.items).BeforeClose("beforeClose").BeforeItemRender("beforeItemRender").Select("select").Render()

}

<script>

    function beforeClose(args) {
        args.cancel = true;
    }

    function select(args) {
        var selectedElem = args.element.parentElement.querySelectorAll('.e-selected');
        for(var i=0; i < selectedElem.length; i++){
           var ele = selectedElem[i];
           ele.classList.remove('e-selected');
        }
        var checkbox = args.element.childNodes[0] as HTMLElement;
        var frame = checkbox.querySelector('.e-frame'));
        if (checkbox && frame.classList.contains('e-check')) {
            frame.classList.remove('e-check');
        } else if (checkbox) {
            frame.classList.add('e-check');
        }
    }

    var i = 1;
    function beforeItemRender(args) {
        var check = @Html.EJS().CheckBox("checkbox" + i).Label(args.element.text).Checked((args.item.text == 'Option 2') ? true : false).Render()
        args.element.innerHTML = '';
        args.element.appendChild(check);
        i++;
    }

</script>

<style>

.list {
  display: none;
}

#contextmenutarget {
    border: 1px dashed;
    height: 250px;
    padding: 10px;
    position: relative;
    text-align: center;
    color: gray;
    line-height: 17;
    font-size: 14px;
}

</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ContextMenuController : Controller
    {
        public IActionResult UIComponents()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Option 1"
            });
            menuItems.Add(new
            {
                text = "Option 2"
            });
            menuItems.Add(new
            {
                text = "Option 3"
            });
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}

Dialog Open On ContextMenu Item Click

This section explains about how to open a dialog on ContextMenu item click. This can be achieved by handling dialog open in select event of the ContextMenu.

In the following sample, Dialog will open while clicking Save As... item:

razor
dialog.cs
@section ControlsSection{

    <div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
    @Html.EJS().ContextMenu("contextmenu").Target("#contextmenutarget").Items((IEnumerable<object>)ViewBag.items).Select("itemSelect").Render()
    @Html.EJS().Dialog("dialog").Content("This file can be saved as PDF").Visible("visible").Buttons(ViewBag.DialogButtons).Target("#contextmenutarget").Width("200px").Height("110px").Position("position").Render()
}

<script>

    var position = {X: 100, Y: 100};

    var visible = false;

    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }

    function itemSelect(args) {
        var dialog = document.getElementById("dialog").ej2_instances[0]
        dialog.show();
    }

</script>

<style>

#contextmenutarget {
    border: 1px dashed;
    height: 250px;
    padding: 10px;
    position: relative;
    text-align: center;
    color: gray;
    line-height: 17;
    font-size: 14px;
}

</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ContextMenuController : Controller
    {
        public IActionResult Dialog()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Back"
            });
            menuItems.Add(new
            {
                text = "Forward"
            });
            menuItems.Add(new
            {
                text = "Reload"
            });
            menuItems.Add(new
            {
                separator: true
            });
            menuItems.Add(new
            {
                text = "Save As..."
            });
            menuItems.Add(new
            {
                text = "Print"
            });
            menuItems.Add(new
            {
                text = "Cast"
            });
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}

Underline a character in the text

To underline a particular character in a text, it can be handled in beforeItemRender event by adding <u> tag in between the text and given as innerHTML in li rendering.

razor
underline.cs
@section ControlsSection{

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

}

<script>

    function beforeItemRender(args) {
        if (args.item.text === "Copy") {
            args.element.innerHTML = '<u>C</u>opy';
       }
    }

</script>

<style>

#contextmenutarget {
    border: 1px dashed;
    height: 250px;
    padding: 10px;
    position: relative;
    text-align: center;
    color: gray;
    line-height: 17;
    font-size: 14px;
}

</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ContextMenuController : Controller
    {
        public IActionResult Underline()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Cut"
            });
            menuItems.Add(new
            {
                text = "Copy"
            });
            menuItems.Add(new
            {
                text = "Paste"
            });
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}

Change animation settings

To change the animation of the ContextMenu, animationSettings property is used. The supported effects for ContextMenu are,

Effect Functionality
None Specifies the sub menu transform with no animation effect.
SlideDown Specifies the sub menu transform with slide down effect.
ZoomIn Specifies the sub menu transform with zoom in effect.
FadeIn Specifies the sub menu transform with fade in effect.

The following sample illustrates how to open ContextMenu with FadeIn effect with the duration of 800ms.

razor
animation.cs
@section ControlsSection{

    <div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
    @Html.EJS().ContextMenu("contextmenu").Target("#contextmenutarget").Items((IEnumerable<object>)ViewBag.items).AnimationSettings("animation").Render()

}

<script>

    var animation = {
        effect: 'FadeIn',
        duration: 800
    };

</script>

<style>

#contextmenutarget {
    border: 1px dashed;
    height: 250px;
    padding: 10px;
    position: relative;
    text-align: center;
    color: gray;
    line-height: 17;
    font-size: 14px;
}

</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ContextMenuController : Controller
    {
        public IActionResult Animation()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Show All Bookmarks"
            });
            menuItems.Add(new
            {
                text = "Bookmarks Toolbar",
                items = new List<object>()
                {
                    new { 
                        text = "Most Visited",
                        items = new List<object>()
                        {
                            new {
                                text = "Google"
                            },
                            new {
                                text = "Gmail"
                            }
                        }
                    },
                    new {
                        text = "Recently Added"
                    }
                }
            });
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}