Having an issue with Accordion control

Radzen.Blazor Components
1

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
2

Can you post what is rendered as HTML?

3

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

4

I figured it out. I did not have an Items tag wrapping the RadzenAccordionItems.

<RadzenAccordion>
    <Items>   <---- This was missing
        <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>
    </Items>
</RadzenAccordion>