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