Value Binding in ComboBox

20 May 202412 minutes to read

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

• 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 type of each list item on the suggestion list.

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 array of int as datasource to 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 the Object data to the @bind-Value attribute of the ComboBox component, this is, You can map the class name to TValue.

In the following example, the Name column has been mapped to the ComboBoxFieldSettings.Value.

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 the TValue is a non nullable type, then while using the clear button, it will set the default value of the data type, and if TValue is set as a nullable type, then while using the clear button it will set to a null value(for example If the TValue is int, then while clearing 0 will set to the component and if TValue is int?, then while clearing null will set to the component)

The following sample demonstrates the string used as TValue. So, if you clear the value using the clear button, it will be set to null as it’s the default value of the respective 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 property can be changed dynamically by defining the datasource type of the ComboBox component with the help of the @typeparam directive. The following sample demonstration explains how to change the TItem dynamically with different type of datasource.

Creating generic combobox component

First, create a ComboBox.razor file as a parent component in the /Pages folder. Also, add a Parameter property for a List as <TItem> 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

Then, render the Generic ComboBox component with the required TValue and TItem in the respective razor components.

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

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