(Telerik.UI.for.Blazor v13.1.0)

I was scratching my head over this one for a while. No matter what I tried, even though the data and initial value were valid, the control always initially showed "None" (or just blank, depending on DefaultText). Interestingly, the X close button also was visible, so the control "knew" the value was set.

I tried all kinds of workarounds, delayed rendering, Rebind(), setting the value programmatically, nothing.

I'm sharing the workaround that worked for me, hopefully save some other users some time. Turned out all I needed to do was to add a custom ValueTemplate:

I keep getting these errors after i updated to the latest release for a lot of charting components. This one is with ChartSeriesType.Area. The areas are there but don't have any coloring and are invisible.

 

telerik-blazor.js:1 Error: <path> attribute d: Expected number, "M140.35 13 L NaN 13 NaN 173.2…".
attr @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
trigger @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
trigger @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
trigger @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
trigger @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
_setEnd @ telerik-blazor.js:1
step @ telerik-blazor.js:1
t @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
setTimeout
play @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
_redraw @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
loadFonts @ telerik-blazor.js:1
preloadFonts @ telerik-blazor.js:1
ad @ telerik-blazor.js:1
createChart @ telerik-blazor.js:1
createWidget @ telerik-blazor.js:1
l @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
processJSCall @ blazor.web.js:1
beginInvokeJSFromDotNet @ blazor.web.js:1
Xr @ blazor.web.js:1
(anonymous) @ invoke-js.ts:323
Mc @ invoke-js.ts:82
$func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f797
$func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
$func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
$func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
$func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
$func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
$mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
Ko @ scheduling.ts:53
callUserCallback @ dotnet.native.ykrnppwhq2.js:8
(anonymous) @ dotnet.native.ykrnppwhq2.js:8
setTimeout
safeSetTimeout @ dotnet.native.ykrnppwhq2.js:8
Mc @ scheduling.ts:63
$func793 @ dotnet.native.53ez3dx5uy.wasm:0x48825
$func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f773
$func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
$func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
$func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
$func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
$func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
$mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
Ko @ scheduling.ts:53
callUserCallback @ dotnet.native.ykrnppwhq2.js:8
(anonymous) @ dotnet.native.ykrnppwhq2.js:8
setTimeout
safeSetTimeout @ dotnet.native.ykrnppwhq2.js:8
Mc @ scheduling.ts:63
$func793 @ dotnet.native.53ez3dx5uy.wasm:0x48825
$func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f773
$func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
$func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
$func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
$func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
$func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
$mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
Ko @ scheduling.ts:53
Zo @ scheduling.ts:42
8Error: <g> attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…".
telerik-blazor.js:1 Error: <path> attribute d: Expected number, "M57 40.301 L NaN 40.301 NaN 2…".
attr @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
trigger @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
trigger @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
trigger @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
trigger @ telerik-blazor.js:1
geometryChange @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
_setEnd @ telerik-blazor.js:1
step @ telerik-blazor.js:1
t @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
setTimeout
play @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
traverse @ telerik-blazor.js:1
_redraw @ telerik-blazor.js:1
redraw @ telerik-blazor.js:1
setOptions @ telerik-blazor.js:1
setWidgetOptions @ telerik-blazor.js:1
setOptions @ telerik-blazor.js:1
a @ telerik-blazor.js:1
(anonymous) @ telerik-blazor.js:1
processJSCall @ blazor.web.js:1
beginInvokeJSFromDotNet @ blazor.web.js:1
Xr @ blazor.web.js:1
(anonymous) @ invoke-js.ts:323
Mc @ invoke-js.ts:82
$func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f797
$func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
$func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
$func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
$func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
$func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
$mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
Ko @ scheduling.ts:53
callUserCallback @ dotnet.native.ykrnppwhq2.js:8
(anonymous) @ dotnet.native.ykrnppwhq2.js:8
setTimeout
safeSetTimeout @ dotnet.native.ykrnppwhq2.js:8
Mc @ scheduling.ts:63
$func793 @ dotnet.native.53ez3dx5uy.wasm:0x48825
$func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f773
$func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
$func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
$func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
$func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
$func184 @ dotnet.native.53ez3dx5uy.wasm:0xc3a3
$mono_background_exec @ dotnet.native.53ez3dx5uy.wasm:0x48887
Ko @ scheduling.ts:53
callUserCallback @ dotnet.native.ykrnppwhq2.js:8
(anonymous) @ dotnet.native.ykrnppwhq2.js:8
setTimeout
safeSetTimeout @ dotnet.native.ykrnppwhq2.js:8
Mc @ scheduling.ts:63
$func793 @ dotnet.native.53ez3dx5uy.wasm:0x48825
$func298 @ dotnet.native.53ez3dx5uy.wasm:0x1f773
$func222 @ dotnet.native.53ez3dx5uy.wasm:0x1ca98
$func213 @ dotnet.native.53ez3dx5uy.wasm:0xebe7
$func291 @ dotnet.native.53ez3dx5uy.wasm:0x1f22d
$func327 @ dotnet.native.53ez3dx5uy.wasm:0x203be
$func191 @ dotnet.native.53ez3dx5uy.wasm:0xc747
$mono_wasm_execute_timer @ dotnet.native.53ez3dx5uy.wasm:0x10b011
Zo @ scheduling.ts:38

Hello,

when typing a date quickly via keyboard into a TelerikDatePicker, the component behaves incorrectly in multiple ways:

• Digits appended to the year segment — Instead of replacing the year value, newly typed digits are appended to the existing year (e.g. typing "2026" results in "20262026" or similar).
• Cursor jumps back to the day segment mid-input — While typing the month or year, focus unexpectedly returns to the day segment, causing subsequent keystrokes to overwrite the wrong field.

These issues make it nearly impossible to enter a date by typing it in one fluid motion, which is a common workflow for power users and keyboard-centric data entry.

Steps to reproduce: (also reproducible on the official Telerik demo page).
Click into the DatePicker so the day segment is focused.
Type a full date quickly (e.g. 02022020 for 02.02.2020) without pausing between segments.
Observe that the resulting date is incorrect — digits are misplaced or the cursor jumps unexpectedly.

Best regards

I have a situation where I need the:

but I also need to have an event trigger when the row is updated:

There is no mode that supports both, what are my options?

I need to be able to trigger some action on a Cell by Cell update basis, but also need to trigger a specific action on a Row update.

Thoughts?

Robl

How do I align the left pane to the top instead of it being centered vertically?  The CSS provided by AI does not seem to override it.

 

<TelerikPdfViewer   MinZoom="0.5m" MaxZoom="1.5m" ZoomRate="0.25m" Zoom="0.5m"..
Zoom-DropDown box still present  "200%, 300%, 400%"
My expectation is to limit the dropdown entries to the range given by MinZoom, MaxZoom
Version 13.1.0
 

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>