Render a Dialog without header

4 Apr 20222 minutes to read

The dialog can be rendered without header by setting the header property value as empty string or null. By default, dialog is rendered without header.

<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>
    <ejs-dialog id="dialog" content="This is a dialog without header." target="#container" width="250px">
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
    </ejs-dialog>
</div>
<script>
    document.getElementById('targetButton').onclick = function () {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.show();
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>
public class HomeController : Controller
{

    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }
        public string cssClass { get; set; }

    }

    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { isPrimary = true, cssClass = "e-flat", content = "OK" };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };
        return View();
    }

}