Telerik Forums
UI for Blazor Forum
0 answers
203 views

02 Feb to 09 Feb 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/top-5-components-building-ai-powered-blazor-applications
Summary: This article shows you how to build AI features in Blazor with Telerik UI by combining five components—AIPrompt and Chat for prompt capture and conversations, plus Editor, Grid, and Charts to edit and present AI output—and connecting them to OpenAI or Azure OpenAI. It covers patterns for calling LLMs from server-side code, streaming responses to the UI, managing token limits, and rendering AI-generated content securely.

---------------------------------------------------------------------------------------------------------------------------------------------------------

29 Jan to 05 Feb 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/blazor-ui/documentation/ai/troubleshooting
Summary: This guide helps you diagnose and fix Telerik UI for Blazor AI integration issues with OpenAI and Azure OpenAI: verify API keys, endpoints/deployments (including api-version), and resolve common 401/403/404/429 errors and model/endpoint mismatches. It also covers Blazor Server vs WebAssembly specifics (don’t expose secrets, proxy to avoid CORS), configuring HttpClient timeouts and streaming, and enabling diagnostics/logging to inspect failing requests and responses.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-combine-filters-checkbox
Summary: Explains how to let users toggle how Telerik UI for Blazor Grid filters are combined (AND vs OR) with a checkbox. The approach updates the Grid state by setting the root CompositeFilterDescriptor.LogicalOperator in an event handler (for example, OnStateChanged or OnRead) when the checkbox changes, then rebinds the Grid so all column filters use the selected logic.

Blog: https://www.telerik.com/blogs/top-5-components-building-ai-powered-blazor-applications
Summary: Learn how to build AI-powered Blazor apps by combining five UI building blocks: a prompt input for structured prompt templates, a chat interface for conversational flows, rich-text editing for AI-assisted content, data-bound views (e.g., grid/list) for presenting results, and status/feedback components to manage long-running LLM calls. You’ll connect these to OpenAI/Azure OpenAI endpoints, handle streaming and errors, and keep the UI responsive while users iterate on prompts and review outputs.

---------------------------------------------------------------------------------------------------------------------------------------------------------

19 Jan to 26 Jan 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/tilelayout-tabindex
Summary: Learn how to control keyboard navigation in the Telerik UI for Blazor TileLayout by setting the tabindex attribute on the component and on elements inside item headers and content. The article shows practical ways to make tiles focusable and define a predictable tab order using AdditionalAttributes and item templates, improving accessibility and focus management.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/popover-onboarding-tour
Summary: Learn how to implement a step-by-step onboarding tour in a Blazor app with the Telerik UI for Blazor Popover. You define a list of steps (target element selector, title/content, placement), bind a single Popover to the current step, and programmatically advance/close it while handling target changes, scrolling/repositioning, and an optional overlay to focus the user’s attention.

Blog: https://www.telerik.com/blogs/getting-started-blazor-skeleton-component
Summary: Learn how to add and use the Telerik UI for Blazor Skeleton component to render loading placeholders that match your UI while data is fetched. You’ll compose skeleton layouts, configure size and structure, and conditionally render the skeleton vs real content during async operations in Razor. It also covers practical usage tips for reducing layout shift, deciding when to use a skeleton versus a spinner, and organizing maintainable loading states.

---------------------------------------------------------------------------------------------------------------------------------------------------------

12 Jan to 19 Jan 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/blazor-ui/documentation/ai/overview
Summary: This article introduces the AI features in Telerik UI for Blazor, focusing on the AIPrompt component and how to connect it to an LLM provider (such as OpenAI or Azure OpenAI) through a server-side service. It shows you how to configure the component, bind request/response models, handle events, customize the UI, and protect API keys in both Blazor Server and WebAssembly apps.

Article: https://www.telerik.com/blazor-ui/documentation/ai/changelog
Summary: Use this AI changelog to track all changes to Telerik UI for Blazor AI components and integration features across releases. It lists version numbers and dates along with new features, API additions and deprecations, behavior changes, bug fixes, and breaking changes, so you can assess impact and plan code updates and migrations.

Article: https://www.telerik.com/blazor-ui/documentation/ai/installation
Summary: Learn how to install and wire up the Telerik AI integration for Telerik UI for Blazor: add the required NuGet packages and register the AI services in dependency injection (Program.cs). You configure a provider (OpenAI, Azure OpenAI, Google Gemini, or Anthropic) by supplying API keys, base URLs, and model IDs via appsettings or user secrets, and you run this setup on the server; for Blazor WebAssembly, place the AI integration in a backend. The article includes working snippets for DI and HttpClient registration, environment-based configuration, and optional proxy/endpoint settings to get you ready to call LLMs from your app.

Blog: https://www.telerik.com/blogs/getting-started-blazor-inline-ai-prompt-component
Summary: This article shows you how to add the Telerik UI for Blazor Inline AI Prompt component to a page, register required services, and handle its Send event to call an LLM endpoint (OpenAI or Azure OpenAI) via HttpClient while streaming tokens back into the UI. It covers configuring suggestions and prompt templates, managing chat history and roles (system/user/assistant), and implementing error handling and cancellation for a robust inline AI chat experience in Blazor.

---------------------------------------------------------------------------------------------------------------------------------------------------------

05 Jan to 12 Jan 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/blazor-basics-should-you-migrate-net-10
Summary: This article helps you decide whether to migrate your Blazor apps to .NET 10 by weighing LTS support, expected Blazor improvements, and the risk/cost of breaking changes and package compatibility. It recommends a pragmatic upgrade path: stabilize on .NET 8/9 first, test .NET 10 via multi-targeting (net10.0) or preview branches, fix analyzer warnings and API changes, verify third-party libraries, and wait for GA before moving production; if you’re on .NET 6/7, migrate to .NET 8 LTS now to simplify a later move to .NET 10.

---------------------------------------------------------------------------------------------------------------------------------------------------------

29 Dec to 05 Jan 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/whats-new-apis-net-10-real-improvements
Summary: This article walks you through 10 practical .NET API improvements you can apply in real projects, spanning the Base Class Library—new collections (FrozenDictionary/FrozenSet), System.Text.Json and UTF-8 updates, time and scheduling primitives (TimeProvider, PeriodicTimer), IO/stream helpers, and async/task/cancellation APIs. For each change, it explains what it is, the performance and correctness benefits, and how to adopt it with concise code examples.

---------------------------------------------------------------------------------------------------------------------------------------------------------

22 Dec to 29 Dec 2025: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/exploring-blazor-chat-component
Summary: This article shows you how to implement a chat interface in Blazor using the TelerikChat component: define authors and message models, bind a messages collection, handle the send event, and customize the UI with message and attachment templates, suggested actions, avatars and timestamps. It also covers connecting the chat to a backend service to send and receive messages and manage conversation state, with notes on theming, localization and accessibility in Telerik UI for Blazor.

---------------------------------------------------------------------------------------------------------------------------------------------------------

15 Dec to 22 Dec 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/editor-mentions
Summary: You’ll implement @-mentions in the Telerik Blazor Editor by detecting the '@' keystroke, tracking the typed query, showing a suggestion list in a Popup, and inserting a non-editable mention element at the caret through the Editor API. The article includes a complete component with an Editor reference, caret/selection and keyboard handling (Enter/Esc/arrows), popup anchoring, and guidance for binding suggestions to your data and persisting/restoring mentions in the Editor HTML.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/datepicker-select-all-content-on-focus
Summary: Learn how to automatically select all text in a Telerik Blazor DatePicker when the input gains focus, so users can immediately overwrite the current value. The article shows how to attach a focus handler to the rendered input and call input.select() via small JavaScript interop (querying the component’s inner input by id/selector) and notes the same pattern applies to the underlying DateInput.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-autoexpand-filter-section-column-menu
Summary: Learn how to auto-expand the Filter section in the Telerik UI for Blazor Grid column menu by customizing the ColumnMenuTemplate. Reorder the built-in menu items and place the ColumnMenuFilter first (before Sort and Columns) so the column menu’s first panel opens by default and the filter UI is expanded when the menu opens.

Blog: https://www.telerik.com/blogs/building-ai-powered-form-assistant-blazor
Summary: Learn how to add a natural-language form assistant to your Blazor app so users can ask for changes and have the assistant read and populate fields safely. The article builds a chat sidebar with Telerik UI for Blazor, wires it to your form model and validation, and uses OpenAI/Azure OpenAI function (tool) calling to expose whitelisted get/set operations; it also covers server-side proxying, field schemas and guardrails so AI updates remain constrained and auditable.

Blog: https://www.telerik.com/blogs/blazor-basics-webassembly-using-local-storage-offline-scenarios
Summary: Learn how to add offline support to Blazor WebAssembly by caching UI state and API data in the browser via localStorage (or sessionStorage). The article walks through using IJSRuntime or Blazored.LocalStorage to register a storage service, serialize models, read/write keys from components, and fall back to cached data when HTTP calls fail, then sync on reconnect. It also highlights practical limits and pitfalls: storage quota, synchronous access, lack of expiration, and avoiding sensitive data.

---------------------------------------------------------------------------------------------------------------------------------------------------------

01 Dec to 08 Dec 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-copy-text-clipboard
Summary: Learn how to let users copy text from the Telerik UI for Blazor Grid. You enable text selection in cells by overriding user-select with CSS, or add a copy action in a column template that calls the browser Clipboard API via Blazor JS interop (with a textarea fallback), including example Razor, CSS, and JavaScript code and notes on avoiding conflicts with Grid selection and resizing.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/lineargauge-align-gauges-with-different-min-max
Summary: Learn how to align multiple Telerik Blazor LinearGauge components that have different min/max ranges so their tracks and pointers line up. You’ll normalize each gauge to a shared scale (e.g., 0–100), map values with (value - itemMin) / (itemMax - itemMin) * sharedRange, and optionally render the original min/max and value via label templates or external markup. The article also covers keeping consistent dimensions and scale/tick settings so the visual elements align across gauges.

---------------------------------------------------------------------------------------------------------------------------------------------------------

24 Nov to 01 Dec 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/popover-refresh-callout-position
Summary: This article shows how to fix a misaligned Telerik UI for Blazor Popover callout by programmatically refreshing its position when the target or popover content changes. You’ll use an @ref to the Popover and call its Refresh method after state updates (for example in OnAfterRenderAsync, on image load, or on layout/resize events) to recalculate alignment. It provides patterns for triggering Refresh in the right event handlers so the callout points to the correct target consistently.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/diagram-change-shape-color-onshapeclick
Summary: This article shows how to change a Telerik Blazor Diagram shape’s color at runtime by handling the Diagram’s OnShapeClick event. You update the bound shape’s DiagramShapeStyle (e.g., Fill/Stroke) using the clicked shape’s ID from the event args and then re-render so the UI reflects the change. Use this approach to toggle or highlight shapes on user interaction without rebuilding the diagram.

Blog: https://www.telerik.com/blogs/adding-intelligence-blazor-apps-using-telerik-smart-components
Summary: This article shows how to add AI features to Blazor apps using Telerik UI for Blazor Smart Components by configuring an LLM provider (OpenAI or Azure OpenAI) and wiring up components like AI Prompt, Grid natural-language filtering, and Editor actions (summarize/rewrite). It walks through the setup and code for service abstractions, dependency injection, and secure server-side calls to integrate these capabilities into existing pages.

---------------------------------------------------------------------------------------------------------------------------------------------------------

17 Nov to 24 Nov 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/blazor-ui/documentation/ai/ai-coding-assistant/overview
Summary: Use the Telerik UI for Blazor AI Coding Assistant to generate and refine Razor and C# code for Telerik components from natural-language prompts. This article shows how to invoke the assistant, the tasks it supports (page scaffolding, data binding, component configuration, troubleshooting), and how to review and safely apply the output. It also outlines limitations of LLM-generated code and data/telemetry considerations.

Article: https://www.telerik.com/blazor-ui/documentation/ai/agentic-ui-generator/overview
Summary: The AI Agentic UI Generator helps you create Blazor pages and configure Telerik UI for Blazor components from a prompt; it plans tasks and scaffolds Razor markup and related code with sensible data binding. The overview explains prerequisites and setup (configuring an LLM provider such as OpenAI or Azure OpenAI), the workflow to run and iterate the generator, and the outputs and limitations you should expect.

Article: https://www.telerik.com/blazor-ui/documentation/ai/ai-coding-assistant/changelog
Summary: This changelog outlines all versioned updates to the Telerik UI for Blazor AI Coding Assistant, including new features, improvements, bug fixes, and noted breaking changes. Use it to track behavior and configuration changes across releases, plan upgrades, and troubleshoot version-specific issues in your Blazor projects.

Article: https://www.telerik.com/blazor-ui/documentation/ai/ai-coding-assistant/mcp-server
Summary: This article shows you how to set up the Telerik UI for Blazor AI Coding Assistant Model Context Protocol (MCP) server and connect it to an MCP‑compatible client (such as Claude Desktop) to ground the assistant in Telerik Blazor documentation and component APIs. It details prerequisites, configuration, and the exposed MCP tools/resources/prompts you can use to search docs and generate Blazor code snippets directly from your client.

Article: https://www.telerik.com/blazor-ui/documentation/ai/ai-coding-assistant/prompt-library
Summary: Use the AI Coding Assistant Prompt Library in Telerik UI for Blazor to browse and run predefined prompts, and to create, edit, and organize your own prompts that generate, refactor, or scaffold Blazor/Telerik component code with your current context (selection, clipboard, files). The article shows you how to search and favorite prompts, define variables/placeholders, and execute them from the Assistant to automate repeatable development tasks.

Article: https://www.telerik.com/blazor-ui/documentation/ai/agentic-ui-generator/prompt-library
Summary: This page documents the Agentic UI Generator Prompt Library for Telerik UI for Blazor—predefined, task-focused prompts you can use to generate components and pages. It explains prompt categories, required inputs and context (models, data binding, CRUD operations, validation, layout), and how to apply and customize the prompts in your Blazor project. Use these prompts to guide an LLM to produce consistent Telerik Blazor component code with the expected output structure.

Article: https://www.telerik.com/blazor-ui/documentation/ai/agentic-ui-generator/getting-started
Summary: This guide shows you how to enable the Agentic UI Generator in Telerik UI for Blazor: install the required NuGet package, configure an LLM provider (OpenAI or Azure OpenAI) and model, and register the services in Program.cs. You then add the Agentic UI Generator to a page, provide data sources and context, and use prompts to generate Blazor UI such as Grid- and Form-based CRUD that you can review and adapt.

Article: https://www.telerik.com/blazor-ui/documentation/ai/ai-coding-assistant/copilot-extension
Summary: This guide explains how to install and enable the Telerik AI Coding Assistant Copilot extension so you can use GitHub Copilot Chat in Visual Studio or VS Code to generate and edit Telerik UI for Blazor component code. It covers prerequisites, setup, and the supported commands and prompts for scaffolding components (e.g., Grid, Chart), configuring properties, binding data, and opening the relevant Telerik documentation.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-autofill-default-value-double-click
Summary: This article shows you how to auto-fill a default value in a Telerik UI for Blazor Grid cell when the user double-clicks it. You capture the double-click (via a cell template or Grid events), set the value on the bound item, and refresh the Grid (RebindAsync or ObservableCollection change) to apply it, with notes for in-cell editing and OnRead data binding.

Blog: https://www.telerik.com/blogs/turn-prompts-pages-telerik-agentic-ui-generator
Summary: This article shows how to use the Telerik Agentic UI Generator to convert natural-language prompts into working UI pages built with Telerik/Kendo UI components, then preview and iterate to fit your requirements. It covers setup, the prompt-to-page workflow, and how to export the generated code to integrate with your application and data.

Blog: https://www.telerik.com/blogs/blazor-basics-building-drag-drop-functionality-blazor-applications
Summary: You’ll implement drag-and-drop in a Blazor application using the HTML5 Drag and Drop API via Blazor event bindings, with optional JavaScript interop for DataTransfer. The article covers wiring draggable elements and drop targets (ondragstart, ondragover, ondrop), managing C# state to reorder or move items, preventing default browser behavior, and considerations for Blazor Server vs. WebAssembly.

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 10 Nov 2025 to 17 Nov 2025:

Article: https://www.telerik.com/blazor-ui/documentation/aicomponents
Summary: This article documents the AI components in Telerik UI for Blazor and shows you how to add the AI Prompt to a page and wire it to a server endpoint that calls an LLM (OpenAI, Azure OpenAI, or a custom HTTP provider). It walks you through configuring prompts and inputs, sending requests from Blazor to your back end, streaming responses to the client, and implementing authentication and error handling.

Article: https://www.telerik.com/blazor-ui/documentation/upgrade/breaking-changes/12-0-0
Summary: This page lists the breaking changes in Telerik UI for Blazor 12.0.0 and what you must adjust when upgrading—prerequisites, package and static asset updates, removed/renamed APIs and parameters, enum/default value changes, CSS/theming/icon updates, and component behavior differences. Use the migration notes and code examples to refactor component usages, fix compile-time errors, adjust styles, and validate UI behavior so your upgrade to Telerik UI for Blazor 12.0.0 completes without regressions.

Article: https://www.telerik.com/blazor-ui/documentation/upgrade/rendering-changes/12-0-0
Summary: This article documents the rendering changes in Telerik UI for Blazor 12.0.0—updates to DOM structure, CSS classes, and attributes across multiple components—which can impact custom CSS, templates, and UI test selectors. Review the per-component notes to update your selectors and overrides and validate any code that depends on the previous markup before upgrading. Use it to assess and migrate any breaking rendering changes when moving to 12.0.0.

Article: https://www.telerik.com/blazor-ui/documentation/components/grid/templates/command-column-header
Summary: Use the Telerik UI for Blazor GridCommandColumn HeaderTemplate to render custom header content for the command column, such as an Add button or an “Actions” label. The article shows how to place a GridCommandButton (e.g., Command="Add") in the header, set the Title for accessibility, and clarifies that row-specific commands don’t have row context in the header.

Article: https://www.telerik.com/blogs/net-10-has-arrived-heres-whats-changed-blazor
Summary: If you’re upgrading to .NET 10, this article outlines the Blazor changes in ASP.NET Core—new features, behavior updates and API adjustments—and what they mean for your code. It flags breaking changes and deprecations and shows what you need to update to migrate existing Blazor Server and WebAssembly apps.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 05 Nov 2025 to 10 Nov 2025:

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/dropzone-display-over-whole-page
Summary: Shows you how to make a full-page DropZone in Telerik UI for Blazor so users can drop files anywhere to trigger the Upload component. You create a fixed, full-viewport overlay and associate it with Upload, then use minimal CSS and document dragenter/dragover/dragleave handlers via JavaScript interop to toggle the overlay during drag, prevent default browser behavior, and set correct z-index/pointer-events.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 29 Oct 2025 to 05 Nov 2025:

Article: https://www.telerik.com/blogs/getting-started-blazor-speechtotextbutton-component
Summary: Learn how to add the Telerik UI for Blazor SpeechToTextButton to your Blazor app to capture speech and insert transcribed text into input components. The article shows how to place and configure the component (target element and recognition language), handle start/result/error events, and account for microphone permissions, HTTPS, and browser support so speech recognition works reliably in production.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 20 Oct 2025 to 27 Oct 2025:

Article: https://www.telerik.com/blazor-ui/documentation/upgrade/rendering-changes/9-0-0
Summary: This article documents the rendering changes in Telerik UI for Blazor 9.0.0, including updates to component DOM structure and CSS class names that can affect styling and selectors. Use it to identify breaking changes, update custom CSS and UI test selectors, and apply the component-specific migration steps after upgrading.

Article: https://www.telerik.com/blogs/blazor-vs-javascript-blazor-right-choice-next-project
Summary: This article compares Blazor vs JavaScript frameworks and gives you practical decision criteria based on team skills, app requirements, performance, hosting, and SEO. It explains Blazor WebAssembly and Blazor Server trade-offs (payload size, startup time, latency, persistent connections, offline support) versus React/Angular/Vue and the broader JavaScript ecosystem, and outlines when to choose Blazor for end-to-end .NET and code sharing versus JavaScript for minimal bundles and access to front-end libraries.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 13 Oct 2025 to 20 Oct 2025:

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-access-gridsearchbox-value
Summary: The article shows how to get the current search text from the Telerik UI for Blazor GridSearchBox so you can use it in custom logic. Capture it by binding GridSearchBox.Value or handling ValueChanged in the Grid toolbar; for OnRead/server binding, extract the quick-search term from GridReadEventArgs.Request.Filters (the OR composite filters produced by the search) or from the grid state via OnStateChanged.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/dockmanager-add-content-pane-footer
Summary: Add a sticky footer to a Telerik UI for Blazor DockManager ContentPane by wrapping the pane content in a full-height container and using CSS (flex column or grid) so the main area scrolls while the footer stays pinned to the bottom across docked, floating, and tabbed states. The article shows the pane content structure and required styles (height: 100%, overflow, borders) to place actions or status info in the footer without affecting the DockManager layout.

Article: https://www.telerik.com/blazor-ui/documentation/knowledge-base/scheduler-add-hyperlinks-in-appointments
Summary: Learn how to add clickable hyperlinks inside Telerik UI for Blazor Scheduler appointments by rendering anchor tags in the appointment template and binding them to a URL field. The article shows how to prevent the Scheduler’s edit/drag behavior from intercepting clicks (e.g., with @onclick:stopPropagation and optionally @onpointerdown:stopPropagation or draggable=false) and how to open links safely in a new tab.

Article: https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.components.schedulerrecurrenceeditmode
Summary: SchedulerRecurrenceEditMode is an enum in Telerik.Blazor.Components that tells the Blazor Scheduler whether an operation targets a single occurrence, the entire series, or the following occurrences of a recurring appointment. Use it in your Scheduler CRUD event handlers and data logic to apply edits and deletes to the correct set of items, including when you replace the built-in recurrence prompt with custom handling.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 06 Oct 2025 to 13 Oct 2025:

Article: https://www.telerik.com/blogs/blazor-basics-using-local-storage-save-restore-form-input
Summary: You will use IJSRuntime to interact with browser localStorage, serialize your form model to JSON, and hook EditContext.OnFieldChanged and OnAfterRenderAsync to save and restore Blazor form input. The article walks through wiring an EditForm to persist changes as users type, repopulate values on first render (including Blazor Server after prerender), and clear storage on submit, with guidance on key management, debouncing, and avoiding sensitive data. Apply this to keep form state across reloads and navigation in Blazor WebAssembly and Server.

Feel free to check them out and share your thoughts!

The Telerik Team

Telerik
Top achievements
Rank 1
Iron
 updated question on 09 Feb 2026
0 answers
9 views
Any ideas on how I can get the Badge to pop beyond the constraints of its host/parent?  Or, can I put the badge to the upper-middle left so it fits better inside the container?




        <TelerikAppBar Class="gsi-background-color">
            <AppBarSection>
                <NavLink href="@ProfileService.HomeUrl" class="gsi-navlink gsi-padding-10 gsi-padding-10-top-bottom">
                    Home
                </NavLink>
            </AppBarSection>

            <AppBarSection>
                <NavLink href="@AboutUrl" class="gsi-navlink gsi-padding-10 gsi-padding-10-top-bottom">
                    About
                </NavLink>
            </AppBarSection>

            <AppBarSpacer />

            <AppBarSection>
                <div class="input-group">

                    @if (ProfileService.IsNotNull())
                    {
                        if (ProfileService.IsInRole(SecurityRoles.Admin, Direction.Up))
                        {
                            <TelerikButton OnClick="OnRouteToNotifications" Class="gsi-button-icon-32">
                                <img src="/images/32/Nofications.white.32x32.png" height="32" width="32" />
                                @if (MessageCount > 0)
                                {
                                    <TelerikBadge VerticalAlign="@BadgeVerticalAlign.Top"
                                                  Class="gsi-background-color-darkgray gsi-color-white">
                                        @MessageCount
                                    </TelerikBadge>
                                }
                            </TelerikButton>

                            <TelerikButton OnClick="@OnRouteToProfile" Class="gsi-button-icon-32">
                                <img src="/images/32/PersonV2.png" height="32" width="32" />
                            </TelerikButton>

                            <NavLink href="@UserDetailsUrl" class="gsi-navlink gsi-padding-10-top-bottom gsi-cursor-pointer">
                                @UserDisplayName
                            </NavLink>

Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
 updated question on 10 Feb 2026
1 answer
7 views

Hello,

Is there a way to show in a Dialog an html formated message ?
I would like to be able to do for instance something like this :

var value = await TelerikDialogs.PromptAsync(
                            new MarkupString($"<p>Please choose :</p><p>1) Value 1</p><p>2)...</p>",
                            "Pick an item",
                            "1"
                        );

And the same shall apply to AlertAsync() and ConfirmAsync() I guess.

Many thanks in advance !

Franck

Dimo
Telerik team
 answered on 10 Feb 2026
1 answer
11 views
I am attempting to utilize the OnChange and OnBlur events to handle when the enter button is pressed on an input (TelerikTextBox). I can get it to work quite easily, however, I do not want the OnBlur functionality at all. The more irritating part is that the OnChange event is fired by both the enter button, and the OnBlur event. Even when I change the OnBlur event to do nothing, the OnChange event still fires when we lose focus on the component. I only want the enter button presses to fire the OnChange event. Am I doing this wrong? Is there another method to this? Here is what I have so far:


                                            <TelerikTextBox Value="@_scanSlotInput"
                                                            OnChange="@SubmitScanSlot"
                                                            OnBlur="@HandleBlur"
                                                            ValueChanged="@((string v) => { _scanSlotInput = (v).ToUpperInvariant(); StateHasChanged(); })"
                                                            Placeholder="Scan or enter Slot QR"
                                                            Enabled="@(!_isSessionEnded)">
                                                <TextBoxPrefixTemplate>
                                                    <TelerikButton OnClick="@StartScanSlotQr" Enabled="@(!_isSessionEnded)" FillMode="@ThemeConstants.Button.FillMode.Clear">
                                                        <span class="fa-duotone fa-solid fa-camera-viewfinder" style="color: var(--kendo-color-primary, #0056b3);"></span>
                                                    </TelerikButton>
                                                </TextBoxPrefixTemplate>
                                                <TextBoxSuffixTemplate>
                                                    <TelerikButton OnClick="@(() => { _ignoreNextChange = false; return SubmitScanSlot(); })" Enabled="@(!_isSessionEnded)" FillMode="@ThemeConstants.Button.FillMode.Clear">
                                                        <span class="fa-duotone fa-solid fa-circle-check" style="color: var(--kendo-color-success, #28a745);"></span>
                                                    </TelerikButton>
                                                </TextBoxSuffixTemplate>
                                            </TelerikTextBox>


    private bool _ignoreNextChange;

    private async Task HandleBlur()
    {
        _ignoreNextChange = true;
        await Task.Delay(300);
        _ignoreNextChange = false;
    }

The @SubmitScanSlot function is excluded because it has "if (_ignoreNextChange) return;" and then goes into the rest of the function and is not relevant to this issue.

I saw the knowledge base article on the OnChange event firing twice and tried utilizing that, but the problem is not validating whether or not the value in the text box has changed, but to ignore the OnBlur completely and only allow the enter key to fire the event.
Dimo
Telerik team
 answered on 10 Feb 2026
1 answer
11 views

I have a simple grid with a list object, where one property is a date and the other a string. The grid is sorted on dates. I want to insert a custom <tr> row before the "normal" row if the month changes, containing a single <td> cell with the year and month.

I've looked at the <RowTemplate> but if I try to insert a <tr> in there, the whole table is broken because the rowtemplate should not (as I understand it) not contain a tr but only td cells.

Anyone?

Dimo
Telerik team
 answered on 09 Feb 2026
2 answers
43 views
Hello

My project has a dependency of version 6.2.0 for Telerik.Ui.for.Blazor and my project wont compile without this specific version

Is there a Telerik location available where I can download 6.2.0 nuget package and the related dependencies.

I have attached a screenshot of the error

Many Thanks in advance

Dimo
Telerik team
 answered on 04 Feb 2026
1 answer
51 views

https://blazorrepl.telerik.com/cKuvmXwu53TrfnCx19

During the initial execution, the code behaves as expected, but after invoking setState, the FloatingTopChanged and FloatingLeftChanged events stop firing. Removing the DockPaneDemo item from localStorage and reloading the page restores the expected event behavior.

sample project attached.

Ivan Danchev
Telerik team
 answered on 03 Feb 2026
1 answer
27 views
Where is the latest Telerik for Blazor Accessibility Conformance Report? The one on this page is over two years old: https://www.telerik.com/blazor-ui/documentation/accessibility/compliance#accessibility-conformance-report

Most organizations follow a 12-month cycle or update their ACR whenever there's a significant product version change, whichever comes first, to remain in good standing.

Please update the latest Telerik for Blazor Accessibility Conformance Report for the current version of Telerik for Blazor. We need these reports for the US States that use our software and Telerik for Blazor. Without current, valid VPATs, we will have to discontinue use of Telerik for Blazor.

DevExpress for Blazor has a current VPAT here for example (latest report Dec, 2025): https://www.devexpress.com/products/net/accessibility/ACR-DevExpress-Blazor-25.2.pdf
Hristian Stefanov
Telerik team
 answered on 03 Feb 2026
1 answer
24 views

I don't really want to sort by row or column title, but actually have the data sorted by the value (the measure). So to click the column header and have all rows in the order of the row values for the selected column. For multiple row dimensions, the sorting would first have to apply to the highest dimension (S, W, W/AT) and than further down the nested dimensions.

A code behind solution would be fine as well.

 

 

 

Dimo
Telerik team
 answered on 03 Feb 2026
1 answer
13 views
Can I place a hyperlink in a Diagram rectangle? The JSON is being pulled from a SQL SERVER DB. I can embed an image and text, but cannot figure out how to make either the image or text a clickable hyperlink
Dimo
Telerik team
 answered on 03 Feb 2026
Narrow your results
Selected tags
Tags
+? more
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Cynthia
Top achievements
Rank 1
Iron
Toby
Top achievements
Rank 3
Iron
Iron
Iron
Danielle
Top achievements
Rank 1
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Iron
yw
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?