Cannot get the Radzen Blazor Arc Gauge to work

Radzen.Blazor Components
1

So I have been using Radzen Components for a bit now, but today was the first time in a new .net8 Blazor Server project. Of course I went through the setup (.net8 specific) without any issues, I can now add things like buttons etc without any issues.

However, when I tried to add a Radzen Blazor Arc Gauge into my page it doesn't seem to work. Even when I copy exactly the code as in the documentation https://blazor.radzen.com/arc-gauge, the gauge does not show up, only an empty box. I also cannot interact with the dropdown, slider or checkbox, they just dont respond to any clicks etc. The console does not throw any errors. I also tried the Radzen Blazor Radial Gauge with similar results.

What am I doing wrong?

2

This is a symptom of not enabled Server or WebAssembly render mode (by default is static) - no events will be raised in any Blazor component (not limited to Radzen.Blazor).

3

Oh okay, so i added render mode into my app.razor and into my MainLayout.razor, with the code for these two being:

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="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="Dashboard.Portal.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />

    <RadzenTheme Theme="material" @rendermode="InteractiveServer" />
    <HeadOutlet />
</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>

mainlayout.razor

@inherits LayoutComponentBase

<RadzenComponents @rendermode="InteractiveServer" />

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

I believe those are the two places I should be adding that into, according to the documentation. Am i missing something, or are they in the wrong place?

I also tried with InteractiveWebAssembly or InteractiveAuto but obviously my application just couldnt start up with those two, since my blazor project is server side

4

Interactivity is enabled per .razor file. Every .razor file that needs interactivity needs its own rendermode. Check the getting started instructions and the official documentation.