Search results


The Dialog can be positioned using the DialogPositionData property by providing the X and Y coordinates. It can be positioned inside the target of the container or <body> of the element based on the given X and Y values.

for X is: left, center, right (or) any offset value for Y is: top, center, bottom (or) any offset value

The following code demonstrates the different Dialog positions.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<div id="target">
    <EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
    <EjsDialog @ref="DialogObj" Target="#target" Width="445px" ShowCloseIcon="true">
            <Header> <div>Choose a Dialog Position</div> </Header>
                <table style="width:405px;" id="poschange">
                        <td><EjsRadioButton Label="Left Top" Name="xy" Value="left top" ValueChange="@OnChangeHandler"></EjsRadioButton></td>
                        <td><EjsRadioButton Label="Center Top" Name="xy" Value="center top" ValueChange="@OnChangeHandler"></EjsRadioButton></td>
                        <td><EjsRadioButton Label="Right Top" Name="xy" Value="right top" ValueChange="@OnChangeHandler"></EjsRadioButton></td>
                        <td><EjsRadioButton Label="Left Center" Name="xy" Value="left center" ValueChange="@OnChangeHandler"></EjsRadioButton></td>
                        <td><EjsRadioButton Label="Center Center" Name="xy" Value="center center" ValueChange="@OnChangeHandler" @bind-Checked="@Checked"></EjsRadioButton></td>
                        <td><EjsRadioButton Label="Right Center" Name="xy" Value="right center" ValueChange="@OnChangeHandler"></EjsRadioButton></td>
                        <td><EjsRadioButton Label="Left Bottom" Name="xy" Value="left bottom" ValueChange="@OnChangeHandler"></EjsRadioButton></td>
                        <td><EjsRadioButton Label="Center Bottom" Name="xy" Value="center bottom" ValueChange="@OnChangeHandler"></EjsRadioButton></td>
                        <td><EjsRadioButton Label="Right Bottom" Name="xy" Value="right bottom" ValueChange="@OnChangeHandler"></EjsRadioButton></td>
            <FooterTemplate><span>Position : { X: '@Xvalue', Y: '@Yvalue' }</span></FooterTemplate>
        <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>

    #defaultDialog table,
    #defaultDialog th,
    #defaultDialog td {
        border: 1px solid #D8D8D8;
        border-collapse: collapse;

    #defaultDialog.e-dialog .e-footer-content {
        padding: 0px 10px 10px;
        text-align: center;
    #target {
        min-height: 450px;
        height: 100%;

    .e-dialog .e-dlg-content {
        padding: 10px 16px 10px;
    .e-radio + label .e-label {
        line-height: 18px;
    td {
        padding: 4px;

@code {
    EjsDialog DialogObj;

    public string Xvalue = "center";
    public string Yvalue = "center";
    public bool Checked { get; set; } = true;

    private void OnClicked()

    private void OnChangeHandler(ChangeArgs arg)
        this.Xvalue = arg.Value.ToString().Split(' ')[0];
        this.Yvalue = arg.Value.ToString().Split(' ')[1];

The output will be as follows.