We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi.
I want to keep the previous value in combo when user types in some text which does not belong to the datasource. Would you please help?
Thank you.
Based on your query, We understand that you want to retain the previous value in the combo box when a user types in some text that does not belong to the data source.
To achieve this, we can make use of the CustomValueSpecifier event of the Syncfusion Blazor ComboBox control. This event is triggered when the user types in a value that is not present in the data source.
|
@using Syncfusion.Blazor.DropDowns
<div style="margin:130px auto;width:300px"> <SfComboBox TItem="GameFields" TValue="string" @bind-Value="@ComboValue" DataSource="@Games"> <ComboBoxEvents TItem="GameFields" TValue="string" ValueChange="@ValueChangeHandler" CustomValueSpecifier="@CustomValueHandler"></ComboBoxEvents> <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings> </SfComboBox> </div> @code { public bool IsBool { get; set; } public string TempValue { get; set; } public string ComboValue { get; set; } public class GameFields { public string ID { get; set; } public string Text { get; set; } }
private List<GameFields> Games = new List<GameFields>() { new GameFields(){ ID= "Game1", Text= "American Football" }, new GameFields(){ ID= "Game2", Text= "Badminton" }, new GameFields(){ ID= "Game3", Text= "Basketball" }, new GameFields(){ ID= "Game4", Text= "Cricket" }, };
private void CustomValueHandler(CustomValueSpecifierEventArgs<GameFields> args) { IsBool = true; } private void ValueChangeHandler(ChangeEventArgs<string, GameFields> args) { if (IsBool) { args.Cancel = IsBool; ComboValue = TempValue; } IsBool = false; TempValue = ComboValue; } } |
In the provided solution code, we have created a CustomValueHandler method that sets a boolean variable IsBool to true. We also have a TempValue property that holds the previous value of the combo box, and a ComboValue property that holds the current value of the combo box.
In the ValueChangeHandler method, we check the value of the IsBool variable. If it is true, it means that the user has typed in a value that is not present in the data source. In this case, we set the Cancel property of the ChangeEventArgs to true to prevent the value from being changed. We also set the ComboValue property to the previous value, which is stored in the TempValue property.
Finally, we set the IsBool variable to false and update the TempValue property to the current value of the combo box.
Hi.
First of all, thank you for your quick response.
1)
I realized that when the user writes something that is not in the list, the values of args.ItemData.ID and args.ItemData.Text are the same. So, why the following code does not work ?
private void ValueChangeHandler(ChangeEventArgs<string, GameFields> args)
{
if (args.Value != null && args.ItemData.ID != args.ItemData.Text )
{
this.ID = args.ItemData.ID;
this.Text = args.ItemData.Text;
}
else
{
this.ID=
args.PreviousItemData.ID
;
this.Text= args.PreviousItemData.Text ;
args.Cancel = true;
}
}
2) The combo is inside a form which has a submit button. I'd like to select a value or write it down in the combo and confirm by pressing Enter as it happens with DropDownList . Instead, when I do that, the submit event is triggered. Is there a workaround?
|
Query 1: I realized that when the user writes something that is not in the list, the values of args.ItemData.ID and args.ItemData.Text are the same. So, why the following code does not work ?
The Syncfusion ComboBox component has built-in support that allows the entry of a custom value when the option the user searched for is not available in the pop-up list. When a custom value is entered, the Text and Value properties are set to the same value as the entered text. However, if you want to restrict the custom value entry, you can set the AllowCustom property to false. This will disable the entry of custom values in the ComboBox component.
Documentation: https://blazor.syncfusion.com/documentation/combobox/custom-value
|
|
Query 2: The combo is inside a form which has a submit button. I'd like to select a value or write it down in the combo and confirm by pressing Enter as it happens with DropDownList . Instead, when I do that, the submit event is triggered. Is there a workaround?
You can refer to the Syncfusion forums shared below regarding your requirement.
|
