I am attempting to migrate a Blazor WASM PWA from a different UI component pack to Radzen and found an issue.
When attempting to implement RadzenAccordion the accordion is not visible at all. I did a great deal of testing and wasn't able to determine if this was caused by other code in the project or a bug so I created a completely new project.
Set the project up as a .net 8 Blazor WebAssembly Standalone App configured for HTTPS and PWA. I added the Radzen.Blazor nuget package, and placed an accordion with a few accordion items on the home page. They still do not render.
Help would be greatly appreciated.
_imports.razor
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorApp1
@using BlazorApp1.Layout
@using Radzen.Blazor
App.razor:
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
Program.cs:
using BlazorApp1;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
Home.razor:
@page "/"
@using Radzen
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<RadzenAccordion>
<RadzenAccordionItem Text="Accordion Item 1">
<p>Test content for item 1.</p>
</RadzenAccordionItem>
<RadzenAccordionItem Text="Accordion Item 2">
<p>Test content for item 2.</p>
</RadzenAccordionItem>
<RadzenAccordionItem Text="Accordion Item 3">
<p>Test content for item 3.</p>
</RadzenAccordionItem>
</RadzenAccordion>
Mainlayout.razor
@inherits LayoutComponentBase
@Body