Using Radzen v7.1 with WebAssembly app migrated from .Net 6 to .Net8

Radzen.Blazor Components
1

Hi. We have a Blazor WebAssembly application that we migrated from .Net 6 to .Net 8. It uses Radzen 4.13.5, and all components including accordion, calendar and others have worked perfectly for us.

On upgrading to Radzen v 7.1.3, the accordion etc. fail to perform properly. According to various posts, it seems we need to enable rendermode = InteractiveWebAssembly. However Microsoft docs state that rendermode does not apply to webassembly apps -- only to the new Blazor Web Apps.

"Blazor WebAssembly apps only render on the client via a client-side WebAssembly-based runtime and have no concept of a render mode."

I have tried many suggestions from this forum and the web in general, and I've been unable to solve this. Can you help clarify what we need to do to get the Radzen components working again?

Thanks much!

2

Not sure what that means. Check our forum FAQ for reference on how to improve your post.

3

Check that you have followed all steps from the getting started instructions for WASM standalone applications.

4

Thanks much for your replies. Sorry for not being more specific about the problems.

In the case of the calendar, it would open when clicked, but would not close. In the case of the accordion, it would not respond to mouse clicks to open or close.

I have reviewed the getting started instructions pointed out by Korchev. The only thing I was missing was this from MainLayout.razor:

    <HeadContent>
        <RadzenTheme Theme="material" />
    </HeadContent>

On adding those lines, the calendar started behaving as expected. Unfortunately, the accordion is still not opening or closing from mouse clicks. Interestingly, the accordion tabs do close when operated on by code.

Any thoughts on what else I am missing?

Thanks again,
Alan

==========================================================
From _Imports.razor

@using Radzen
@using Radzen.Blazor

==========================================================
From MainLayout.razor

<link rel="stylesheet" href="_content/Radzen.Blazor/css/software-base.css">

<RadzenComponents />
<RadzenNotification />
<RadzenDialog />
<RadzenContextMenu />

 <HeadContent>
    <RadzenTheme Theme="material" />
 </HeadContent>

==========================================================
From Index.html

<head>
.
.
.
    <link href="_content/Radzen.Blazor/css/default-base.css" rel="stylesheet" />
    <link href="_content/Radzen.Blazor/css/default.css" rel="stylesheet" />
.
.
</head>

<body>
.
.
.
<script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=7.1.3"></script>

<\body>

=========================================================
From Program.cs

builder.Services.AddRadzenComponents();

5

You have included four different theme CSS files. Delete everything but RadzenTheme. All other CSS files are probably cached by your browser.

6

I see three Radzen CSS files in my code:

Index.html

    <link href="_content/Radzen.Blazor/css/default-base.css" rel="stylesheet" />
    <link href="_content/Radzen.Blazor/css/default.css" rel="stylesheet" />

MainLayout.html

<link rel="stylesheet" href="_content/Radzen.Blazor/css/software-base.css">

Which should I keep please? I saw a post from 2020 in which you said "default-base.css file contains all CSS required to style the Radzen.Blazor components."

However, when I remove the other two files, accordion icons do not render.

7

Everything needed is already mentioned in the getting started instructions. You should follow every single step.

I am also attaching a minimal app that uses .NET 8 and displays a working RadzenPanelMenu. Check the following files:

  1. Program.cs
  2. index.html
  3. MainLayout.razor
  4. Home.razor
    BlazorWasm8.zip (113.5 KB)