The Map/Route dialog is set with "CloseOnOverlayClick".  As soon as I display the Route Dialog it triggers prior form validation (see the Destination red text behind the Route dialog)?

I've used my Route/Map component on other pages/components and not having this validation trigger issue.  It seems if I go more than 1 level of Dialogs I'll get this issue?

The code that makes the Map/Route dialog visible:

Why is validation being triggered when I make another dialog visible?

 

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

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

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>

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.

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?

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.

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

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

For whatever strange reason it is, my project starts to hit error in string.cs overflow exception after upgrade to 13.0.0.

It is fine when I downgrade it back to 12.3.0.

There are no changes in the code, merely changing the version to 13.0.0 will hit error.

Anybody experiencing this?