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.

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.

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

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

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

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

---

When I select an item from the combo box dropdown, the OnChange event fires with the new value, but the model field is not updated yet.

@selectedValue

<TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"
                 @bind-Value="@selectedValue"  OnChange="@MyOnChangeHandler">
</TelerikComboBox>

@code {
    int selectedValue { get; set; }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
    
    private void MyOnChangeHandler(object theUserInput)
    {
        Console.WriteLine($"COMBO: the models is now {selectedValue} and the handler received {theUserInput}");
    }

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

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

}

ComboBox value binding broken in 2.9.0, works fine in 2.8.0

Please see your own documentation example:

<TelerikComboBox Data="@MyList" @bind-Value="MyItem">
</TelerikComboBox>

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

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. 

Hi,

If I enter some characters in the ComboBox to filter it, the characters that I enter aren't shown and the filtering is not correct. Indeed, if I enter "ALU" (some of my data start with "ALU", no data appears.

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