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

My pipeline is currently stuck due to this, I have a simple "dotnet install" in my pipeline that used to work and since the latest .NET SDK release (SDK 9.0.307) it started to fail with the following message:

• C:\Users\?????\.nuget\packages\telerik.licensing\1.4.10\build\Telerik.Licensing.targets(8,3): error MSB4216: Could not run the "ResolveTelerikProducts" task because MSBuild could not create or connect to a task host with runtime "NET" and architecture "x64". Please ensure that (1) the requested runtime and/or architecture are available on the machine, and (2) that the required executable "C:\Program Files\dotnet\sdk\9.0.307\MSBuild.dll" exists and can be run.

I attempted to upgrade the Telerik.Licensing package manually to latest version but it didn't fix the issue.

Hi

I want to add a textbox in the  GridToolBarTemplate. Because of the built-in arrow navigation it is not possible to move the cursor inside the textbox. Is it possible to disable the default arrow navigation in the GridToolBar?

Example in this simple REPL

Enter any text in the Textbox, hit the left arrow keyboard button and notice the cursor stays at the end of the text.

Best regards

Bram

Version 12.0.0 removed the .k-item class from rendering on a tab strip's tab but that now means that the active tab looks identical to all other tabs. Is there a workaround or some way to get that back without manually recreating the CSS myself? 

The screenshot is from the docs to show it's not just my project or any custom config on my end:

https://www.telerik.com/blazor-ui/documentation/components/tabstrip/overview

• Create a ListView
• Create a TimePicker within the ListView
• Set the Adaptive Mode on the TimePicker to Auto (This is key, if this property is removed it works)
• Run the page and switch to a mobile view format within the browse

@page "/test-timepicker-listview"

<h3>TimePicker in ListView Test</h3>

<TelerikListView Data="@TestItems" Width="100%">
    <HeaderTemplate>
        <div style="padding: 10px; background-color: #f0f0f0; font-weight: bold;">
            Time Entry Items
        </div>
    </HeaderTemplate>
    <Template>
        <div style="padding: 15px; border-bottom: 1px solid #ddd;">
            <div style="margin-bottom: 10px;">
                <strong>Item:</strong> @context.Name
            </div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <label>Start Time:</label>
                <TelerikTimePicker @bind-Value="@context.StartTime" Format="hh:mm tt" Width="150px"
                    AdaptiveMode="AdaptiveMode.Auto" />
            </div>
            <div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
                <label>End Time:</label>
                <TelerikTimePicker @bind-Value="@context.EndTime" Format="hh:mm tt" Width="150px"
                    AdaptiveMode="AdaptiveMode.Auto" />
            </div>
        </div>
    </Template>
</TelerikListView>

@code {
    private List<TimeEntryItem> TestItems { get; set; } = new();

    protected override void OnInitialized()
    {
        // Initialize with some test data
        TestItems = new List<TimeEntryItem>
{
new TimeEntryItem { Id = 1, Name = "Morning Shift", StartTime = new DateTime(2025, 11, 18, 8, 0, 0), EndTime = new
DateTime(2025, 11, 18, 12, 0, 0) },
};
    }

    public class TimeEntryItem
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

I'm writing an OnShapeClick method that (among other things) should change the Color of the selected shape. I am defining shapes as such: 

<DiagramShapes>
    @foreach (Node node in Nodes)
    {
        <DiagramShape Id="@node.LinkID" >
            <DiagramShapeContent Text="@node.GetDisplayName()" />
            <DiagramShapeFill Color="@node.GetColor()"/>
        </DiagramShape>
    }
</DiagramShapes>

In OnShapeClick, I am updating the Color by changing a field for the specified node that results in node.GetColor() returning a new Value, and this works. 

async Task OnPersonClick(DiagramShapeClickEventArgs Args)
{
    foreach (Node node in Nodes)
    {
        if (node.LinkID.Equals(Args.Id))
            node.State = SelectedState.True;
        else
            node.State = SelectedState.False;
    }
}

The issue is that when the Diagram is re-rendered, the positions of all the shapes are recalculated. resulting in any Shapes that the user has dragged out of position to revert to their original position, or in the case of the Force Diagram, a complete reshuffle of the Shapes in the Diagram. This is undesired behavior. 

In short, how do I update the Color (or any property) of a Diagram Shape while maintaining the current positions of all shapes within the Diagram?

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!

I've followed everything i can find about enforcing UTF-8 encoding, but this is still happening. It only happens in the drop down options of the aforementioned components, not after they are selected and not in the ASP.NET core <InputSelect> component.

I have no idea when this started but I suspect when we upgraded to 11.x control suite.

<GridColumn Field=@nameof(BookingEquipmentCommodityModel.ItemCount) Title="Count" Width="1.5rem" />

As you can see, there is no numeric template and this is a simple GridColumn, but I'm getting increment arrows on any column that is numeric (Int, Decimale, Double, etc.)?

I don't want them and have no idea why I'm getting them since I don't define the column with a template for TelerikNumericTextBox??

In my attempt (which failed) to work-around this issue, I setup a template for the column using TelerikNumericaTextBox to see I could disable the arrows ... and that didn't work either?

                                <GridColumn Field=@nameof(BookingEquipmentCommodityModel.CommodityWeight) Editable="true" Title="Weight" Width="3rem">
                                    <Template Context="cwContext">
                                        @{
                                            var cw = (BookingEquipmentCommodityModel)cwContext;
                                        }
                                        <TelerikNumericTextBox @bind-Value="@cw.CommodityWeight" Arrows="false"></TelerikNumericTextBox>
                                    </Template>
                                </GridColumn>

still get the arrows?

Help?