Basic Telerik components not responsive

I created a Blazor Web App and chose option WebAssembly with .NET 8.0 (Long Term Support). Got 2 projects, Project.Client and Project which I renamed to Project.Server.

Then I moved all the razor files in the Project.Server to the Project.Client and installed Telerik.

@page "/"
@using Project.Shared.Models
@using System.Text.Json
@using Telerik.Blazor.Components.Common
@inject HttpClient Http
@inherits BaseComponent

<div>

    <TelerikDropDownList Data="@models"
                         TextField="Id"
                         ValueField="Id"
                         @bind-Value="@_selectedModelId"
                         Width="250px" />
    @* OnChange="@OnModelChange" *@

</div>

with code:

        private List<ModelDto> models = new List<ModelDto>()
        {
            new ModelDto { Id = "model1", Description = "Invoice Model" },
            new ModelDto { Id = "model2", Description = "Receipt Model" },
            new ModelDto { Id = "model3", Description = "Contract Model" }
        };

        protected override async Task OnInitializedAsync()
        {
            _selectedModelId = models[0].Id;
        }

        private async Task OnModelChange(string selectedModelId)
        {
            _selectedModelId = selectedModelId ?? "";

            if (string.IsNullOrWhiteSpace(_selectedModelId)) return;

            var response = await Http.GetAsync($"{_diUrl}/document-types/{_selectedModelId}");
            if (response.IsSuccessStatusCode)
            {
                var json = await response.Content.ReadAsStringAsync();
                documentTypes = JsonSerializer.Deserialize<List<DocumentTypeDto>>(json, new JsonSerializerOptions { PropertyNameCaseInsensitive = true }) ?? new();
                // selectedDocumentType = documentTypes[0];
            }
        }

My basically default 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="Project.Client.styles.css" />
    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
    <HeadOutlet />
</head>

 <body>
    <Routes />
 </body>
</html>

The client Program.cs is default and the server Program.cs looks like this now:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents();
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents(); // Tried adding this, did nothing

builder.Services.AddHttpClient("Project.Server", client => { client.BaseAddress = new Uri(builder.Configuration["ApiUrl"]); });
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("Project.Server"));
builder.Services.AddScoped<IDocumentIntelligenceService, DocumentIntelligenceService>();
builder.Services.AddControllers();
builder.Services.AddTelerikBlazor();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>().AddInteractiveWebAssemblyRenderMode();
app.MapRazorComponents<App>().AddInteractiveServerRenderMode(); // Tried adding this, did nothing

app.MapControllers();

app.Run();

What I get now is a Telerik DropDownList that has proper css but I can't click it open. Same goes with other components I've tried like the Telerik ColorPicker. Anybody got a clue what might be the issue?

Answer

You selected the "Per Page/Component" option, the Counter page is probably the only one that works now.

To fix it for all pages, in App.razor replace

<Routes />

with

<Routes @rendermode="InteractiveWebAssembly" />

Answer

Enjoyed this question?