How to open dialog on item click in ASP.NET CORE Context Menu

28 Aug 20262 minutes to read

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

In the following sample, a Dialog opens when the user clicks the Save As... item:

CSHTML

<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="@ViewBag.menuItems" select="itemSelect"></ejs-contextmenu>
<ejs-dialog id="dialog" content="This file can be saved as PDF" visible="false" position='@new Syncfusion.EJ2.Popups.DialogPositionData() { X= "100" , Y= "100" }' target="#contextmenutarget" width="200px" height="110px">
    <e-dialog-buttons>
        <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons" click="dlgButtonClick"></e-dialog-dialogbutton>
    </e-dialog-buttons>
</ejs-dialog>

<script>
    function dlgButtonClick() {
        var dialogObj = ej.base.getInstance(document.getElementById('dialog'), ejs.popups.Dialog);
        dialogObj.hide();
    }

    function itemSelect() {
        var dialog = ej.base.getInstance(document.getElementById('dialog'), ejs.popups.Dialog);
        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>

Dialogbutton-core.cs

public ActionResult DialogButton()
{
    ViewBag.DialogButtons = new
            {
                isPrimary = true,
                cssClass = "e-flat",
                content = "Submit",
                click = "dlgButtonClick"
            };
    return View();
}