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

Hi all,

When TelerikTreeView is used within TelerikWindow's WindowContent, mouse hover events trigger continuous re-rendering of the entire window content, resulting in significant performance degradation. However, using TelerikTreeView directly on a page outside the window doesn't cause these re-rendering issues.

<TelerikWindow Visible=true>
    <WindowContent>
            <TelerikTreeView Data="@TreeData">
                <TreeViewBindings>
                    <TreeViewBinding>
                        <ItemTemplate>
                            @{
                                TreeItem itm = context as TreeItem;
                                <span @onclick="@( _ => NodeClick(itm) )">
                                    Node:
                                    <strong>@itm.Text</strong>
                                </span>
                            }
                        </ItemTemplate>
                    </TreeViewBinding>
                </TreeViewBindings>
            </TelerikTreeView>
    </WindowContent>
</TelerikWindow>

@code {
    string result { get; set; }
    async Task NodeClick(TreeItem clickeNode)
    {
        result = $"Last clicked node Id: {clickeNode.Id}";
    }

    // sample data

    public IEnumerable<TreeItem> TreeData { get; set; }

    public class TreeItem
    {
        public string Text { get; set; }
        public int Id { get; set; }
        public List<TreeItem> Items { get; set; } = new List<TreeItem>();
        public bool HasChildren { get; set; }
    }

    protected override void OnInitialized()
    {
        LoadHierarchical();
    }

    private void LoadHierarchical()
    {
        List<TreeItem> roots = new List<TreeItem>() {
            new TreeItem { Text = "Item 1", Id = 1, HasChildren = true },
            new TreeItem { Text = "Item 2", Id = 2, HasChildren = true }
        };

        roots[0].Items.Add(new TreeItem
        {
            Text = "Item 1 first child",
            Id = 3

        });

        roots[0].Items.Add(new TreeItem
        {
            Text = "Item 1 second child",
            Id = 4

        });

        roots[1].Items.Add(new TreeItem
        {
            Text = "Item 2 first child",
            Id = 5

        });

        roots[1].Items.Add(new TreeItem
        {
            Text = "Item 2 second child",
            Id = 6

        });

        TreeData = roots;
    }
}

We're starting a new internal project using Blazor (.NET 8/10) to build an in-house booking application.

Our UI/UX designs are already prepared in Figma, and we're now evaluating which Blazor component library would best support our implementation.

We are exploring component library which can easily be integrated with Figma design, save us re writing a component and reduce the development time.

• What was your experience like?

• How well did the components align with your design system (especially if using Figma)?

• Any performance, customization, or support issues?

• Would you recommend it for a booking-style application?

• Are free source component libraries better than enterprise paid libraries?

Thanks in advance for sharing your insights!

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?

I am working with two Telerik Dialogs in a Blazor page.
One dialog is shown when an AP Strategy validation is required, and the other dialog is a confirmation popup.

Here is the markup:

<TelerikDialog Class="manual-adjustment_dialogBox"
               @bind-Visible="@IsDialogBoxVisible"
               Width="600px"
               Title="Message from webpage"
               ShowCloseButton="false">
    <DialogContent>
        <p style="text-align: center;">@ConfirmMessage</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton Id="yes-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => OnConfirmClick()">Yes</TelerikButton>
        <TelerikButton Id="no-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => GoBackToPopUp()">No</TelerikButton>
    </DialogButtons>
</TelerikDialog>

<TelerikDialog Class="manual-adjustment_apStrategyDialogBox"
               @bind-Visible="@IsApStrategyValidationVisible"
               Width="600px"
               Title="Message from webpage"
               ShowCloseButton="true">
    <DialogContent>
        <p style="text-align: center;">@ConfirmMessage</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton Id="confirm-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => FixApStrategyAndGoBackToPopUp()">OK</TelerikButton>
        <TelerikButton Id="cancel-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => GoBackToPopUp()">Cancel</TelerikButton>
    </DialogButtons>
</TelerikDialog>

When the AP Strategy dialog is visible (IsApStrategyValidationVisible = true), the user clicks OK, which calls this method:

public void FixApStrategyAndGoBackToPopUp()
{
    IsApStrategyValidationVisible = false;

    if (ManualAdjustmentArDTO.Amount == BundleUIResults.Bundle.Amount &&
        (ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.ProRata ||
         ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.AR) &&
        ManualAdjustmentArDTO.APStrategyType == APStrategyType.AllCharges)
    {
        ManualAdjustmentArDTO.APStrategyAdjustment = BundleManager.Schemas.Core.Content.APStrategy.AP;
        ConfirmMessage = $"Adjustment ... Are you sure you want to proceed?";
    }
    else if (ManualAdjustmentArDTO.Amount != BundleUIResults.Bundle.Amount &&
             ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.AP &&
             ManualAdjustmentArDTO.APStrategyType == APStrategyType.AllCharges)
    {
        ManualAdjustmentArDTO.APStrategyAdjustment = BundleManager.Schemas.Core.Content.APStrategy.ProRata;
        ConfirmMessage = $"Adjustment ... Are you sure you want to proceed?";
    }

    IsDialogBoxVisible = true;
}

Problem

• When debugging step by step, it works fine: the AP Strategy dialog closes, and then the confirmation dialog opens.

• But when running normally (without debugger), both IsApStrategyValidationVisible is false and IsDialogBoxVisible is true at the same time. This causes the confirmation dialog not to show properly.

It looks like Blazor/Telerik is not processing the closing of the first dialog before the second is opened.

Question

How can I reliably close one TelerikDialog and then open another in Blazor, without them conflicting?
Is there a recommended pattern (maybe using a single state/enum) for handling multiple dialogs?

Hello,

I have integrated a TelerikDialog onto custom component, unfortulatla it seems to be not working despite it has been correcty initilialized.

Is there a way to working like that ?

Thks,

so issue was when i uploading file that still in upload phase if i click the cancel button next upload progress bar the file is removes from ui but somewhere is still present 

so i have used OnSelectHandler event to handle to duplicate uploading and some extra validation added in OnSelectHandler event but my issue is

when i am uploading file and immediately click [ Before upload process is done ] cancel then it remove from ui but somewhere is present after that remove click again try to add show my validation error that is duplicate message 

Clicking Cancel should stop the upload process entirely, and no file should be uploaded or stored.

Please Refer Below Attachment 

Step 1 => Select file eg. dummy.pdf and select Note : AutoUpload is true and check below screenshot and i click cancel button 

Step 2 => The file removed from UI see below screenshot

Step 3 => If i try to add again same file i.e dummy.pdf the my custom validation msg show that is file is already present see below screenshot





Below is My Code :

Hello,

I'm having a problem refreshing a Scheduler component.

I've set up a page where a drop-down list allows you to select a schedule.

Once the schedule is selected, the appointments are loaded and the component is updated.

However, I notice that the appointments are not refreshed and that I need to set the focus on the component.

I've tried several solutions with Rebind and/or Refresh without success.

Does anyone have a template that works?

Thks,