Draggable in Predefined Dialogs

3 Nov 20223 minutes to read

The predefined dialogs supports dragging within its target container by grabbing the dialog header, which allows the user to reposition the dialog dynamically by using the isDraggable property.

Alert

Alert.cshtml

<div style="height:400px;">
    @Html.EJS().Button("alertBtn").Content("Alert").CssClass("e-danger").Render()
</div>
<script>
    document.getElementById('alertBtn').onclick = function () {
        ej.popups.DialogUtility.alert({
            title: "Low battery",
            content: "10% of battery remaining",
            isDraggable: true
        });
    };
</script>

Controller.cs

public class HomeController : Controller
    {
        public ActionResult Alert()
        {
            return View();
        }
    }

**Confirm** Confirm.cshtml

<div style="height:400px;">
    @Html.EJS().Button("confirmBtn").Content("Confirm").CssClass("e-success").Render()
</div>
<script>
    document.getElementById('confirmBtn').onclick = function () {
        ej.popups.DialogUtility.confirm({
            title: "Delete multiple items",
            content: "Are you sure you want to permanently delete these items?",
            isDraggable: true
        });
    };
</script>

Controller.cs

public class HomeController : Controller
    {
        public ActionResult Confirm()
        {
            return View();
        }
    }

**Prompt** Prompt.cshtml

<div style="height:400px;">
    @Html.EJS().Button("promptBtn").Content("Prompt").IsPrimary(true).Render()
</div>
<script>
    document.getElementById('promptBtn').onclick = function () {
        ej.popups.DialogUtility.confirm({
            title: "Join chat group",
            content: "<p>Enter your name: </p> <input id= inputEle type=text name=Required class=e-input placeholder=Type here.. />",
            isDraggable: true
        });
    };
</script>

Controller.cs

public class HomeController : Controller
    {
        public ActionResult Prompt()
        {
            return View();
        }
    }