Data Binding in Blazor ComboBox Component

14 Mar 20222 minutes to read

Data binding can be achieved by using the bind-Value attribute and it supports string, int, Enum, and bool types. If the component value is changed, it will affect all places where the variable is bound for the bind-value attribute.

@using Syncfusion.Blazor.DropDowns

<p>ComboBox value is:<strong>@ComboVal</strong></p>

<SfComboBox Placeholder="e.g. Australia" @bind-Value="@ComboVal" DataSource="@Countries">
    <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>
</SfComboBox>

@code {

    public string ComboVal = "Austarila";

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

        public string Code { get; set; }
    }

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

Index value binding

Index value binding can be achieved by using bind-Index attribute and it supports int and int nullable types. By using this attribute you can bind the values respective to its index.

@using Syncfusion.Blazor.DropDowns

<SfComboBox TValue="string" Placeholder="e.g. Australia" TItem="Country" @bind-Index="@ddlIndex" DataSource="@Countries">
    <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>
</SfComboBox>

@code {

    private int? ddlIndex { get; set; } = 1;

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

        public string Code { get; set; }
    }

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