Draggable in Predefined Dialogs

3 Nov 20222 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.cshtml

<div style="height:400px;">
    <ejs-button id="alertBtn" content="Alert" cssClass="e-danger"></ejs-button>
</div>

<script>
    document.getElementById('alertBtn').onclick = function () {
        ej.popups.DialogUtility.alert({
            title: "Low battery",
            content: "10% of battery remaining",
            isDraggable: true
        });
    };
</script>

Confirm.cshtml

<div style="height:400px;">
    <ejs-button id="confirmBtn" content="Confirm" cssClass="e-success"></ejs-button>
</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>

Prompt.cshtml

<div style="height:400px;">
    <ejs-button id="promptBtn" content="Prompt" isPrimary="true"></ejs-button>
</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>