Search results

Positioning

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">
        <DialogTemplates>
            <Header> <div>Choose a Dialog Position</div> </Header>
            <Content>
                <table style="width:405px;" id="poschange">
                    <tr>
                        <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>
                    </tr>
                    <tr>
                        <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>
                    </tr>
                    <tr>
                        <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>
                    </tr>
                </table>
            </Content>
            <FooterTemplate><span>Position : { X: '@Xvalue', Y: '@Yvalue' }</span></FooterTemplate>
        </DialogTemplates>
        <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>
    </EjsDialog>
</div>

<style>
    #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;
    }
</style>

@code {
    EjsDialog DialogObj;

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

    private void OnClicked()
    {
        this.DialogObj.Show();
    }

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

The output will be as follows.

dialog