Template

14 Dec 202415 minutes to read

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.

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

<script>
    function beforeItemRender(args) {
        if (args.item.text === 'Insert') {
            args.element.innerText = '';
            args.element.appendChild(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');
        table.setAttribute("class", "e-popup-table");
        for (var i = 0; i < 5; i++) {
            var row = document.createElement('tr');
            table.appendChild(row);
            for (var j = 0; j < 6; j++) {
                var col = 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';
    }
    .e-popup-table {
        border-collapse: separate;
    }

    .e-row {
        padding-left: 3px;
        padding-right: 3px;
    }

    .e-caption {
        caption-side: top;
        padding: 0 0 0 18px;
    }
    .e-data {
        border: 1px solid grey;
        padding: 8px;
    }
</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 ActionResult 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.

<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuItems" beforeClose="beforeClose" beforeItemRender="beforeItemRender"></ejs-contextmenu>

<script>

    var target = '#contextmenutarget';

    function beforeClose(args) {
        if (args.event.target.closest('.e-menu-item')) {
            args.cancel = true;
            var selectedElem = args.element.querySelectorAll('.e-selected');
            for (var i = 0; i < selectedElem.length; i++) {
                var ele = selectedElem[i];
                ele.classList.remove('e-selected');
            }
            var checkbox = ej.base.closest(args.event.target, '.e-checkbox-wrapper');
            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 = ejs.buttons.createCheckBox(ej.base.createElement, false, {
            label: args.item.text,
            checked: (args.item.text == 'Option 2') ? true : false
        })
        args.element.innerHTML = '';
        args.element.appendChild(check);
        i++;
    }

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