1. Home
  2. Forum
  3. Blazor
  4. How to bind Text property On SfComboBox when AllowCustom = true

How to bind Text property On SfComboBox when AllowCustom = true


I need to edit a text value, and use popup as a suggested list of values.

For example in Address box: __________  suggested list values are "Street 1", "Street 2"....

AllowCustom="true" allows to enter any value in address box, and that is exactly what I need.@bind-Value=@...  works fine if user selects predefined value.

But if user enters "Unknown street" when value will be saved as blank. I need to persist any street address, but @bind-Text is not working 

3 Replies 1 reply marked as answer
SN Sevvandhi Nagulan Syncfusion Team March 10, 2021 01:30 PM UTC


Hi Andrey, 



Greetings from Syncfusion support. 


We checked your query.  We would like to let you know that if you're using the combobox component's custom value support, you can type custom values in the input element. We will also keep the typed custom value in the @bind-Value attribute. We don't need to use the @bind-Text attribute in this case.  Please refer the below code and screenshot.  


<p>@DropVal</p> 
 
<SfComboBox TValue="string" TItem="GameFields" PopupHeight="230px" AllowCustom="true" Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games"> 
    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings> 
</SfComboBox> 
 
 
@code{ 
    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" }, 
        new GameFields(){ ID= "Game5", Text= "Football" }, 
        new GameFields(){ ID= "Game6", Text= "Golf" }, 
        new GameFields(){ ID= "Game7", Text= "Hockey" }, 
        new GameFields(){ ID= "Game8", Text= "Rugby"}, 
        new GameFields(){ ID= "Game9", Text= "Snooker" }, 
        new GameFields(){ ID= "Game10", Text= "Tennis"}, 
     }; 
    public string DropVal = "Game3"; 
 
} 


 

If the information provided above does not help you, please provide additional information such as use case requirement for using @bind-Text to provide the exact solution at our end. 



Regards, 
Sevvandhi N 


MA Mr Andrey Voronov March 15, 2021 10:18 AM UTC

I use calculated field in ComboBoxFieldSettings, if you add  Title field to GameFields :

public class GameFields
{
public string ID { get; set; }
public string Text { get; set; }

public string Title => $"{ID} {Text}";
}

then this will not work:

<ComboBoxFieldSettings Text="Title" Value="ID"></ComboBoxFieldSettings>


SN Sevvandhi Nagulan Syncfusion Team March 16, 2021 12:24 PM UTC

Hi Andrey, 



We checked the provided code example. To set the custom value to the component, you will need to use the getter and setter methods. We will get the custom value and assign it to the variable of @bind-Value. Please see the updated code below. 


<p>@DropVal</p> 
 
<SfComboBox TValue="string" TItem="GameFields" PopupHeight="230px" Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games"> 
    <ComboBoxFieldSettings Text="Title" Value="ID"></ComboBoxFieldSettings> 
</SfComboBox> 
 
 
@code { 
    public class GameFields 
    { 
        public string ID { get; set; } 
        public string Text { get; set; } 
        public string _Title; 
        public string  Title 
        { 
            get 
            { 
                _Title = $"{ID} {Text}"; 
                return _Title; 
            } 
            set 
            { 
                _Title = value; 
            } 
        } 
 
    } 
    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" }, 
        new GameFields(){ ID= "Game5", Text= "Football" }, 
        new GameFields(){ ID= "Game6", Text= "Golf" }, 
        new GameFields(){ ID= "Game7", Text= "Hockey" }, 
        new GameFields(){ ID= "Game8", Text= "Rugby"}, 
        new GameFields(){ ID= "Game9", Text= "Snooker" }, 
        new GameFields(){ ID= "Game10", Text= "Tennis"}, 
     }; 
    public string DropVal = "Game3"; 
 
} 

 
Screenshot: 

 

Please find the sample below. 




Please check the above suggestion and get back to us if you need further assistance. 


Regards, 
Sevvandhi N 



Marked as answer
Loader.
Up arrow icon