If my browser culture is set to Swedish, I can no longer tab through multiple ComboBoxes.

<AdminEdit>

You can manually add the TabIndex parameter to each ComboBox and set their values to non-negative integers.

</AdminEdit>

I have a ComboBox that allows me to select different entities that I want to edit data for.  Some of this data involves selecting other options from ComboBoxes.  When I type in my cascading filterable ComboBox to select an item, its value changes accordingly, but when I change the entity I'm editing, that ComboBox doesn't display the selected value, even though there is a selected value present.

Reproduction: https://blazorrepl.telerik.com/GGYgmlFA45guzWlg06.

Steps to reproduce:

1. Run the snippet - selected Person is Adam
2. Start typing "Green" in the Fav Colour ComboBox
3. Press Enter to select it
4. Change the Person to John
5. Fav Colour appears empty while it should display "Yellow"

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

Description

When the user types a value in the input and wishes to navigate to the beginning or end (by pressing Home/End buttons) of the input to make a correction, a value from the popup is actually selected and the value in the input is overridden.

Reproduction

1. Create a ComboBox and enable filtering.

2. Start typing in the input. Popup is opened.

3 Try to navigate in the input via the Home/End buttons. A value from the popup is selected that overrides the value in the input. 

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.

A ComboBox is databound via OnRead. It has an initial value, but no data arrives after the first OnRead call. We call Rebind() to fetch data and then it populates, but the component value doesn't show.

Click the button. The ComboBox should show its initial value, but doesn't. A similar scenario worked until version 2.30, when there was no Rebind(), but we set Data directly.

The workaround is to set raise a flag in OnRead and set the value in OnAfterRenderAsync.

@using Telerik.DataSource.Extensions

<TelerikButton OnClick="@BindCombo">Rebind Combo</TelerikButton>

<TelerikComboBox TItem="@ComboItem"
                 TValue="int"
                 @ref="@ComboRef"
                 TextField="Text"
                 ValueField="Id"
                 OnRead="OnComboRead"
                 Width="200px"
                 @bind-Value="@ComboValue">
</TelerikComboBox>

@code {
    string FilterValue { get; set; } = "A";
    int ComboValue { get; set; } = 2;
    bool BindFlag { get; set; }
    bool ShouldResetValue { get; set; }
    IEnumerable<ComboItem> LegacyComboData { get; set; }

    TelerikComboBox<ComboItem, int> ComboRef { get; set; }

    void BindCombo()
    {
        BindFlag = true;
        ComboRef.Rebind();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (ShouldResetValue)
        {
            // comment out the initially set value above to make the following line work
            ComboValue = 2;
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    async Task OnComboRead(ComboBoxReadEventArgs args)
    {
        if (BindFlag)
        {
            var service = new MyService();

            var data = await service.GetComboItem(FilterValue);
            var result = await data.ToDataSourceResultAsync(args.Request);

            args.Data = result.Data;

            //ShouldResetValue = true;
        }
    }

    public class ComboItem
    {
        public int Id { get; set; }
        public string Code { get; set; }
        public string Text { get; set; }
    }

    public class MyService
    {
        public async Task<IEnumerable<ComboItem>> GetComboItem(string code)
        {
            await Task.Delay(300);

            var data = new[]
            {
                    new ComboItem{ Id = 1, Code = "A", Text = "ValueA1" },
                    new ComboItem{ Id = 2, Code = "A", Text = "ValueA2" },
                    new ComboItem{ Id = 3, Code = "A", Text = "ValueA3" },
                    new ComboItem{ Id = 4, Code = "B", Text = "ValueB4" },
                    new ComboItem{ Id = 5, Code = "B", Text = "ValueB5" },
                    new ComboItem{ Id = 6, Code = "B", Text = "ValueB6" },
                    new ComboItem{ Id = 7, Code = "C", Text = "ValueC7" },
                    new ComboItem{ Id = 8, Code = "C", Text = "ValueC8" },
                    new ComboItem{ Id = 9, Code = "C", Text = "ValueC9" },
                };

            return data.Where(x => x.Code == code).ToList();
        }
    }
}

The ComboBox will not display an initial selected item, if the value is equal to the type's default. Applies to integers, guids, etc.

This used to work until version 2.30.

Here is a REPL test page.

If the value type is nullable, a zero int value will work for initial item selection.

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".

See this REPL:

https://blazorrepl.telerik.com/QmOFQTbW46QegjwX11

Run the program and scroll so that new data will be requested.  The page variable does not change, so I'm not able to request new data from my datasource.

I have a ComboBox/DropDownList that gets data from a remote service, using virtualization. When the PageSize property is big enough (in my case 20), I have issues scrolling up the selection box dropdown list. I'm trying to scroll but then resets to the currently selected item making it almost impossible to scroll up. You can use your own demo examples to replicate this issue.

To reproduce the issue, try the ComboBox - Virtualization, in Telerik REPL (Demo), change the PageSize from 10 to 20. Open the dropdown and select an item. Then, open again the dropdown and scroll slowly up.

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

Example Repo: https://github.com/benhysell/BlazorGridPagingIssue

Steps To Reproduce

• Run application and navigate to https://localhost:5001/updateweather
• Examine the ComboBoxes 'OData Weather Forecasts' and 'OData User' appears correct
• Stop application, change package reference for Telerik.UI.for.Blazor from version 2.25.0 to version 2.26.0
• Clean/Rebuild/run application and navigate back to https://localhost:5001/updateweather
• ComboBox now appears 'doubled', there are two boarders around the ComboBox

GitHub Repo - https://github.com/benhysell/BlazorGridPagingIssue

Expected Behavior - In the ComboBox ItemTemplate show the user's email address along with user name

Actual Behavior - Works fine debugging in Visual Studio, however in a published application the browser throws exception and will not display user's email address in the ItemTemplate.

Steps To Reproduce

• Clone and start debugging application
• Navigate to https://localhost:5001/createWeather
• This is a simple form with two ComboBoxes, one for weather data and one for user data
• In debug the ComboBoxes work as expected, each has an ItemTemplate that shows the desired data.
• Stop debugging and publish the applicaiton
• ie -- dotnet publish -o "YOUR DESIRED OUPUT DIRECTORY" -r win-x64 --self-contained
• Navigate to the output directory and run .\BlazorGrid.Server.exe
• In the browser navigate to https://localhost:5001/createWeather
• The page now throws an exception
• Also notice how the user's email address is no longer shown for the User in the comobobox drop down.

Details

Ran across this in a larger application...I have a class that inherits from Microsoft.AspNetCore.Identity.IdentityUser<Guid> and wanted to display all of my users in a ComboBox with a custom ItemTemplate consisting of the Name and Email.  This works great in debug, however every time I publish/deploy the Email address is not shown.  The example repo is a stripped down version of the larger application reproducing the error.

The application is making an OData call to the backend to retrieve the Users...in the repo we do not goto a database, in the live application we do.  In both instances the user's Email is not shown in the ItemTemplate, even though one can see via the browser's network traffic tab the results from the OData call include the email address for the users.

This issue does not just affect the email property, I was unable to get any of the properties listed on Microsoft.AspNetCore.Identity.IdentityUser<Guid> to render in a published application in the ItemTemplate for the Combobox. 

Note - all of the properties in Microsoft.AspNetCore.Identity.IdentityUser<Guid> are marked as 'virtual'.  I attempted to re-create this issue with a different class, in the repo I used the WeatherForecast class and created a virtual TemperatureK property...this however worked in debug and release without issue.  One can see this in the OData Weather Forecasts ComboBox on the same page, https://localhost:5001/createWeather.

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:

https://blazorrepl.telerik.com/QoOAPyEZ233YP2AX19

@inject IJSRuntime js

@* Move this script to a separate JS file *@
<script suppress-error="BL9992">
    function getHighligtedComboItem() {
        // Get the currently focused item in this particular ComboBox.
        var focusedItem = document.querySelector(".select-on-tab .k-list-item.k-focus");
        if (focusedItem) {
            return focusedItem.innerText;
        }
    }
</script>

<p>FirstFilteredItem: @FirstFilteredItem</p>

<p>Selected value: @ComboBoxValue</p>

<span onkeyup="@GetFirstFilteredItem">
    <TelerikComboBox Data="@ComboBoxData"
                     Value="@ComboBoxValue"
                     ValueChanged="@( (int newValue) => ComboBoxValueChanged(newValue) )"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Value)"
                     Filterable="true"
                     FilterOperator="@StringFilterOperator.Contains"
                     OnBlur="@SelectItemOnTab"
                     OnOpen="@( () => IsComboBoxOpen = true )"
                     OnClose="@( () => IsComboBoxOpen = false )"
                     Placeholder="Select an item..."
                     ClearButton="true"
                     Width="200px">
        <ComboBoxSettings>
            <ComboBoxPopupSettings Class="select-on-tab" />
        </ComboBoxSettings>
    </TelerikComboBox>
</span>

<input placeholder="another form element" />

@code {
    private IEnumerable<ListItem> ComboBoxData = Enumerable.Range(1, 123).Select(x => new ListItem { Text = "Item " + x, Value = x });

    private int ComboBoxValue { get; set; }

    private string FirstFilteredItem { get; set; } = string.Empty;

    private bool IsComboBoxOpen { get; set; }

    private async Task GetFirstFilteredItem(KeyboardEventArgs args)
    {
        if (!IsComboBoxOpen)
        {
            // Wait at least 300ms, which is the opening animation.
            await Task.Delay(400);
        }
        else
        {
            // Wait, depending on the typical filtering time.
            await Task.Delay(300);
        }

        // The code that will find the item text depends on the exact scenario and potential use of ItemTemplate.
        FirstFilteredItem = await js.InvokeAsync<string>("getHighligtedComboItem");
    }

    private void SelectItemOnTab()
    {
        if (!string.IsNullOrEmpty(FirstFilteredItem))
        {
            // Match the filter operation to the filter operator of the ComboBox.
            var matchingItem = ComboBoxData.Where(x => x.Text.ToLowerInvariant().Contains(FirstFilteredItem.Trim().ToLowerInvariant())).FirstOrDefault();
            if (matchingItem != null)
            {
                ComboBoxValue = matchingItem.Value;
                FirstFilteredItem = string.Empty;
            }
        }
    }

    private void ComboBoxValueChanged(int newValue)
    {
        ComboBoxValue = newValue;
        FirstFilteredItem = string.Empty;
    }

    public class ListItem
    {
        public int Value { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}

Issue - Setting the selected element of a combo box inside a form worked in 2.22.0 and no longer works in 2.23.0 

Repo - https://github.com/benhysell/BlazorGridPagingIssue

Steps to Reproduce 

• In the test repo start the application and navigate to https://localhost:5001/updateWeather
• The selected value in the combo box should be the 8th value, "summary 8"
• Stop the application, in BlazorGrid.Client.csproj 
  • Replace <PackageReference Include="Telerik.UI.for.Blazor" Version="2.22.0" />
  • With <PackageReference Include="Telerik.UI.for.Blazor" Version="2.23.0" />
• Do a clean/rebuild to ensure the latest version of Telerik Blazor is being used
• Run the application in a new incognito window and navigate back to https://localhost:5001/updateWeather, notice how nothing is selected in the combo box

Details

This is a contrived example pulled out of a larger application.  Almost all of our combo boxes are backed by OData calls.  When we 'create or POST' an element the first time we load the form we have the combo box make an OData call to retrieve the top 200 elements.  On a subsequent 'edit or PUT', where we have a thing we want to update we first go get the thing we want to work with, and then fill in the comobo box with that element.

In this example application we simulate this load by deciding if a value was passed in or not for the combo box.  https://localhost:5001/updateWeather always passes in an 8 to load the 8th element.  https://localhost:5001/createWeather does not pass in any value, leaving the form value unbound.

This all worked as expected in 2.22.0, however once we upgraded to 2.23.0 we could no longer set the value of the combo box on load when combined with an OData call.

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

---

Replication code:

@SelectedValue
<br />
<TelerikComboBox Data="@DdoData"
                 OnRead="@OnReadHandler"
                 Filterable="true"
                 ValueField="RecId"
                 TextField="DdoTitle"
                 Placeholder="Find what you seek by typing"
                 @bind-Value="@SelectedValue">
</TelerikComboBox>

@code{
    public int SelectedValue { get; set; } = 4;
    List<ddo> DdoData { get; set; }
    public string ddoCbType { get; set; } = "Default";
    int InitialId { get; set; }
    string currentText { get; set; } = "";

    protected override async Task OnInitializedAsync()
    {
        await ReadDdoData(ddoCbType, "");
        if (SelectedValue > 0)
        {
            InitialId = (int)SelectedValue;
            await ReadDdoData(ddoCbType, currentText);
        }
    }

    async Task OnReadHandler(ComboBoxReadEventArgs args)
    {
        if (args.Request.Filters.Count > 0)
        {
            Telerik.DataSource.FilterDescriptor filter = args.Request.Filters[0] as Telerik.DataSource.FilterDescriptor;
            currentText = filter.Value.ToString();
            await ReadDdoData(ddoCbType, currentText);
        }
        else
        {
            currentText = "";
            await ReadDdoData(ddoCbType, "");
        }
    }

    private async Task ReadDdoData(string ddoCbType, string currentText)
    {
        await Task.Delay(100);

        DdoData = new List<ddo>()
        {
                new ddo(){ RecId = 1, DdoTitle = "one"},
                new ddo(){ RecId = 2, DdoTitle = "two"},
                new ddo(){ RecId = 3, DdoTitle = "Three"},
                new ddo(){ RecId = 4, DdoTitle = "Four"},
                new ddo(){ RecId = 5, DdoTitle = "Five"}
            };

        //this does not help
        await InvokeAsync(StateHasChanged);
    }

    public class ddo
    {
        public int RecId { get; set; }
        public string DdoTitle { get; set; }
    }
}

In my data, I have multiple identical values for the TextField of the ComboBox. When the user selects one of them and focuses away from the component the selected value changes to the first instance of the items with the same TextFields, although they have different ValueFields.

Reproduction:

<TelerikComboBox Data="@myDdlData" 
                 TextField="MyTextField" 
                 ValueField="MyValueField" 
                 Value="selectedValue" 
                 ValueChanged="@((int? id) => ValueChangedHandler(id))" 
                 FilterOperator="StringFilterOperator.Contains"
                 Filterable="true">
</TelerikComboBox>

@code {
    private List<MyDdlModel> myDdlData { get; set; }

    private void ValueChangedHandler(int? id)
    {
        selectedValue = id;
    }

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

    int? selectedValue { get; set; }

    protected override void OnInitialized()
    {
        myDdlData = new List<MyDdlModel>()
        {
            new MyDdlModel()
            {
                MyValueField = 1,
                MyTextField = "John Smith"
            },
            new MyDdlModel()
            {
                MyValueField = 2,
                MyTextField = "John Smith"
            },
            new MyDdlModel()
            {
                MyValueField = 3,
                MyTextField = "John Smith"
            },
            new MyDdlModel()
            {
                MyValueField = 4,
                MyTextField = "Alice Jones"
            },
            new MyDdlModel()
            {
                MyValueField = 5,
                MyTextField = "Alice Jones"
            },
        };
    }
}