Questions on UI for Blazor Forum

1 answer

14 views

[Solved] TelerikFileSelect component in a grid column

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

FileSelect

Grid

answered on 17 Mar 2026

1 answer

50 views

License requirement for windows service that hosts a blazor web site with Telerik controls

My project is a windows service that hosts a blazor web site and api. When deployed using an MSI, Telerik says it is not licensed. What must be done with the license file to ensure it is registered?

            int portNumber =
                builder.Configuration.GetValue<int>(
                    "Kestrel:Startup:Port");

            builder.Host.UseWindowsService();
            builder.WebHost.UseKestrel(options =>
            {
                options.Listen(IPAddress.Loopback, portNumber);
            });

General Discussions

Grid

answered on 11 Mar 2026

1 answer

24 views

Debug with a breakpoint in the OnUpdate handler leaves the grid unresponsive after a continue...

If I place a breakpoint in the OnUpdate handler (async) in a grid, spend about 20 seconds inspecting values (no code changes, just looking at values) and then "continue" I get the following:

The grid is now completely unresponsive ... it doesn't continue execution and I have to basically stop execution from VS 2026. Having to return a test session every time I debug is INCREDIBLY time consuming ... there must be a better way to debug?

Grid

answered on 09 Mar 2026

1 answer

33 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

1 answer

35 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

1 answer

32 views

Blazor grid edit popup hide close

I would like to hide the close button on the Grid Edit Popup window? How can I do that.

If it is not possible to hide the close button, is there an OnClose event I can capture.

Grid

Popup

answered on 21 Jan 2026

1 answer

87 views

[Solved] How to set Column Header separator width?

I seem unable to locate the CSS class I need to use for setting column separator width. I have tried, but no luck.

Thought maybe .k-separator but that didn't seem to do anything. Dev mode inspection via Edge didn't reveal anything I could use/find.

If I specify a column like so:

                    <GridColumn Title="Effective">
                        <Columns>
                            <GridColumn Field=@nameof(RateDispatchItem.EffectiveDate) Title="Current" Editable="false" TextAlign="ColumnTextAlign.Right" DisplayFormat="{0:MM/dd/yyyy}" Width="7rem" />
                            <GridColumn Field=@nameof(RateDispatchItem.NextEffectiveDate) Title="Next" Editable="true" TextAlign="ColumnTextAlign.Right" DisplayFormat="{0:MM/dd/yyyy}" Width="7rem" />
                        </Columns>
                    </GridColumn>

I'll get column separators for entire grid (which sorta makes sense):

BUT, I can't seem to make column separators work for single titles like:

I'd like to set the column header separator to a 1px and apply system wide (just the header, no the grid content).

Hints?

Grid

answered on 17 Dec 2025

1 answer

116 views

TelerikGrid: Reset Columns / Reset to Default does not restore original column layout after reorder & hide operations

I am using the Blazor TelerikGrid with column reordering, column menu, and “Reset Columns / Reset to Default” functionality enabled.
However, the grid does not revert back to the original default column layout after users reorder and hide columns, then click Reset.

Steps to Reproduce

Load the grid with default columns.
Reorder some columns using drag & drop.
Hide a few columns from the column menu (uncheck).
Open the column menu and click:
- Reset Columns, or
- Reset to Default
The grid does not return to its original default column order or visibility settings.

Expected Behavior

The grid should fully restore the initial default state:
- Original column order
- All columns visible again
- Original widths and layout

    <TelerikGrid @ref="SearchGrid"
                 TItem="@ChargeUIResult"
                 Pageable="true"
                 Sortable="true"
                 ConfirmDelete="true"
                 Resizable="true"
                 Groupable="false"
                 Navigable="false"
                 Reorderable="true"
                 EnableLoaderContainer="false"
                 FilterMode="GridFilterMode.None"
                 EditMode="GridEditMode.Popup"
                 SelectionMode="GridSelectionMode.Multiple"
                 ShowColumnMenu="true"
                 OnRead="@ReadItems"
                 OnRowClick="@OnRowClickHandler"
                 SelectedItemsChanged="@((IEnumerable<ChargeUIResult> args) => SetSelectedItem(args))"
                 SelectedItems="@SearchState.SelectedItems"
                 PageChanged="@SearchState.ClearingSelectedItem"
                  ......>
        <GridSettings>
            <GridPagerSettings InputType=PagerInputType.Buttons PageSizes="@SearchState.PageSizes" ButtonCount="@SearchState.PageButtonCount" />
            <GridColumnMenuSettings Sortable="true"
                                    Lockable="false"
                                    FilterMode="@ColumnMenuFilterMode.None" />
        </GridSettings>
  </TelerikGrid>

Code:
    private async Task SetSelectedItem(IEnumerable<ChargeUIResult> args)
    {
        if (ShouldRenderSelected)
        {
            var selectedList = args.ToList();             
            SearchState.SetSelectedItems(selectedList);
            StateHasChanged();
        }
        ShouldRenderSelected = true;
    }

My Question:

Is this a known issue where Reset Columns / Reset to Default does not revert the column order and visibility to the initial state?
Does the Reset feature require explicit configuration or persistence settings to restore original defaults?

Grid

answered on 15 Dec 2025

0 answers

105 views

TelerikComboBox requires double-click to load dropdown values

I’m using a TelerikComboBox in a Blazor application, and I’ve encountered an issue where the dropdown requires two clicks to display the loader and populate the values. On the first click, nothing happens—the loader does not appear, and the dropdown remains empty. Only after clicking a second time does the loader show and the data load correctly.

Here’s the relevant code snippet:

<TelerikComboBox Data="LookupDropdown" @bind-Value="@Compare.Operand2.Value" TextField="@nameof(KeyValueDropdownsModel.Label)"
                 ValueField="@nameof(KeyValueDropdownsModel.Action)" Filterable="true" AllowCustom=IsEnabled
                 Placeholder=@PlaceholderContent FilterOperator="@FilterOperator" Width="270px" OnRead="LoadDropdownDataAsync">
    <ItemTemplate>
        <span class="selectedOptionCode" aria-label="@context.Label" title="@context.Description">@context.Label</span>
    </ItemTemplate>
    <HeaderTemplate>
        @if (IsLoading || isEOBCodeLoading)
        {
            <div class="dropdown-spinner">
                <TelerikLoader Type="@LoaderType.InfiniteSpinner" Size="@(ThemeConstants.Loader.Size.Small)"></TelerikLoader>
            </div>
        }
    </HeaderTemplate>

    <NoDataTemplate>
        @if (!IsLoading && !isEOBCodeLoading)
        {
            <div>No data available</div>
        }
    </NoDataTemplate>
    <ComboBoxSettings>
        <ComboBoxPopupSettings Height="auto" MinHeight="30px" MaxHeight="250px" />
    </ComboBoxSettings>
</TelerikComboBox>

As finding:

Root Cause:
It seems that the issue occurs when the EOB Code option is first selected from one menu, and then the EOB Code dropdown requires a second click for the loader to appear and display the values. This behavior only happens if the user does not focus out of the first menu before attempting to open the EOB Code dropdown.

Why it happens

Focus handling: If the user doesn’t “focus out” of the first menu, the second dropdown doesn’t register the initial click as a data‑load trigger.
Async loading: The loader is tied to the dropdown’s open event. If the component is still resolving focus or rendering, the first click only sets focus, and the second click actually opens the list.
Telerik specifics: Telerik dropdowns often require explicit focus before they can trigger data binding. This is why we see the loader only after the second click.
It’s not a defect in code alone, it’s tied to how Telerik manages focus and rendering in dropdown components

ComboBox

Grid

updated question on 26 Nov 2025

1 answer

66 views

How to disable arrow navigation in GridToolBarTemplate

Hi

I want to add a textbox in the GridToolBarTemplate. Because of the built-in arrow navigation it is not possible to move the cursor inside the textbox. Is it possible to disable the default arrow navigation in the GridToolBar?

Example in this simple REPL

Enter any text in the Textbox, hit the left arrow keyboard button and notice the cursor stays at the end of the text.

Best regards

Bram

Grid

TextBox

answered on 20 Nov 2025