RadzenPanelMenu InteractiveServer

Radzen.Blazor Components
1

Hi. I'm new to RadzenBlazor and Blazor in general. How come the RadzenPanelMenu doesn't expand and collapse inside a layout? I'm pretty sure I followed the instructions on the Get Started page.
Here's what my MainLayout.razor looks like:

@inherits LayoutComponentBase
<RadzenComponents @rendermode="InteractiveServer" />
<RadzenLayout>
    <RadzenHeader>
    </RadzenHeader>
    <RadzenSidebar>
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="PanelMenu">
                <RadzenPanelMenuItem Text="PanelMenuItem1" Path="/somepage"> </RadzenPanelMenuItem>
            </RadzenPanelMenuItem>
        </RadzenPanelMenu>
    </RadzenSidebar>
    <RadzenBody>
        @Body
    </RadzenBody>
    <RadzenFooter>
    </RadzenFooter>
</RadzenLayout>
2

Should be set to the entire interactive area otherwise any interactive Blazor component will not work i.e. will not raise any event.

3

What is the "entire interactive area" and how do I set it to "InteractiveServer"? Are you referring to App.razor?.

Home.razor seems to be doing fine with the following line of code:

@page "/"
@rendermode InteractiveServer
<PageTitle>Home</PageTitle>

<h1>Welcome, User</h1>
<RadzenAccordion>
    <Items>
        <RadzenAccordionItem Text="Test Item"> Test Content </RadzenAccordionItem>
    </Items>
</RadzenAccordion>
4

Yes. The entire area you want to have interactive component.

5

I appreciate the responses but where do I insert this?

<RadzenComponents @rendermode="InteractiveServer" />

inside of this?

App.razor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <ImportMap />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
    <RadzenTheme Theme="material-dark" @rendermode="InteractiveServer" />
</head>
<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
</body>
</html>
6

Hi @OffemonBlazor,

The getting started instructions mention where to put RadzenComponents - in MainLayout.razor.

We recommend checking the Microsoft documentation about interactivity and render modes too.

7

Hi Korchev! Yes. That's what I've followed. But even though I followed the Get Started instructions, some components don't seem to work. The get started page said to add <RadzenComponents @rendermode="InteractiveServer" /> in MainLayout.razor so I have this code below:

@inherits LayoutComponentBase
<RadzenComponents @rendermode="InteractiveServer" />
<RadzenLayout>
    <RadzenHeader>
    </RadzenHeader>
    <RadzenSidebar>
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="PanelMenu">
                <RadzenPanelMenuItem Text="PanelMenuItem1" Path="/somepage"> </RadzenPanelMenuItem>
            </RadzenPanelMenuItem>
        </RadzenPanelMenu>
    </RadzenSidebar>
    <RadzenBody>
        @Body
    </RadzenBody>
    <RadzenFooter>
    </RadzenFooter>
</RadzenLayout>

I'm using .Net 9 if that's relevant. I'm pretty sure the Blazor project I created on setup is not Blazor Wasm.

8

I strongly recommend checking the linked article about render modes. Your layout is clearly not interactive and neither is the RadzenPanelMenu. Without interactivity components will not be interactive. It is mentioned at the start of the getting started article.

In general the easiest option is to create your Blazor app with global interactivity enabled if you plan to use interactive blazor components.

9

Well this is embarassing. I just inserted a rendermode in <Routes/> and it now looks like this:
App.razor:

// ... some code
<Routes @rendermode="InteractiveServer"/>
// ... some code

After that, everything seems to work now. Thank you.

10

Yes, this is what is known as "global interactivity". Probably we should mention it in the getting started docs as well as a lot of people struggle with enabling interactivity at the right place (not to mention that interactive components can't have any child content set).

1 Like
11

@korchev So the Sidebar is only supported in "global interactivity", not per page/component?

And yes, putting it in the Getting Started would be a good idea :slight_smile:

12

No. You can put the sidebar in an interactive page just fine.

We decided not do to that as Blazor interactivity is a core feature of the framework and developers should be familiar with it already.