Telerik Forums
UI for Blazor Forum
1 answer
48 views

We have identified a licensing issue caused by the upgrade to VS2026 18.4.0 and .NET 10.0.200. Our team is actively working to resolve the problem. Any further updates will be shared in this public item to ensure better visibility.

A potential workaround in the meantime is to roll back to VS2026 v18.3.2.

Hristian Stefanov
Telerik team
 answered on 18 Mar 2026
2 answers
97 views

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

Austin
Top achievements
Rank 1
Iron
 answered on 23 Mar 2026
2 answers
23 views
We have a Blazor Server application (.NET 10, Telerik UI for Blazor 13.0) where we use TelerikComboBox with OnRead, Virtual Scrolling, and ValueMapper. The selected value text intermittently fails to display. The ComboBox appears empty even though a value is selected.

The issue is more frequent on staging/production environments (higher SignalR latency), but it also happens on localhost — rarely, and typically on complex pages with heavy rendering (many components, multiple ComboBoxes, grids, etc.).


Component setup (simplified):

<div class="tooltip-target" title="@_selectedDescrizione">
    <TelerikComboBox OnRead="@LoadData"
                     TItem="MyEntity"
                     TValue="Guid?"
                     Value="@Value"
                     ValueChanged="@OnComboValueChanged"
                     ValueExpression="@ValueExpression"
                     TextField="@nameof(MyEntity.Nome)"
                     ValueField="@nameof(MyEntity.Id)"
                     Filterable="true"
                     FilterOperator="@StringFilterOperator.Contains"
                     PageSize="20"
                     ScrollMode="DropDownScrollMode.Virtual"
                     ItemHeight="40"
                     ValueMapper="@GetModelFromValue">
        <ComboBoxSettings>
            <ComboBoxPopupSettings Height="auto" MaxHeight="40vh" />
        </ComboBoxSettings>
        <ItemTemplate>
            @context.Nome
        </ItemTemplate>
    </TelerikComboBox>
</div>


OnRead — lazy loading with server-side filtering:

Standard OnRead handler that queries the database with the user's filter text and returns paginated results via ToDataSourceResultAsync:

private async Task LoadData(ComboBoxReadEventArgs args)
{
    var filterDescriptor = args.Request.Filters?.FirstOrDefault() as FilterDescriptor;
    string searchText = filterDescriptor?.Value?.ToString() ?? string.Empty;

    using var context = await ContextFactory.CreateDbContextAsync();

    IQueryable<MyEntity> query = context.Set<MyEntity>().AsNoTracking();

    if (!string.IsNullOrWhiteSpace(searchText))
    {
        var search = searchText.ToLower();
        query = query.Where(e => e.Nome.ToLower().Contains(search));
    }

    var result = await query
        .OrderBy(e => e.Nome)
        .ToDataSourceResultAsync(args.Request);

    args.Data = result.Data;
    args.Total = result.Total;
}


ValueMapper — resolves the selected value by ID:

Since we use OnRead with Virtual Scrolling, the pre-selected value may not be in the current page of data. The ValueMapper fetches the entity by ID so the ComboBox can display it. We also store the description as a side-effect for the wrapping tooltip:

private async Task<MyEntity> GetModelFromValue(Guid? selectedValue)
{
    if (!selectedValue.HasValue || selectedValue.Value == Guid.Empty)
        return null;

    return await ExecuteWithStateRefresh(async () =>
    {
        using var context = await ContextFactory.CreateDbContextAsync();

        var item = await context.Set<MyEntity>()
            .AsNoTracking()
            .FirstOrDefaultAsync(e => e.Id == selectedValue.Value);

        _selectedDescrizione = item?.Descrizione;

        return item;
    });
}


ExecuteWithStateRefresh — our workaround attempt:

We noticed that after the ValueMapper callback resolves asynchronously (invoked via JS Interop), Telerik does not trigger a re-render on its own. Without intervention, the resolved value frequently doesn't appear. We implemented a two-phase re-render mechanism in our base component class:

private bool _stateRefreshPending;

protected async Task<TResult> ExecuteWithStateRefresh<TResult>(Func<Task<TResult>> func)
{
    var result = await func();
    _stateRefreshPending = true;
    StateHasChanged(); // Batch 1: triggers render + OnAfterRenderAsync
    return result;
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await base.OnAfterRenderAsync(firstRender);
    if (_stateRefreshPending)
    {
        _stateRefreshPending = false;
        StateHasChanged(); // Batch 2: deferred render, after client acknowledged Batch 1
    }
}

The idea is that StateHasChanged() in Batch 1 travels to the client together with Telerik's JS Interop updates. After the client processes and acknowledges Batch 1, OnAfterRenderAsync fires and triggers Batch 2 — which should arrive after Telerik JS has finished updating the ComboBox internally. This improved reliability significantly, but did not fully solve the issue — the display text still occasionally fails to appear, especially on heavy pages or with network latency.


What we observe:
- The ValueMapper callback executes and returns the correct entity — confirmed by the _selectedDescrizione field being populated correctly (the wrapping <div> tooltip shows the correct description).
- Despite this, the ComboBox itself does not render the display text — it appears empty or shows the placeholder.
- Interacting with the ComboBox (e.g., opening the dropdown, clicking elsewhere) sometimes causes the value to suddenly appear.
- More frequent on staging (network latency), but also reproducible on localhost on complex/heavy pages.

Questions:
1. After the ValueMapper callback returns the resolved object, does the ComboBox process it synchronously or asynchronously on the JS side?
2. Is StateHasChanged() the intended mechanism to force the ComboBox to reflect the ValueMapper result, or is there a different recommended approach?

Environment:
- Telerik UI for Blazor 13.0
- .NET 10, Blazor Server
Next
Top achievements
Rank 1
Iron
 answered on 23 Mar 2026
1 answer
11 views

I have a Telerik Blazor chart with time-based data updating in real time. The X-axis labels are not aligned with the major ticks — they are showing between two ticks instead of directly on them.

I am currently using CategoryField for the time values.

How can I make the labels align with the major ticks?

Code Snippet:

<!-- Category Axis -->
<ChartCategoryAxes>
    <ChartCategoryAxis Type="ChartCategoryAxisType.Date"
                       BaseUnit="@GetBaseUnit()"
                       BaseUnitStep="@GetAutoBaseUnitStep()"
                       Min="@VisibleMin"
                       Max="@VisibleMax"
                       AxisCrossingValue="@GetCategoryAxisCrossings()"
                       Visible="@XAxisConfig.Visible"
                       Color="@XAxisConfig.AxisColor">

        <ChartCategoryAxisMajorTicks Visible="@ShowMajorTicks"
                                     Size="@XAxisConfig.MajorTickSize"
                                     Color="@XAxisConfig.MajorTickColor"
                                     Step="@MajorTickStep" />

        <ChartCategoryAxisMinorTicks Visible="@ShowMinorTicks"
                                     Size="@XAxisConfig.MinorTickSize"
                                     Color="@XAxisConfig.MinorTickColor"
                                     Step="@MinorTickStep" />

        <ChartCategoryAxisMajorGridLines Visible="@(ShowMajorTicks && XAxisConfig.ShowMajorGridLines)"
                                         Width="@XAxisConfig.MajorGridWidth"
                                         Step="@MajorTickStep"
                                         Color="@XAxisConfig.MajorGridColor"
                                         DashType="@GetDashType(XAxisConfig.MajorGridDash)" />

        <ChartCategoryAxisMinorGridLines Visible="@(ShowMinorTicks && XAxisConfig.ShowMinorGridLines)"
                                         Width="@XAxisConfig.MinorGridWidth"
                                         Step="@MinorTickStep"
                                         Color="@XAxisConfig.MinorGridColor"
                                         DashType="@GetDashType(XAxisConfig.MinorGridDash)" />

        <ChartCategoryAxisTitle Text="@(string.IsNullOrEmpty(XAxisConfig.Title) ? GetXAxisTitle() : XAxisConfig.Title)" />

        <ChartCategoryAxisLabels Format="@GetAxisLabelFormat()"
                                 Step="@(ShowMajorTicks ? MajorTickStep : 1)">
            <ChartCategoryAxisLabelsRotation Angle="@CategoryLabelRotation"
                                             Align="ChartAxisLabelsRotationAlignment.Center" />
        </ChartCategoryAxisLabels>

    </ChartCategoryAxis>
</ChartCategoryAxes>
Dimo
Telerik team
 answered on 20 Mar 2026
1 answer
15 views
When user clicks on the input field of DatePicker, it either select date, or month, or year, but we want to select whole date input field and start from first input (dd or MM or YYYY) and move to next field.
Dimo
Telerik team
 answered on 19 Mar 2026
1 answer
10 views

I like the Map component and have it working reasonably well with a couple of exceptions:

There is no option to calculate a road route between two points. (not talking lines, but actual road routes like one sees in Google maps)

In addition the Center and Zoom don't automatically get calculated based on the Map Layer data points?

I've manually calculated "Center" ... also calculated the distance between two points (but this is not actual road travel distance) in order to determine a Zoom level (interpolated).  

I've seen this:

https://feedback.telerik.com/blazor/1563350-map-routing

and

https://feedback.telerik.com/blazor/1571399-add-the-ability-to-draw-lines-and-polygons

But it seems these never gain traction.

I realize I can probably go with a Google API KEY but that incurs an expense that could be nothing to very expensive pending usage.  I was hoping Telerik Map component would be my solution, but finding some limitation.

Thoughts?

Dimo
Telerik team
 answered on 19 Mar 2026
1 answer
14 views

It seems changes made to CSS in V13 has triggered a code effort to "correct" as per article here:

https://www.telerik.com/blazor-ui/documentation/upgrade/rendering-changes/13-0-0

Not sure why this was done, but it's left us with dropdownlist and grids and many buttons much larger than before and as such as increased the row heights causing a BIG mess.

I can go thru the Developer mode for Edge and trying to locate all the offending changes, but that's time consuming.  Can I get a more comprehensive list of what exactly was changed and what CSS k classes I'll need to address to get this back to what was working in v12.3?

Rob.

Dimo
Telerik team
 answered on 18 Mar 2026
1 answer
14 views

Hello,

I have a Telerik Grid where each row contains a TelerikFileSelect component. In the OnSelect method how can I determine the row of the component selecting the file.

Thanks,

Dave

Dimo
Telerik team
 answered on 17 Mar 2026
1 answer
16 views

Hi,

Is anyone else seeing the following errors generated whenever a Blazor page is closed

[09:31:28 ERR] Unhandled exception in circuit 'SxXtedGLjUhdy-eMLBc7qIlbtXfClIJFypLcSzO9PZs'.
Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(JSInvocationInfo& invocationInfo)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, JSCallType callType, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, JSCallType callType, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Telerik.Blazor.Components.Common.Loader.ComponentLoaderContainer.DisposeAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass105_0.<<Dispose>g__HandleAsyncExceptions|0>d.MoveNext()

Claude thinks it is because the ComponentLoaderContainer is missing a try/catch expression around the JSInterop DisposeAsync() call?

Thanks,

Charlotte

Dimo
Telerik team
 answered on 17 Mar 2026
1 answer
13 views

When I have a TelerikFilter in a TelerikPopover, removing a group or expression doesn't work. I think the issue is that the filter is not visually updating because when I click the X once nothing happens, but when I click the X again I get the Unhandled Error banner.

I also noticed that if I have another filter using the same variable for Value somewhere else in the DOM (not in a TelerikPopover), then the one in the TelerikPopover works as expected when removing groups and expressions.


<TelerikPopover AnchorSelector="span.filter-popover-target"
                ShowOn="@PopoverShowOn.Click"
                Offset="10" 
                Class="bg-dark-subtle"
                AnimationType="@AnimationType.SlideDown"
                AnimationDuration="500"
                ShowCallout="false"
                Collision="@PopoverCollision.Fit"
                Position="@PopoverPosition.Bottom"
                Width="650px"
                @ref="@FilterPopoverRef">
    <PopoverContent>
        <div p-1>
            <div class="h2">Filter Projects</div>
            <TelerikFilter Value="@ProjectFilter" OnUpdate="@OnFilterUpdate">
                <FilterFields>
                    <FilterField Name="@(nameof(ProjectModel.CustomerContact))"
                                    Type="@(typeof(string))"
                                    Label="Cust Contact"
                                    Operators="@TextFilterOperators" />
                    <FilterField Name="@(nameof(ProjectModel.Description))"
                                    Type="@(typeof(string))"
                                    Label="Description"
                                    Operators="@TextFilterOperators" />
                </FilterFields>
            </TelerikFilter>
        </div>
    </PopoverContent>
</TelerikPopover>

Dimo
Telerik team
 answered on 13 Mar 2026
Narrow your results
Selected tags
Tags
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?