Last Updated: 28 Feb 2024 19:40 by Ben

I am working on a form where experienced agents need to input data quickly. Often enough they know the codes and so they can type them in the combo box, but they shouldn't have to look for the mouse to select the item, the combo box should select it when the user presses Tab to move to the next field.

This should happen only when the user has filtered the combo box so they see some items (and so the dropdown is open) - I want them to be able to select only items from the available options, AllowCustom does not work for me.



Here is one workaround you can consider:


@inject IJSRuntime _js

@* Move this script to a proper place in your project, the suppress-error hack is to keep it here in the component for easy copy-paste *@
<script suppress-error="BL9992">
    function getComboHighligtedItem() {
        // gets the currently focused item in this particular combobox
        var selItemElem = document.querySelector(".special-combobox .k-item.k-state-focused");
        if (selItemElem) {
            return selItemElem.innerText;

Selected value: @selectedValue
<br />

<TelerikComboBox OnBlur="@Test" PopupClass="special-combobox"
                 Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue" 
                    Placeholder="Select an item..." ClearButton="true" Filterable="true" FilterOperator="@StringFilterOperator.Contains">

<input placeholder="other form elements" />

@code {
    async Task Test()
        string currInput = await _js.InvokeAsync<string>("getComboHighligtedItem");
        // note - this relies on the item template of the combo rendering the text, or not being used at all
        // if you use other item templates, you may need to delve deeper in the DOM or otherwise recognize the item
        if (!string.IsNullOrEmpty(currInput))
            // match the filter operation to the filter operator of the combo box - Contains in this sample
            var matchingItem = myComboData.Where(itm => itm.MyTextField.ToLowerInvariant().Contains(currInput.ToLowerInvariant())).FirstOrDefault();
            if (matchingItem != null)
                selectedValue = matchingItem.MyValueField;

    // just dummy data follows

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; }

    public class MyDdlModel
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }



Last Updated: 27 Feb 2024 18:30 by Dale
Created by: Radko
Comments: 1
Category: Popup
Type: Feature Request

I want a less-persistent popup, where a click outside of its boundaries would close it. To give a real world example, the share snippet feature in REPL works in such a way: https://blazorrepl.telerik.com


Workaround for the time being is attach a JS click handler, such as in the following example: https://blazorrepl.telerik.com/GyumGrEs22yZgoCD16

Last Updated: 27 Feb 2024 09:36 by ADMIN

ADMIN EDIT: Please review this thread and add your comments so we can get the community feedback on this. We have attached to this opener post a small sample that shows how to achieve this with a few lines of code, and a short video of that behavior.

Hello Team;

The Grid Popup is a great feature, but my understanding is that the Popup form ONLY shows properties that are assigned as columns to the Grid.
If true, this poses some restrictions for us. Many times we might show ONLY small # of columns in Grid, however the form requires MORE properties during ADD or UPDATE.
Is it possible that we can use two ViewModels, one for the Grid columns with less properties and one with more properties for ADD & UPDATE?

Note: If this FR is considered, perhaps we can have separate ViewModel for Update and ADD, as sometimes, ADD might require more properties to be added than later be updated.

This feature will save a lot of time to build apps that have many tables and we have to create CRUD operations

Last Updated: 26 Feb 2024 09:50 by David
Created by: David
Comments: 0
Category: Map
Type: Feature Request

Currently, the marker tooltip can be shown only when hovering the marker. I want to show the tooltip when the user clicks the marker.

Example use case:

I've included clickable elements in the tooltip. The tooltip is hidden as soon as the mouse leaves the marker and the user cannot interact with the tooltip elements.

Last Updated: 26 Feb 2024 09:40 by Philipp
Created by: Oscar
Comments: 10
Category: MultiSelect
Type: Feature Request
I would like to avoid that the component cleans the filter user input when an item is clicked and auto-close is set to false.

So, imagine I want to select every item which contains letter 'S'. I type 'S' then when I click on the first item containing 'S', the 'S' in the input is removed and all the items are shown. So I need to type S again and again 1 time for each Item I want to select.

I attach a gif showing the behavior.
Last Updated: 24 Feb 2024 08:25 by ADMIN
Scheduled for 2024 Q2 (May)

The Editor is not showing its Value in the following scenario:

  • Using JSInterop in OnAfterRenderAsync
  • Setting the Editor Value in OnAfterRenderAsync and after the JSInterop call
  • Blazor Server app (seems to work in WebAssembly)

Possible workarounds are:

  • Set the Editor Value and call StateHasChanged() before using JSInterop in OnAfterRenderAsync, or
  • Add some small delay (for example, await Task.Delay(100); ) before using JSInterop.
Last Updated: 23 Feb 2024 10:54 by ADMIN
Created by: Parya
Comments: 9
Category: Menu
Type: Feature Request

Currently, on mobile devices (where is no hover), to open the child menu you need to click/tap the parent and the only way close it afterwards is if you click away. This is not very convenient for mobile usage. I want to be able to close the child menu on click/tap of the parent as well.

Last Updated: 23 Feb 2024 07:50 by Steffen
Created by: Greg
Comments: 13
Category: Grid
Type: Feature Request
My users need to select cells rather than entire rows, as they come from an MS Access background.
Last Updated: 22 Feb 2024 06:57 by Michal

When Adaptive = true, changing the collection of buttons seems to "break" the adaptive calculation. The Toolbar fails to determine what are the buttons to show in the main element and what are the buttons to show in the pop-up: https://blazorrepl.telerik.com/wSubOWlS08FLz7aZ54



For the time being, a possible workaround is to force the component to refresh when you change the buttons. For that purpose, you can dispose it and re-initialize it after some delay. Here is a runnable sample: https://blazorrepl.telerik.com/QIOFuCvS400o5tfL34.

Last Updated: 21 Feb 2024 19:01 by Nilar
Created by: Kees
Comments: 1
Category: FileManager
Type: Feature Request
The ability to choose which options to appear in the ContextMenu.
Last Updated: 20 Feb 2024 06:51 by ADMIN

In this example.  Select a cell in column C.  Then double click on another cell in column C.  The unhandled exception will show up and a null reference exception is logged in the console.  


The exception message is:

System.InvalidOperationException: TelerikValidationComponent requires a cascading parameter of type EditContext. You can use Telerik.Blazor.Components.TelerikValidationTooltip`1[System.String] inside a EditForm or TelerikForm.

Last Updated: 19 Feb 2024 08:51 by Manuel
Created by: Manuel
Comments: 0
Category: Grid
Type: Feature Request
Inside the <GridSettings> with <GridGroupableSettings Reorderable=true> to be able to Drag and Drop grouping reorder and not only with "Move Next" and "Move Previous".
Last Updated: 18 Feb 2024 01:03 by Toviana

Please expose an option to configure the field delimiter for CSV export. I want to set semicolon as field delimiter instead of a comma.




Internally the Grid uses SpreadStreamProcessing library to perform the export. That said, a necessary prerequisite to implement the current enhancement is that SpreadStreamProcessing supports settings for changing the delimiter when exporting to CSV. You may vote for the item and follow it to get status email updates.

For the time being, you may customize the exported file to set the desired field separator as suggested in the Grid CSV export - change the comma field delimiter knowledge base article.

Last Updated: 16 Feb 2024 13:48 by ADMIN
Created by: Wei
Comments: 4
Category: Tooltip
Type: Feature Request

How can I set the tooltip to show/hide programmatically? right not it only supports hover or click show action.



You can Follow a way to hide the tooltip programmatically here: https://feedback.telerik.com/blazor/1476364-close-tooltip-via-method.

You can find a way to hack the show event by triggering a JS click in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/common-validation-error-in-tooltip.

Here is an example that shows how you can trigger the tooltip to show for a particular target:

@inject IJSRuntime _js

<script suppress-error="BL9992">
    function triggerTooltip(index, selector, showOnClick) {
        var targets = document.querySelectorAll(selector);
        if (targets && targets.length >= index) {
            var desiredTarget = targets[index];//feel free to get the desired target in any other way
            setTimeout(function () {
                var evt = document.createEvent('MouseEvent');
                var evtToSimulate = showOnClick ? "click" : "mouseenter";
                evt.initEvent(evtToSimulate, true, false);
            }, 20);

<TelerikButton OnClick="@( async () => await TriggerTooltip(0) )">Trigger tooltip for the first target</TelerikButton>
<TelerikButton OnClick="@( async () => await TriggerTooltip(1) )">Trigger tooltip for the SECOND target</TelerikButton>

<TelerikTooltip TargetSelector="@ttipTargetSelector" ShowOn="@ShowOnSetting">

<p id="my-targets">
    <strong title="what is 'lorem ipsum'?">lorem</strong>
    ipsum dolor
    <strong title="is this a real word?">sit</strong>

    string ttipTargetSelector = "p#my-targets [title]";
    TooltipShowEvent ShowOnSetting { get; set; } = TooltipShowEvent.Click;
    async Task TriggerTooltip(int targetIndex)
        await _js.InvokeVoidAsync("triggerTooltip", 
                ShowOnSetting == TooltipShowEvent.Click ? true : false


Last Updated: 16 Feb 2024 13:40 by ADMIN

We find this in our infrastructure but it can be reproduced even in Telerik docs.

Docs page: https://docs.telerik.com/blazor-ui/components/grid/grouping/overview try to drop all three columns using drag and drop in sequence: Team, Name, On Vacation.


Expected sequence: Team, Name, On Vacation

Expected sequence: Team, On Vacation, Name


All Elements are always added as 1 item. It is an important feature for us, as our customers use it frequently.

Last Updated: 16 Feb 2024 11:33 by Nathan
Created by: Nathan
Comments: 0
Category: Popover
Type: Bug Report

A basic example of the issue is using the Popover with a Grid: https://blazorrepl.telerik.com/cyuGvQPB37aekvo514.

On initial load, the Popover is properly attached to the span elements in the Grid cells. If I filter, however, the elements are disposed and re-initialized - after that, the Popover is not attached to the new elements even though they have the same class used as a target selector.

Last Updated: 16 Feb 2024 11:04 by Nathan
Created by: Nathan
Comments: 0
Category: UI for Blazor
Type: Feature Request
I'd like to be able to change the built-in icons that the components use. I currently can do that with custom solutions but I need an option to easily change all icons on a global app level (e.g. all save icons, all arrow-down icons, etc.). I have a custom icon set and I want to ensure consistency in the icons used throughout the app.
Last Updated: 15 Feb 2024 18:23 by Fabien
Created by: improwise
Comments: 5
Category: UI for Blazor
Type: Feature Request

I'd like to have an ExpansionPanel component where I can declare my desired panel instances and their content in the markup.

Similar to https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/

Last Updated: 14 Feb 2024 13:13 by Bably

An open ComboBox will not close when the user tabs out of it when the ComboBox is the last component on the page. Here is a test example: Creating Blazor ComboBox

If there is another component after the ComboBo, then tabbing out works correctly.

Last Updated: 13 Feb 2024 10:56 by ADMIN

I have a Grid bound to ObservableCollection and I try to add a new record, the Grid stays in edit mode even if I click the Save button. 


@using System.Collections.ObjectModel
@using Telerik.FontIcons

<TelerikGrid Data="@Cards"
        <GridCommandButton Command="Add" Icon="@FontIcon.Plus">New</GridCommandButton>
        <GridColumn Field="@nameof(AdminCard.SerialNumber)" Title="Serial number" />
        <GridColumn Field="@nameof(AdminCard.DisplayNumber)" Title="Display number" />
        <GridColumn Field="@nameof(AdminCard.Name)" />
        <GridCommandColumn Width="140px">
            <GridCommandButton Command="Save" Icon="@FontIcon.Save" ShowInEdit="true" />
            <GridCommandButton Command="Edit" Icon="@FontIcon.Pencil" />
            <GridCommandButton Command="Delete" Icon="@FontIcon.Trash" />
            <GridCommandButton Command="Cancel" Icon="@FontIcon.Cancel" ShowInEdit="true" />

@code {
    TelerikGrid<AdminCard> GridReference { get; set; }

    public ObservableCollection<AdminCard> Cards { get; set; } = new();

    protected override async Task OnInitializedAsync() =>
      Cards = new ObservableCollection<AdminCard>{
        new AdminCard{SerialNumber="123", DisplayNumber="1234 1234", Name="Jim"}

    private async Task NewCard(GridCommandEventArgs args)
        AdminCard card = (AdminCard)args.Item;

        //apply this after saving the new record to the database
        var gridState = GridReference.GetState();
        gridState.InsertedItem = null;
        gridState.OriginalEditItem = null;
        await GridReference.SetStateAsync(gridState);

    private async Task UpdateCard(GridCommandEventArgs args)
        AdminCard fromGrid = (AdminCard)args.Item;
        AdminCard existing = Cards.Single(c => c.Id == fromGrid.Id);
        existing.SerialNumber = fromGrid.SerialNumber;
        existing.DisplayNumber = fromGrid.DisplayNumber;
        existing.Name = fromGrid.Name;

    private async Task DeleteCard(GridCommandEventArgs args)
        AdminCard card = (AdminCard)args.Item;

    public class AdminCard
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string SerialNumber { get; set; } = "";
        public string DisplayNumber { get; set; } = "";
        public string Name { get; set; } = "";

1 2 3 4 5 6