Search results

Render a dialog header dynamically

By default, the dialog is rendered without header. You can update its header dynamically using the Header property.

In the following code, the dialog header is rendered on a button click.

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

<EjsButton @onclick="@OnBtnClick">Open Dialog</EjsButton>
<EjsButton @onclick="@OnBtnClick2">Render Dynamic Header</EjsButton>
<EjsDialog @ref="DialogObj" Header="@Header" Width="250px">
    <DialogTemplates>
        <Content>This is a dialog without header</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton ButtonModel="@OkBtn" OnClick="@OnClick" />
        <DialogButton ButtonModel="@CancelBtn" OnClick="@OnClick" />
    </DialogButtons>
</EjsDialog>

@code {
    EjsDialog DialogObj;

    private string Header { get; set; }

    private void OnClick(Object args)
    {
        this.DialogObj.Hide();
    }
    private void OnBtnClick()
    {
        this.DialogObj.Show();
    }
    private void OnBtnClick2() {
        this.Header = "Dynamic Header";
    }
    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" };
}

The output will be as follows.

dialog