Blazor equivalent of WPF ShowDialog()?

[Frangoudes Panikos]

1. Is there a way to call a dialog component e.x.  a confirmation dialog with yes/no options the way the ShowDialog() is used in wpf ?

2 .This means to create a single confirmation dialog component and then call it for code

3. The same, how can we call a component dynamically from another component in code ?

Thank you in advance

Panikos Frangoudes

[Pandiyaraj Muniyandi]

Hi Frangoudes, 

 

Greetings from Syncfusion support. 

 

Query 1: Is there a way to call a dialog component e.x.  a confirmation dialog with yes/no options the way the ShowDialog() is used in wpf ? 

 

Yes, we have public method “show()” method to display a dialog. 

 

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Show_System_Nullable_System_Boolean__ 

 

 

Query 2: This means to create a single confirmation dialog component and then call it for code 

 

You can create a reusable dialog component and change its properties while rendering it in parent component through property binding as follows 

 

ReusableDialog.razor 

 

 

<EjsDialog> 

    <DialogTemplates> 

        <Header> @Header </Header> 

        <Content> @Content </Content> 

    </DialogTemplates> 

</EjsDialog> 

 

@code { 

    [Parameter] 

    public string Header { get; set; } = ""; 

    [Parameter] 

    public string Content { get; set; } = ""; 

} 

  

  

Parent.razor 

  

  

<ReusableDialog Header="@DlgHeader" Content="@DlgContent"></ReusableDialog> 

 

@code { 

    public string DlgHeader { get; set; } = ""; 

    public string DlgContent { get; set; } = ""; 

 

    this.DlgHeader = "Confirm"; 

    this.DlgContent = "Are you want to close this confirm Dialog ?"; 

} 

 

 

 

Query 3: The same, how can we call a component dynamically from another component in code ? 

 

Also, can call ChildComponent show() method from the parent component by taking child reference as follows 

 

ReusableDialog.razor 

 

 

<EjsDialog></EjsDialog> 

 

@code { 

    public void Show() 

    { 

        this.DialogObj.Show(); 

    } 

} 

 

 

 

Parent.razor 

 

 

<ReusableDialog @ref="ConfirmDialog"> </ReusableDialog> 

 

@code { 

    this.ConfirmDialog.Show(); 

} 

 

 

We have prepared sample for your reference with above use cases, get it from below link 

https://www.syncfusion.com/downloads/support/forum/148976/ze/Dialog-285595321 

 

Regards, 

Pandiyaraj