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.

---

ADMIN EDIT

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;
        }
    }
</script>

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">
</TelerikComboBox>

<input placeholder="other form elements" />

@code {
    async Task Test()
    {
        string currInput = await _js.InvokeAsync<string>("getComboHighligtedItem");
        Console.WriteLine("--------------");
        Console.WriteLine(currInput);
        Console.WriteLine("--------------");
        // 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; }
    }
}

---

The tablet that I am using is slightly wider than the medium breakpoints set in AdaptiveMode.Auto. However, I still want to show the action sheet. I'd like to be able to configure the breakpoints which are currently hard-coded.

===

ADMIN EDIT

===

The request is opened for ComboBox but it also targets other selects and pickers that have AdaptiveMode feature. For example, DropDownList, MultiSelect, DatePicker and more.

I would like the ability to flag elements in a data bound combo that are no longer available as disabled and not selectable.  Had they been previously selected, they still need to show, but should not allow a user to select it again.

I would like a property that can be set when databinding a combo.

For instance when you set the Data, TextField, & ValueField properties, can there also be one for SelectableField (or something) - this could be mapped to a Boolean in the dataset.

If this property isn't used then it defaults to yes (ie they are all selectable), but if it is used, then any items which have this field set to 'no' then they show as a different color (could just be grey) but are not selectable by the user.

If they had previously been selected (prior to being marked as no longer available) then they should show when the record is loaded, but otherwise they are not selectable.

I don't particularly want to write code on click to see if its enabled and then unselect it, I would prefer it to simply be built into the base control.

Is this possible?  Or is there another property already there that does this?

I would like to change the text in the ComboBox dropdown when there is no data in the source collection.

At the moment the only option is through localization for all instances like here.

We are needing a way to display a hierarchy inside the ComboBox.  I don't see any examples on this particular feature, I had found a similar request, but not identical.

Our use case:

We have administrators that manage multiple tenants within our system.  The tenants are part of a hierarchy, the user needs to be able to select a tenant or tenant parent.

I will use hotels as an example:

-Chain 1

--Brand 1

---Property 1

---Property 2

--Brand 2

---Property 3

Our current system that we are migrating controls from has this feature, so I would like to stick as close to this functionality as possible, however; if it is not an option, what control would you suggest as an alternative.

See example (sorry for the redactions)

The core concept is providing a user a choice as part of a form, but layout needs to be organized so that a user can easily navigate.  Top level names are unique, all other names can duplicate since they may share similar naming conventions across different organizations.

An option that may work as an alternative, is invoking a dialog popup and within it having a tree list of the information I need.  I think it could work, but it would certainly break the flow of the form.

I would like to use an event that fires only when the user clicks on an item from the dropdown. 

=====

ADMIT EDIT:

Here is a possible way to achieve this now:

<TelerikComboBox @bind-Value=@SelectedValue
                 Data="@ComboBoxData"
                 ValueField="ProductId"
                 TextField="ProductName">
    <ItemTemplate>
        @{
            var currentItem = context as Product;

            <div onclick="@(() => OnClickHandler(currentItem))" style="width:100%">
                @currentItem.ProductName
            </div>
        }
    </ItemTemplate>
</TelerikComboBox>

@code {
    private void OnClickHandler(Product item)
    {
        //the application logic here
    }

    public IEnumerable<Product> ComboBoxData { get; set; }
    public int SelectedValue { get; set; } = 2;

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 1; i < 10; i++)
        {
            products.Add(new Product()
                {
                    ProductId = i,
                    ProductName = $"Product {i}",
                    UnitPrice = (decimal)(i * 3.14)
                });
        }

        ComboBoxData = products;
        base.OnInitialized();
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

Hi Telerik Team,

One of the requirements for my team project is that the ComboBox needs to be sorted in descending order to list dates. We need to sort the groups and the options inside the groups.

Ideally, the ComboBox can have a SortDirection parameter that defines the order as SortAscending or SortDescending, and can display the ComboBox groups and options accordingly.

===

Admin Edit:

It would be useful if you could disable the default sorting of the groups as well.

Hello, I would like to have a mutiselect dropdown like you have for ajax:

https://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx

Syncfusion and radzen have this support for blazor :

https://blazor.syncfusion.com/demos/multiselect-dropdown/checkbox?theme=bootstrap5

https://blazor.radzen.com/dropdown

I know that you have a proposed solution for the MultiSelect component:

CheckBox in Multiselect

But the design of this one is not what I'm after, the box still expands downwards when selecting multiple items and it makes it hard to design a coherent page that does not make the dom "jump around". Also the implementation is cumbersome for more complex objects .

It would be better with a solution like you have for ajax where it just shows the first items that fits and then "+X items".

Thanks for adding more new controls to Blazor. That help us to move to it from ASPX AJAX.

Can we have the Multi-Column ComboBox, like the ASPX AJAX that one, please?

https://www.telerik.com/products/aspnet-ajax/ajax-multicolumncombobox.aspx

Transitioning our application from Telerik React to Blazor, our comboboxes in our React application are hooked up to OData endpoints because of the amount of data they could display, some as large as 30mb of json.

Server filtering, https://feedback.telerik.com/blazor/1447481-server-filtering-with-custom-data-request-event-that-can-accommodate-remote-data, almost works, however:

• I can't set PageSize on the combobox
• I can't set TotalCount on the combobox
• Using Telerik.Blazor.ExtensionMethods.ToOdataString throws a NullReferenceException when I try to use it in the ReadItems method with the ComboBoxReadEventArgs args.Reqeuest.ToOdataString()

I tried setting up my combobox like my OData Grid, i.e.

<TelerikComboBox Data="@Dtos"
                         OnRead="@ReadItems"
                         Filterable="true"
                         Placeholder="Find what you seek by typing"
                         @bind-Value="@SelectedValue"
                         TextField="Name" 
                         ValueField="Id"
                         Pageable="true" 
                         PageSize="20" 
                         TotalCount=@Dtos.Count
                         >

However it throws an exception:

blazor.webassembly.js:1 WASM: System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TelerikComboBox`2[[MyType, MyNamespace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[System.Guid, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]' does not have a property matching the name 'Pageable'.

Was hoping this would 'just work' like it does with the Grid, which is amazing!

Hello everyone,

in the web app we are programming, we make heavy use of the TelerikCombobox. Now the use case arises, that the user needs to be able to select a numeric value (double or int, mainly) out of an existing list of values, or if the needed value does not exist yet, provide a custom value.

In this particular case, he selects out of a range of existing article lengths or widths. Most of the time, the length or width is of a "normed" width or length (meaning the normal width / length the article would have) Since they can however produce an article in any width / length they wish to, it does happen sometimes, that the range of existing article widths / lengths is missing the desired value. Hence we thought we could make use of the AllowCustom feature of the TelerikCombobox, so that the user can provide a value themselfes, if need be.

However, the type restriction to string of the Value and Text-Field of the Items makes it rather cumbersome todo so, as a new Model class is needed which has the Text / Value fields as string and internally maps it to the desired type. In addition the user can provide input, which does not make any sense whatsoever for the underlying type.

Would it be possible, for the AllowCustom feature to work also mit numeric values? I.e. When the property the Value-field is referencing to, returns a numeric value, only numeric input is considered (somewhat similar to the NumericTextBox)?

Best Regards,

tilt32

Hi

I have an TelerikComboBox for selecting a "site". I use Filterable + FilterOperator (StringFilterOperator.Contains). The "Data" contains almost 2500 sites.



So, my problem is that it is slow when start writing in the combobox. I know for auto-complete you can choose to have a minimum characters before filtering kicks in (MinLength parameter), can you achieve that somehow? Or is it any other way of speeding up the search?



Regards

Emanuel

---

ADMIN EDIT

For the time being, you can see how to achieve that through the OnRead event: https://docs.telerik.com/blazor-ui/knowledge-base/combo-debounce-onread

---

Would be fine if when you click on a filterable combobox the whole text in it will be selected, so you can click and start digit new text filter without delete the old text before.

---

ADMIN EDIT

This should probably be behind a flag to keep the original behavior.

At the moment, you can achieve it with a bit of JS to focus and select all the text:

    <script>
        function selectAllText(parentElem) {
            let input = parentElem.querySelector(".k-input");
            if (input && input.focus) {
                input.select();
            }
        }
    </script>

Which you can call with the approach from this article:

@inject IJSRuntime _js

@SelectedValue
<br />

<span @onfocusin="@SelectAllText" @ref="@spanRef">
    <TelerikComboBox Data="@Data"
                     Filterable="true" FilterOperator="@StringFilterOperator.Contains"
                     Placeholder="Find product by typing part of its name"
                     @bind-Value="@SelectedValue" 
                     TextField="ProductName" ValueField="ProductName" AllowCustom="true">
    </TelerikComboBox>
</span>

@code {
    ElementReference spanRef { get; set; }
    async Task SelectAllText()
    {
        await _js.InvokeVoidAsync("selectAllText", spanRef);
    }

    public List<Product> Data { get; set; }
    public string SelectedValue { get; set; }

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 0; i < 20; i++)
        {
            products.Add(new Product()
            {
                ProductId = i,
                ProductName = $"Product {i}"
            });
        }

        Data = products;
        base.OnInitialized();
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
    }
}

Related to https://docs.telerik.com/blazor-ui/knowledge-base/grid-bind-navigation-property-complex-object

However I'm looking to do this for the Combobox, i.e.

<TelerikComboBox Data="@Users"                               
                                 @bind-Value="@FormElement.UserInitials"
                                 ValueField="Dto.UserInitials"                                 
                                 TextField="Dto.UserInitials"
               >
</TelerikComboBox>

public class Users

{

   //bunch of properties 

   public UserSubProperties Dto {get; set;}

}

public class UserSubProperties

{

   public string UserInitials {get; set;}

}

When i search for something by typing in combobox, i want to be able to use the keyboard to make my selection

Exable below, if i press b, I want to be able to either select baseboll by pressing enter, or make another selection by using arrow keys and then enter.