Telerik Forums
UI for Blazor Forum
0 answers
50 views

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

Atanas
Telerik team
 updated question on 05 Nov 2025
0 answers
2 views
I would like to be able to remove the Grand Total column on the right side, but keep the Grand Total row at the bottom. Is there a setting for this? If not, is there a suggested workaround?
Ernie
Top achievements
Rank 1
 asked on 05 Nov 2025
0 answers
3 views

Hi all,

 

I've been observing a strange behavior and cannot seem to find out what causes it. This is primarily to collect some general ideas and learn about principles that I may have missed. I hate to say it but the fact I'm posting it here already suggests that Telerik Blazor UI might be involved, even if it is only by me using it wrong. Before I switched (from Bootstrap UI) to Telerik's Blazor UI, the solution operated more swiftly but was optically inconsistent if not outright ugly. Using Telerik Blazor UI introduced the desired consistency and working with the components is mostly a breeze. I don't regret my choice at all, and will do whatever is needed to keep it part of the solution.

For more context: this is about a multi-layered Blazor app (ASP.NET Core 8) using Telerik's Blazor UI to give users CRUD operations on medical case data. It is supposed to show data from an Oracle relational database with Entity Framework (EF Core 8). It's a data-first approach so I have built entity classes representing each table (about 30 tables in total now) and configured their relations mostly manually. But that's not actually the point. It's just to describe why I can't just paste a small code snippet here. It's a medical application so I'm legally unable to paste code 1:1 from my solution, and it's tons of code by now. Hope the description I'm giving below is enough to put you in the frame.

There are multiple Razor pages and components, some with more and some with less complexity:

  • entry pages where users select a quarter and doctor's office
  • next page reveals the cases that need work
  • selecting a case will go to the editor Blazor page which:
    • shows case basic data such as patient, insurance, summary
    • shows relational positional data in up to four separate grids (Telerik Data Grid) which are encapsulated in Razor components again to keep the main page as slim as possible
    • allows CUD operations and validations on relatonal data
    • uses models to do real-time calculations when users are modifying data
    • uses a persistence layer to collect changes and update storage

The editor page (the heaviest piece of the solution) features:

  • a Telerik menu bar
  • a Telerik breadcrumb bar
  • a Telerik dock manager
  • up to 8 dock panes, half containing Razor components rendering HTML tables, the other half being Telerik data grids
  • some interaction between DockManager and menu bar for menu items to control the visibility and arrangement of panes
  • lots of Telerik(MultiColumn)ComboBox, TelerikTextBox, TelerikDatePicker, TelerikNumericTextBox, TelerikMaskedTextBox etc. inside the panes for data representation and editing

All pages use InteractiveServer render mode as that is what I found works best for me. Until now, the software is only running on my dev machine in Visual Studio 2022, and most of the time in debug mode.

IMPORTANT: Let me emphasize that what I am describing here appears exclusively in debug mode as long as VS2022 is attached, and not when the solution is run by dotnet run. It's a p.i.t.a. though to debug with the handbrake engaged, and I'm not sure if the process does not hide a problem even when it runs without a debugger attached. It's just much faster then but that's not proof that whatever issue it is only affects the debug scenario.

The problems begin when I start navigating between the pages. Sometimes it's really fast, sometimes the same thing takes a lot of time. In my perception it might be related to how quickly I navigate but the actual trigger for the behavior is mostly unclear at this time. Heavier pages cause longer delays (and more exceptions along the way), while being loaded as well as while navigating away from them. But it's not consistent enough to point to an overall page or DOM size-related issue.

What struck me is that the debug console gets flooded with errors like these as delays are happening:

Exception thrown: 'Microsoft.JSInterop.JSDisconnectedException' in Microsoft.JSInterop.dll
Exception thrown: 'Microsoft.JSInterop.JSDisconnectedException' in System.Private.CoreLib.dll
Exception thrown: 'Microsoft.JSInterop.JSDisconnectedException' in System.Private.CoreLib.dll
Exception thrown: 'Microsoft.JSInterop.JSDisconnectedException' in Microsoft.AspNetCore.Components.Server.dll

The one from System.Private.CoreLib.dll appears twice most of the time, sometimes only once. A block like this is shown repeatedly up to 90 times in quick succession, in worse cases, sometimes only ten of these blocks appear in the console. But it's always this combination of the same three DLLs being addressed. When this happens, no other exceptions mix in, it's a constant stream of these three / four exceptions. The application is massively slowed down as this happens. Not as much as showing me a waiting indicator and reconnecting in the page though.

What's also interesting is that the user-end of the solution, besides being very slow at times, behaves fully normally. There are no errors or exceptions apparent to the user. To me this looks like the exceptions are silently consumed somewhere without giving further detail. Each occurrence takes some processing time. I can't say where the exceptions are thrown - probably somewhere deep inside the JS layers - but it's really unsettling and I have some doubts about moving this to production unless this is clarified a bit better.

The Edge browser's developer tools show nothing unusual. The JavaScript console there stays error-free, and running a network recording during a page refresh does show that loading takes very long (about 5 out of 10 seconds are spent with no traffic at all), but all HTTP operations have status 101 (switching protocols) or 200 (success). No error indication at all there.

I beg your pardon for being too unspecific where it may count but this is honestly my first Blazor application at all, and it's a monster of a project right away. I'm overwhelmed by the time pressure already and there's no team mates to help out. Random delays are the last thing I need.

So to wrap this up, what I'm looking for is basically guidance like:

  • is ServerInteractive (and no prerendering) a preferable mode to use globally?
  • do I have to clean up anything? I was hoping the Telerik components would take care of their memory allocations and connections on their own. If that's wrong or not enough, is IDisposable the way to go? What would have to be forcefully disposed?
  • are there any typical no-nos about Blazor apps that I might have missed, such as exceeding a hidden limit regarding the amount of HTML elements in the DOM, or having to keep the number of data grids to a minimum? Could two-way bindings be a root cause? (I'm using them a lot)
  • I'm using async wherever it makes sense, assuming that's the way to go nowadays. Anthing special about Blazor regarding async?
  • sometimes, I need to call StateHasChanged() to ensure the UI is up-to-date. This may indicate I'm missing a cleaner way to achieve the same, however, I couldn't find anything about this yet

Thank you all for reading, and in advance for any clues.

Cheers, have a nice day!

Joe

1 answer
8 views
Can we show actual image as a thumbnail in the content pane of the filemanager ?
I have read the documentation but didn't find any suitable reference. 


this is my code 
i am not using kendo
i am looking for blazor component telerik file manager control 
for reference my current code is below
 <SplitterPane Size="70%" Resizable="false">
     <TelerikFileManager Data="@FileManagerData"
     @bind-Path="@DirectoryPath"
     Height="400px"
     OnCreate="@OnCreateHandler"
     OnUpdate="@OnUpdateHandler"
     @bind-SelectedItems="@SelectedItems"
     OnModelInit="@OnModelInitHandler"
     OnDownload="@OnDownloadHandler"
     OnDelete="@OnDeleteHandler"
     >
         <FileManagerSettings>
             @*  <FileManagerUploadSettings SaveUrl="@GetUploadUrl(randomNumberString,FileTypeId)" OnSuccess="@OnUploadSuccess">
             </FileManagerUploadSettings> *@
         </FileManagerSettings>
         <FileManagerToolBar>
             <FileManagerToolBarNewFolderTool />
             @* @if (SCNameParam == "Land" && GetLevel() == "root-folder-path" && isAdmin == true) *@

             @*  <FileManagerToolBarUploadTool /> *@
             <FileManagerToolBarCustomTool>
                 <TelerikButtonGroup>
                     <ButtonGroupButton OnClick="@OpenUploadPopUp">Upload</ButtonGroupButton>
                 </TelerikButtonGroup>
                 @* <TelerikUpload SaveUrl="@GetUploadUrl(randomNumberString,FileTypeId)"
                                RemoveUrl="api/remove"
                                Multiple="true"
                                AutoUpload="true"
                                OnSuccess="@OnUploadSuccess" /> *@
             </FileManagerToolBarCustomTool>

             <FileManagerToolBarSortTool />
             <FileManagerToolBarSortDirectionTool />
             <FileManagerToolBarSpacer></FileManagerToolBarSpacer>
             @* <FileManagerToolBarViewDetailsTool></FileManagerToolBarViewDetailsTool> *@
             <FileManagerToolBarFileViewTool />
             <FileManagerToolBarCustomTool>
                 <TelerikButtonGroup>
                     <ButtonGroupButton OnClick="@HandleDetails">History</ButtonGroupButton>
                 </TelerikButtonGroup>
             </FileManagerToolBarCustomTool>
             <FileManagerToolBarSearchTool></FileManagerToolBarSearchTool>
         </FileManagerToolBar>
     </TelerikFileManager>
 </SplitterPane>

and thats what i want to achieve 

Hristian Stefanov
Telerik team
 answered on 05 Nov 2025
0 answers
4 views

The documentation at the link below explaining how to prevent the user from having to clear cache when upgrading from one Telerik version to another has an issue with the css priority. My app targets .net 9 but I wasn't able to get the first solution using MapStaticAssets() to work so I implemented the second solution using cache busting. That resolved the caching error but it put the priority of all.css above any css I have in a style element in my component.

In my specific case I have a grid and I want the values in one of the columns to be links but using an anchor element in a grid doesn't underline and turn the content blue so I added css into my style tag in my component:

    .k-grid a {
        color: #0d6efd;
        text-decoration: underline;
    }

That works fine normally, but when I upgraded to the current version of Telerik and had cache issues and followed the cache busting instructions in the link, the content no longer looks like a link. See dev tools screenshots with and without cache busting.

https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-browser-cache-buster

With cache busting it doesn't look like a link because all.css takes priority:

Without cache busting:

Any way to get around this?

Doug
Top achievements
Rank 1
Iron
Iron
Veteran
 asked on 04 Nov 2025
1 answer
9 views
The Dropdownlist has an Open method to open it programatically, the DropdownButton has no such functionality.
Hristian Stefanov
Telerik team
 answered on 30 Oct 2025
1 answer
8 views

Hi there

 

I'm trying to use DropDownlist with the Grouping field and the OnReadEvent, with mode = DropDownScrollMode.Scrollable

The OnRead event provides the grouping field to the request. The request is sent to my (API) server that handles the request, and the result is returned . Then after my OnReadHandler method ands, I get an internal exception: "System.NullReferenceException: 'Object reference not set to an instance of an object.'"

with following stack:

 

 	Telerik.Blazor.dll!Telerik.Blazor.Components.Common.TelerikSelectBase<SNG.LccNion.API.Model.Dto.IDDescriptiveDto, string>.ProcessGroupData(System.Collections.IEnumerable data)	Unknown
 	Telerik.Blazor.dll!Telerik.Blazor.Components.Common.TelerikSelectBase<SNG.LccNion.API.Model.Dto.IDDescriptiveDto, string>.SetProcessedData(System.Collections.IEnumerable data)	Unknown
 	Telerik.Blazor.dll!Telerik.Blazor.Components.TelerikDropDownList<SNG.LccNion.API.Model.Dto.IDDescriptiveDto, string>.SetProcessedData(System.Collections.IEnumerable data)	Unknown
 	Telerik.Blazor.dll!Telerik.Blazor.Components.Common.DataBoundComponent<SNG.LccNion.API.Model.Dto.IDDescriptiveDto>.ProcessOnReadResult(Telerik.Blazor.Components.ReadEventArgs args)	Unknown
 	Telerik.Blazor.dll!Telerik.Blazor.Components.Common.TelerikSelectBase<SNG.LccNion.API.Model.Dto.IDDescriptiveDto, string>.ProcessOnReadResult(Telerik.Blazor.Components.ReadEventArgs args)	Unknown
 	Telerik.Blazor.dll!Telerik.Blazor.Components.Common.DataBoundComponent<SNG.LccNion.API.Model.Dto.IDDescriptiveDto>.ProcessOnReadData()	Unknown
 	[Resuming Async Method]	
>	System.Private.CoreLib.dll!System.Runtime.CompilerServices.AsyncTaskMethodBuilder<System.Threading.Tasks.VoidTaskResult>.AsyncStateMachineBox<Telerik.Blazor.Components.Common.DataBoundComponent<SNG.LccNion.API.Model.Dto.IDDescriptiveDto>.<ProcessOnReadData>d__39>.ExecutionContextCallback(object s) Line 292	C#
 	System.Private.CoreLib.dll!System.Threading.ExecutionContext.RunInternal(System.Threading.ExecutionContext executionContext, System.Threading.ContextCallback callback, object state) Line 179	C#
 	System.Private.CoreLib.dll!System.Runtime.CompilerServices.AsyncTaskMethodBuilder<System.Threading.Tasks.VoidTaskResult>.AsyncStateMachineBox<Telerik.Blazor.Components.Common.DataBoundComponent<SNG.LccNion.API.Model.Dto.IDDescriptiveDto>.<ProcessOnReadData>d__39>.MoveNext(System.Threading.Thread threadPoolThread) Line 372	C#
 	System.Private.CoreLib.dll!System.Runtime.CompilerServices.AsyncTaskMethodBuilder<System.Threading.Tasks.VoidTaskResult>.AsyncStateMachineBox<Telerik.Blazor.Components.Common.DataBoundComponent<System.__Canon>.<ProcessOnReadData>d__39>.MoveNext() Line 350	C#
 	System.Private.CoreLib.dll!System.Runtime.CompilerServices.TaskAwaiter.OutputWaitEtwEvents.AnonymousMethod__12_0(System.Action innerContinuation, System.Threading.Tasks.Task innerTask) Line 281	C#
 	System.Private.CoreLib.dll!System.Threading.Tasks.AwaitTaskContinuation.RunCallback(System.Threading.ContextCallback callback, object state, ref System.Threading.Tasks.Task currentTask) Line 697	C#
 	System.Private.CoreLib.dll!System.Threading.Tasks.Task.RunContinuations(object continuationObject) Line 3486	C#
 	System.Private.CoreLib.dll!System.Runtime.CompilerServices.AsyncTaskMethodBuilder<Telerik.Blazor.Components.ReadEventArgs>.SetResult(Telerik.Blazor.Components.ReadEventArgs result) Line 478	C#
 	[Completed] Telerik.Blazor.dll!Telerik.Blazor.Components.TelerikDropDownList<SNG.LccNion.API.Model.Dto.IDDescriptiveDto, string>.TriggerReadAsync(Telerik.DataSource.DataSourceRequest request)	Unknown

I am struggling to handle the request correctly and provide an answer back to the list that it can handle properly.

Nevertheless I get errors. Is there a working example of using the OnRead event with the GroupField property set to a property of the TItem? Or is this combination impossible inspite of DropDownScrollMode.Scrollable mode?

BTW - In case of large dropdownlist result set I want to fall back to virtual mode, and drop the grouping option, as it is documented that these are not compatible. (This is handled blazor side by checking the dataset count before the first OnRead call)

Ivan Danchev
Telerik team
 answered on 30 Oct 2025
0 answers
8 views
Currently it displays a long datetime string (day name, day of month number, month number, year), which is not user friendly for the intended users of my application. Is it posible to change this to another format, such as (day of month number, month number, year)?
Nathan
Top achievements
Rank 1
 asked on 27 Oct 2025
1 answer
19 views

I've tried to find documentation on how to modify the CSS for the dropdownlist and it's popup but can't seem to figure out how to change the "Search" area size, nor the "Select Type" (they are too large).

I was able to figure out how to adjust the actual items:

.custom-compact-dropdownlist-popup .k-list-item {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.90em;
}

and reference:

<DropDownListSettings>
    <DropDownListPopupSettings Class="custom-compact-dropdownlist-popup" />

but I don't know what to use in CSS ... is there a list somewhere of the ".k" class selectors?

Rob.

Dimo
Telerik team
 answered on 27 Oct 2025
1 answer
13 views

Is it possible to change the headings in the column chooser menu?

This is supported in other Telerik products by using the Messages property which is absent in Blazor

Dimo
Telerik team
 answered on 23 Oct 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?