Positioning in Predefined Dialogs in Blazor

3 Nov 20224 minutes to read

Customize the dialog position by using the position property. The position can be represented with specific X and Y values.

• The Position.X can be configured with a left, center, right or offset value. By default, the value is set as center.
• The Position.Y can be configured with a top, center, bottom or offset value. By default, the value is set as center.

Use the following code snippet for alert.cshtml, confirm.cshtml and prompt.cshtml to customize the position. Here, customized the dialog position as X= “top” and Y= “center”.

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",
            position: { X: "top", Y: "center" }
        });
    };
</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.alert({
            title: "Delete multiple items",
            content: "Are you sure you want to permanently delete these items?",
            position: { X: "top", Y: "center" }
        });
    };
</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.alert({
            title: "Join chat group",
            content: "<p>Enter your name: </p> <input id=inputEle type=text name=Required class=e-input placeholder=Type here.. />",
            position: { X: "top", Y: "center" }
        });
    };
</script>

Controller.cs

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

Results from the code snippet

Alert

Confirm

Prompt