Basic Telerik components not responsive

Basic Telerik components not responsive
typescript
Ethan Jackson

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" />

Related Articles