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