Search results

Show dialog with fullscreen

You can show the dialog in fullscreen by passing true as argument to the dialog Show method. By using Visible property you can prevent the dialog from showing initially.

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

<EjsButton @onclick="@OnBtnClick">Open</EjsButton>
<EjsDialog @ref="DialogObj" Width="250px" ShowCloseIcon="true" @bind-Visible="@Visibility">
    <DialogTemplates>
        <Header> Dialog</Header>
        <Content> This is a Dialog with button and primary button</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton ButtonModel="@OkBtn" OnClick="@OnClick" />
        <DialogButton ButtonModel="@CancelBtn" OnClick="@OnClick" />
    </DialogButtons>
</EjsDialog>

@code {
    EjsDialog DialogObj;

    private bool Visibility { get; set; } = false;
    private void OnClick(Object args)
    {
        this.DialogObj.Hide();
    }

    private void OnBtnClick()
    {
        this.DialogObj.Show(true);
    }

    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel OkBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "OK", IsPrimary = true };
    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel CancelBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "Cancel" };
}