Questions on UI for Blazor Forum

1 answer

41 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

201 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

40 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

53 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

58 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

47 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

82 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

126 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

64 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

1 answer

48 views

Is there a way to sort a PivotGrid by the value?

I don't really want to sort by row or column title, but actually have the data sorted by the value (the measure). So to click the column header and have all rows in the order of the row values for the selected column. For multiple row dimensions, the sorting would first have to apply to the highest dimension (S, W, W/AT) and than further down the nested dimensions.

A code behind solution would be fine as well.

PivotGrid

answered on 03 Feb 2026