SfDialog not appear

[Peter]

Hi,

Could anyone help me to get SfDialog component working?

I created a .net 9 project with no authentication, global and server settings, then followed instructions in the link below to install and register SyncFusion components.

https://blazor.syncfusion.com/documentation/dialog/getting-started-with-web-app

I choose to install Syncfusion.Blazor instead of Syncfusion.Blazor.Popups. Then added the sample dialog code in the link above to home.razor.

No dialog apprear after running the app. The project is attached for you info.

---------------

EDIT - Just found out that if I replace Syncfusion.Blazor with Syncfusion.Blazor.Popups then the dialog appears and everything works as expected. So my new questions are

-Does Syncfusion.Blazor contains SfDialog control in it?

-My project uses many different SyncFusion controls, do I need to include just one Syncfusion.Blazor, or all other SyncFusion packages (such as Syncfusion.Blazor.Popups, Syncfusion.Blazor.Buttons, Syncfusion.Blazor.Spinner, etc)?

--------------

Thanks.




Attachment: BlazorApp2_5405b419.zip

[Priyanka Karthikeyan]

Hi Peter,

 

Thank you for reaching out to us. It seems there might be some confusion regarding the inclusion of script and style references when using Syncfusion Blazor components. To clarify and ensure proper rendering of the components, here’s a breakdown:

 

1. Common Package (Syncfusion.Blazor):

If you are using the common NuGet package (Syncfusion.Blazor) which includes all Syncfusion Blazor components, you should include the following references in your App.razor:

<!-- Include the stylesheet for the individual package -->
<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<!-- Include the script for the common package -->
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

2. Individual Package (Syncfusion.Blazor.Popups):

If you are using an individual NuGet package like Syncfusion.Blazor.Popups, make sure to include the correct script and style references. The typical references are as follows:

<!-- Include the stylesheet for the individual package -->
<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<!-- Include the script for the individual package -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Important Notes:

• Do not mix individual package references with common package references as it may cause components to not render properly.
• Make sure to follow the exact paths for the scripts and styles to ensure they are correctly linked.

Documentation References:

• Common Package (Syncfusion.Blazor)
• Individual Package (Syncfusion.Blazor.Popups)

Ensure that the correct references are added to your project according to the package you are using. This will help in avoiding rendering issues with Syncfusion Blazor components.

 

Regards,

Priyanka K

[Peter]

Hi Priyanka,

Many thanks for the information. It works.

Regards,

Peter

[Priyanka Karthikeyan]

Hi Peter,

You are welcome. Please feel free to contact us if you have any further questions.

 

Regards,

Priyanka K