Value Binding in ComboBox

4 Nov 202511 minutes to read

Value binding is the process of passing values between a component and its parent. There are two methods for binding values:

• bind-Value binding
• bind-Index binding

Bind value binding

The value binding can be achieved by using the @bind-Value attribute and it supports string, int, enum, bool and complex types. If the component value has been changed, it will affect all places where you bind the variable for the @bind-value attribute. In order for the binding to work properly, the value assigned to the @bind-value attribute should be based on the field mapped to ComboBoxFieldSettings.Value

• TValue: Specifies the value type of the component.
• TItem: Specifies the type of each item in the data source.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox TValue="string" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@DropVal" DataSource="@Country" Width="300px">
    <ComboBoxFieldSettings Value="Code" Text="Name"></ComboBoxFieldSettings>
</SfComboBox>

@code {

    public string DropVal = "Canada";

    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Countries> Country = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
    };
}

Index value binding

The Index value binding is achieved by using the @bind-Index attribute and it supports int and int nullable types. By using this attribute, bind the values respective to its index.

CSHTML

@using Syncfusion.Blazor.DropDowns


<SfComboBox TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Index="@ComboIndex">
    <ComboBoxFieldSettings Value="ID" Text="Game"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    private int? ComboIndex { get; set; } = 1;

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Game= "American Football" },
    new Games() { ID= "Game2", Game= "Badminton" },
    new Games() { ID= "Game3", Game= "Basketball" },
    new Games() { ID= "Game4", Game= "Cricket" },
    new Games() { ID= "Game5", Game= "Football" },
    new Games() { ID= "Game6", Game= "Golf" },
    new Games() { ID= "Game7", Game= "Hockey" },
    new Games() { ID= "Game8", Game= "Rugby"},
    new Games() { ID= "Game9", Game= "Snooker" },
    new Games() { ID= "Game10", Game= "Tennis"},
  };
}

Primitive type binding

The ComboBox has support to load array of primitive data such as strings and numbers. Bind the value of primitive data to the @bind-Value attribute of the ComboBox.

The following code demonstrates array of string as datasource to the ComboBox component.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox TValue=string TItem=string Placeholder="Select a game" DataSource="@data" @bind-Value="@ComboBoxValue" Width="300px"></SfComboBox>

@code {
    public string ComboBoxValue { get; set; } = "Cricket";
    public string[] data = { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Hockey" };
}

The following code demonstrates an array of int as the data source for the ComboBox component.

CSHTML

@using Syncfusion.Blazor.DropDowns


<SfComboBox TValue=int? TItem=int? Placeholder="Select a game" DataSource="@data" Width="300px" @bind-Value="@ComboBoxValue"></SfComboBox>

@code {
    public int? ComboBoxValue { get; set; } = 1022;
    public int?[] data = { 1011, 1022, 1044, 1066 };
}

Object binding

Bind object data to the @bind-Value attribute by setting TValue to the appropriate type. Ensure the field mapped to ComboBoxFieldSettings.Value corresponds to the bound value.

In the following example, the Name column is mapped to the Value field.

CSHTML

@using Syncfusion.Blazor.DropDowns


<SfComboBox TValue="Games" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@ComboBoxValue">
    <ComboBoxFieldSettings Value="ID" Text="Name"></ComboBoxFieldSettings>
</SfComboBox>

@code {

    public Games ComboBoxValue { get; set; } = new Games() { ID = "Game4", Name = "Cricket" };

    public class Games
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Name= "American Football" },
        new Games() { ID= "Game2", Name= "Badminton" },
        new Games() { ID= "Game3", Name= "Basketball" },
        new Games() { ID= "Game4", Name= "Cricket" },
        new Games() { ID= "Game5", Name= "Football" },
        new Games() { ID= "Game6", Name= "Golf" },
        new Games() { ID= "Game7", Name= "Hockey" },
        new Games() { ID= "Game8", Name= "Rugby"},
        new Games() { ID= "Game9", Name= "Snooker" },
        new Games() { ID= "Game10", Name= "Tennis"},
    };
}

Enum binding

Bind the enum data to the @bind-Value attribute of ComboBox component. The following code helps you to get a string value from the enumeration data.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfComboBox TValue="Values" TItem="string" Placeholder="e.g. Australia" Width="300px" DataSource="@EnumValues" @bind-Value="@comboVal">
</SfComboBox>

@code {

    public string[] EnumValues = Enum.GetNames(typeof(Values));
    public Values comboVal { get; set; } = Values.Canada;

    public enum Values
    {
        Australia,
        Bermuda,
        Canada,
        Denmark,
        India,
        US
    }
}

Show or hide clear button

Use the ShowClearButton property to specify whether to show or hide the clear button. When the clear button is clicked, the Value, Text, and Index properties are reset to null.

NOTE

If TValue is non-nullable, clearing sets the default value for the type. If TValue is nullable, clearing sets null. For example, if TValue is int, clearing sets 0; if TValue is int?, clearing sets null.

The following sample demonstrates using string as TValue. Clearing the value sets it to null, which is the default for that type.

CSHTML

@using Syncfusion.Blazor.DropDowns;

<SfComboBox TValue="string" TItem="Games" ShowClearButton=true Width="300px" Placeholder="Select a game" DataSource="@LocalData">
    <ComboBoxFieldSettings Value="ID" Text="Game"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    public class Games
    {
        public int? ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= 1, Game= "American Football" },
        new Games() { ID= 2, Game= "Badminton" },
        new Games() { ID= 3, Game= "Basketball" },
        new Games() { ID= 4, Game= "Cricket" },
        new Games() { ID= 5, Game= "Football" },
        new Games() { ID= 6, Game= "Golf" },
        new Games() { ID= 7, Game= "Hockey" },
        new Games() { ID= 8, Game= "Rugby"},
        new Games() { ID= 9, Game= "Snooker" },
        new Games() { ID= 10, Game= "Tennis"},
    };
}

Dynamically change TItem

The TItem type can be changed dynamically by defining the ComboBox data source type with the @typeparam directive. The following example demonstrates changing TItem dynamically with different data sources.

Creating generic combobox component

First, create a ComboBox.razor file as a parent component in the /Pages folder. Add parameter properties for a List and TValue.

RAZOR

@using Syncfusion.Blazor.DropDowns

@typeparam TValue;
@typeparam TItem;

<SfComboBox TValue="TValue" Width="300px" TItem="TItem" @bind-Value="@ComboBoxValue" Placeholder="Please select a value" DataSource="@customData">
    <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    [Parameter]
    public List<TItem> customData { get; set; }
    [Parameter]
    public TValue ComboBoxValue { get; set; }
    [Parameter]
    public EventCallback<TValue> ComboBoxValueChanged { get; set; }
}

Usage of generic component with different type

Render the generic ComboBox component with the required TValue and TItem in the respective Razor components.

Here, the ComboBox component is rendered with TValue as string in /Index.razor and with TValue as nullable int in /Counter.razor.

[Index.razor]

RAZOR

<ComboBox TValue="string" TItem="Games" @bind-ComboBoxValue="@value" customData="@LocalData">
</ComboBox>

@code{
    public string value { get; set; } = "Game1";
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };
}

[Counter.razor]

RAZOR

<ComboBox TValue="int?" TItem="Games" @bind-ComboBoxValue="@value" customData="@LocalData">
</ComboBox>

@code{
    public int? value { get; set; } = 3;
    public class Games
    {
        public int? ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= 1, Text= "American Football" },
        new Games() { ID= 2, Text= "Badminton" },
        new Games() { ID= 3, Text= "Basketball" },
        new Games() { ID= 4, Text= "Cricket" },
        new Games() { ID= 5, Text= "Football" },
        new Games() { ID= 6, Text= "Golf" },
        new Games() { ID= 7, Text= "Hockey" },
        new Games() { ID= 8, Text= "Rugby"},
        new Games() { ID= 9, Text= "Snooker" },
        new Games() { ID= 10, Text= "Tennis"},
    };
}