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?

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

---

I'd like to report a bug with the Telerik combo box opening animation.

The problem can be reproduced on your page https://demos.telerik.com/blazor-ui/combobox/templates

Reproduction steps

1. Open page https://demos.telerik.com/blazor-ui/combobox/templates
2. Change the window to restored mode
3. Open the Product combo box and observe that the popup animation works as expected
4. Resize the window slightly vertically
5. Open the Product combo box
6. Observe that the combo box popup animation starts in the wrong place

This issue is 100% reproduceable every time and also can be reproduce if the popup is opened and the window is maximized.

Please see the attached video from about 15 to 25 seconds. Note that I reproduce the issue in the video a couple of times however due to the quality of it you can only see the incorrect animation between 15 to 25 seconds.

I hope the information helps.

The problematic behavior appears in this specific scenario:

• AllowCustom="true".
• The input partially matches an item in the list.
• The user presses Enter

In this case, the custom typed value is lost and the component value is the first item in the list matching the input. Thus, the user cannot set their desired custom value.

Reproduction with steps listed inside: https://blazorrepl.telerik.com/GokVlXEW12KGZ36F15.

===

ADMIN EDIT

===

A possible option for the time being:

• Enable filtering.
• Use the OnRead event to get the input value from the filter descriptors and save it.
• In the OnChange event that is triggered on Enter press, set the saved input value to the component.

Here is a basic sample: https://blazorrepl.telerik.com/wourlNOC51FRcNAX54.

I want to capture the user selection (which has to happen through ValueChanged, as OnChange does not fire when I need it). At this point I want to use the selection from the user and to clear the combo box.

I would expect that this should work but it does not:

@result
<br />
from model: @MyItem
<br />
<br />
<TelerikComboBox Data="@MyList" Value="@MyItem" ValueChanged="@( (string v) => MyValueChangeHandler(v) )" Placeholder="Choose something">
</TelerikComboBox>

@code {
    string result;
    private async Task MyValueChangeHandler(string theUserChoice)
    {
        result = string.Format("The user chose: {0}", theUserChoice);

        MyItem = null; // this should be enough

    }
    protected List<string> MyList = new List<string>() { "first", "second", "third" };
    protected string MyItem { get; set; } = "second";
}

I want to access runtime the value by which the user filters. 

===ADMIN EDIT===

Use the OnRead event handler to access the filter value:

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikComboBox OnRead="@OnComboBoxRead"
                 TItem="@ListItem"
                 TValue="@int"
                 @bind-Value="@SelectedValue"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Filterable="true"
                 FilterOperator="@StringFilterOperator.Contains"
                 Width="300px">
    <ItemTemplate>
        @HighlightResult(context.Text)
    </ItemTemplate>
</TelerikComboBox>

<style>
    .k-list-item:has(u) {
        gap: 0;
    }
</style>

@code {
    private List<ListItem> ListItems { get; set; } = new();

    private int SelectedValue { get; set; } = 3;

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

    private async Task OnComboBoxRead(ComboBoxReadEventArgs args)
    {
        ComboBoxFilterValue = args.Request.Filters.Cast<FilterDescriptor>().FirstOrDefault()?.Value.ToString() ?? string.Empty;

        DataSourceResult result = await ListItems.ToDataSourceResultAsync(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
    }

    public MarkupString HighlightResult(string text)
    {
        var result = string.IsNullOrWhiteSpace(ComboBoxFilterValue)
            ? text
            : text.Replace(ComboBoxFilterValue, "<u>" + ComboBoxFilterValue + "</u>", StringComparison.OrdinalIgnoreCase);

        return new MarkupString(result);
    }

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>() {
            new ListItem(1, "Basketball"),
            new ListItem(2, "Golf"),
            new ListItem(3, "Baseball"),
            new ListItem(4, "Table Tennis"),
            new ListItem(5, "Volleyball"),
            new ListItem(6, "Football"),
            new ListItem(7, "Boxing"),
            new ListItem(8, "Badminton"),
            new ListItem(9, "Cycling"),
            new ListItem(10, "Gymnastics"),
            new ListItem(11, "Swimming"),
            new ListItem(12, "Wrestling"),
            new ListItem(13, "Snooker"),
            new ListItem(14, "Skiing"),
            new ListItem(15, "Handball"),
            };

        base.OnInitialized();
    }

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

        public ListItem(int id, string text)
        {
            Id = id;
            Text = text;
        }
    }
}

The ComboBox and MultiComboBox replace the current filter value with the component value during virtual scrolling.

The issue is similar to MultiColumnComboBox and ComboBox remove filtering value after virtual scrolling , but the other issue occurred when there was no current value.

To reproduce:

1. Go to https://demos.telerik.com/blazor-ui/combobox/virtualization
2. Select item Changde
3. Filter by "Ch"
4. Scroll down

Ch will be replaced by Changde.

If custom values are not required, a possible workaround is to use a filterable DropDownList with virtualization.

For the MultiColumnComboBox, the component can use a RowTemplate to simulate multiple columns in the dropdown. You can see a REPL example here.

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.

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.

Hi,

EDIT: This issue (of course) relates to the case where the combobox has data selected when rendering.

The clear button of the combobox behaves in a way that I find strange, and which prevents us to get the desired behaviour in our application.

It is easily reproducable with your demo here:

https://demos.telerik.com/blazor-ui/combobox/templates

When loading the page there is no clear button, which I think is wrong. Especially since it is not even in the DOM, so it cannot be made visible with styling. When clicking in the field, the clear button appears, and it stays there when changing focus to elsewhere, which seems inconsistent.

In other words, the span of the button (in the red box below) only appears when the combobox has had focus.

Thanks,

Niels

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

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.