Questions on UI for Blazor Forum

4 answers

180 views

Adding OnZoom event for TelerikChart Zooming

Hey,

I am working on a Telerik for Blazor UI project and I'm really liking alll the Telerik features so far. However, when there are too many data points on my graph, the x axis becomes really hard to read, so I added a feature to scale the number of visible x-axis categories based on the number of intervals.

For this purpose, I was hoping to add a feature so that when one zooms into the graph, more of the x-axis intervals become visible based on how many can comfortably fit on screen. To this end, I need to know how much a user has zoomed in so that I can scale things accordingly. However, from all I can find online, there is no way to query a TelerikChart for how zoomed in you are. I might be missing something, but in case I am not, I think this feature could be very helpful so that one can add events based on the zoom in and have things change accordingly.

Thanks

Charts

updated answer on 18 Feb 2026

1 answer

30 views

[Solved] How to change the color of a cell that has been updated by a user during InCell mode?

Objective: show different color (say Green Text) for any grid cell the user has modified in "real-time" (as the user navigates cell to cell in the grid).

I can get the field name from the OnUpdate event:

var nameOfField = args.Field;

But this isn't of much use in that event handler. I set the model property "WasEdited" to true:

item.WasEdited = true;

The OnCellRender fires but for every column that is editable ... so rather than having a single cell's text color change ALL cells set as Editable will have their color changed. So I created a unique OnCellRender handler for each column/field/cell that can be edited (Editable=true):

    void OnFirstIncrementDaysNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
            item.WasEdited = false;
        }

    }

    void OnFirstIncrementRateNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
            item.WasEdited = false;
        }

    }

    void OnSecondIncrementRateNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
            item.WasEdited = false;
        }

    }

However, this doesn't work? I trace thru the code and single per field/colum onCellRender is fired once (an only once) as expected for the appropriate event. However, the cell text color doesn't change? If I remove item.WasEdited = false (basically don't reset model was edited state).

    void OnFirstIncrementDaysNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
        }

    }

    void OnFirstIncrementRateNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
        }

    }

    void OnSecondIncrementRateNextCellRender(GridCellRenderEventArgs args)
    {
        RateCyItem item = (RateCyItem)args.Item;
        if (item.HasFutureRate)
        {
            args.Class = "futureRate";
        }

        if (item.WasEdited)
        {
            args.Class = "editedCell";
        }

    }

Then ALL 3 cells render green text, rather than just the one cell ... this is not what I want. I don't understand why this is happening since the other OnCellRender events are NOT being called (verified with breakpoint), just the single OnCellRender event that should update the cell color for just that one cell (NOT all cells).

It looks to me like there is some issue with Grid cell render where setting the args.Class in a OnCellRender gets applied to ALL editable cells rather than the single cell?

Is this a bug or am I missing something?

Rob.

Grid

answered on 16 Feb 2026

2 answers

141 views

Badge Boundary

Any ideas on how I can get the Badge to pop beyond the constraints of its host/parent? Or, can I put the badge to the upper-middle left so it fits better inside the container?

        <TelerikAppBar Class="gsi-background-color">
            <AppBarSection>
                <NavLink href="@ProfileService.HomeUrl" class="gsi-navlink gsi-padding-10 gsi-padding-10-top-bottom">
                    Home
                </NavLink>
            </AppBarSection>

            <AppBarSection>
                <NavLink href="@AboutUrl" class="gsi-navlink gsi-padding-10 gsi-padding-10-top-bottom">
                    About
                </NavLink>
            </AppBarSection>

            <AppBarSpacer />

            <AppBarSection>
                <div class="input-group">

                    @if (ProfileService.IsNotNull())
                    {
                        if (ProfileService.IsInRole(SecurityRoles.Admin, Direction.Up))
                        {
                            <TelerikButton OnClick="OnRouteToNotifications" Class="gsi-button-icon-32">
                                <img src="/images/32/Nofications.white.32x32.png" height="32" width="32" />
                                @if (MessageCount > 0)
                                {
                                    <TelerikBadge VerticalAlign="@BadgeVerticalAlign.Top"
                                                  Class="gsi-background-color-darkgray gsi-color-white">
                                        @MessageCount
                                    </TelerikBadge>
                                }
                            </TelerikButton>

                            <TelerikButton OnClick="@OnRouteToProfile" Class="gsi-button-icon-32">
                                <img src="/images/32/PersonV2.png" height="32" width="32" />
                            </TelerikButton>

                            <NavLink href="@UserDetailsUrl" class="gsi-navlink gsi-padding-10-top-bottom gsi-cursor-pointer">
                                @UserDisplayName
                            </NavLink>

Badge

answered on 13 Feb 2026

0 answers

30 views

TileLayout Assigned RowSpan Not Respected

I have a 5 high x 3 Wide Telerik Tile Layout. On the top row, I have RowSpan 2 and ColSpan 1 and it works perfectly fine to show 3 cards.

There are 3 remaining cards that I want to show below those. The first one will have a Rowspan of 3 and a ColSpan of 2. Next to that, in the row on the far right, I am specifying a RowSpan of 3 and a ColSpan of 1 and it will only render as a size of RowSpan 1. It is way too short.

So the content within the card is cut off. The content is a card and within the card is a telerik grid. We can only see the grid header and the first 2 rows. We cannot see the remaining rows or the page number controls for the grid.

If I set the RowSpan of this card to 4 or greater, it will expand and the card extends below the card to it's left. It is way too tall.

How can I solve this issue? And why is it only a size of 1 RowSpan when I explicitly set it to 3?

TileLayout

asked on 12 Feb 2026

1 answer

29 views

Add MarkupString params to TelerikDialogs.PromptAsync

Hello,

Is there a way to show in a Dialog an html formated message ?
I would like to be able to do for instance something like this :

var value = await TelerikDialogs.PromptAsync(
                            new MarkupString($"<p>Please choose :</p><p>1) Value 1</p><p>2)...</p>",
                            "Pick an item",
                            "1"
                        );

And the same shall apply to AlertAsync() and ConfirmAsync() I guess.

Many thanks in advance !

Franck

Dialog

answered on 10 Feb 2026

1 answer

29 views

TelerikTextBox Component using OnChange and OnBlur for Enter Presses

I am attempting to utilize the OnChange and OnBlur events to handle when the enter button is pressed on an input (TelerikTextBox). I can get it to work quite easily, however, I do not want the OnBlur functionality at all. The more irritating part is that the OnChange event is fired by both the enter button, and the OnBlur event. Even when I change the OnBlur event to do nothing, the OnChange event still fires when we lose focus on the component. I only want the enter button presses to fire the OnChange event. Am I doing this wrong? Is there another method to this? Here is what I have so far:

                                            <TelerikTextBox Value="@_scanSlotInput"
                                                            OnChange="@SubmitScanSlot"
                                                            OnBlur="@HandleBlur"
                                                            ValueChanged="@((string v) => { _scanSlotInput = (v).ToUpperInvariant(); StateHasChanged(); })"
                                                            Placeholder="Scan or enter Slot QR"
                                                            Enabled="@(!_isSessionEnded)">
                                                <TextBoxPrefixTemplate>
                                                    <TelerikButton OnClick="@StartScanSlotQr" Enabled="@(!_isSessionEnded)" FillMode="@ThemeConstants.Button.FillMode.Clear">
                                                        <span class="fa-duotone fa-solid fa-camera-viewfinder" style="color: var(--kendo-color-primary, #0056b3);"></span>
                                                    </TelerikButton>
                                                </TextBoxPrefixTemplate>
                                                <TextBoxSuffixTemplate>
                                                    <TelerikButton OnClick="@(() => { _ignoreNextChange = false; return SubmitScanSlot(); })" Enabled="@(!_isSessionEnded)" FillMode="@ThemeConstants.Button.FillMode.Clear">
                                                        <span class="fa-duotone fa-solid fa-circle-check" style="color: var(--kendo-color-success, #28a745);"></span>
                                                    </TelerikButton>
                                                </TextBoxSuffixTemplate>
                                            </TelerikTextBox>

    private bool _ignoreNextChange;

    private async Task HandleBlur()
    {
        _ignoreNextChange = true;
        await Task.Delay(300);
        _ignoreNextChange = false;
    }

The @SubmitScanSlot function is excluded because it has "if (_ignoreNextChange) return;" and then goes into the rest of the function and is not relevant to this issue.

I saw the knowledge base article on the OnChange event firing twice and tried utilizing that, but the problem is not validating whether or not the value in the text box has changed, but to ignore the OnBlur completely and only allow the enter key to fire the event.

TextBox

answered on 10 Feb 2026

1 answer

30 views

insert custom row in grid

I have a simple grid with a list object, where one property is a date and the other a string. The grid is sorted on dates. I want to insert a custom <tr> row before the "normal" row if the month changes, containing a single <td> cell with the year and month.

I've looked at the <RowTemplate> but if I try to insert a <tr> in there, the whole table is broken because the rowtemplate should not (as I understand it) not contain a tr but only td cells.

Anyone?

Grid

answered on 09 Feb 2026

2 answers

66 views

Nuget Package location Version 6.2.0 of the Telerik.Ui.for.Blazor

Hello

My project has a dependency of version 6.2.0 for Telerik.Ui.for.Blazor and my project wont compile without this specific version

Is there a Telerik location available where I can download 6.2.0 nuget package and the related dependencies.

I have attached a screenshot of the error

Many Thanks in advance

General Discussions

answered on 04 Feb 2026

1 answer

79 views

When using DockManager with OnStateInit="@OnStateInit", the FloatingTopChanged and FloatingLeftChanged events dont work.

https://blazorrepl.telerik.com/cKuvmXwu53TrfnCx19

During the initial execution, the code behaves as expected, but after invoking setState, the FloatingTopChanged and FloatingLeftChanged events stop firing. Removing the DockPaneDemo item from localStorage and reloading the page restores the expected event behavior.

sample project attached.

DockManager

answered on 03 Feb 2026

1 answer

43 views

Where is the current Telerik for Blazor Accessibility Conformance Report?

Where is the latest Telerik for Blazor Accessibility Conformance Report? The one on this page is over two years old: https://www.telerik.com/blazor-ui/documentation/accessibility/compliance#accessibility-conformance-report

Most organizations follow a 12-month cycle or update their ACR whenever there's a significant product version change, whichever comes first, to remain in good standing.

Please update the latest Telerik for Blazor Accessibility Conformance Report for the current version of Telerik for Blazor. We need these reports for the US States that use our software and Telerik for Blazor. Without current, valid VPATs, we will have to discontinue use of Telerik for Blazor.

DevExpress for Blazor has a current VPAT here for example (latest report Dec, 2025): https://www.devexpress.com/products/net/accessibility/ACR-DevExpress-Blazor-25.2.pdf

Accessibility

answered on 03 Feb 2026