Value Binding in Dropdown List

16 Jan 202416 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 DropDownListFieldSettings.Value

• TValue - Specifies the type of each list item of the dropdown component.

CSHTML

@using Syncfusion.Blazor.DropDowns

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

@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

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

@code {
    private int? ddlIndex { 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"},
  };
}

Text and value

The DropdownList DropDownListFieldSettings.Value and DropDownListFieldSettings.Text properties point to the corresponding names of the model. The DropDownListFieldSettings.Value mapped to the component maintains the unique value of the item in the data source, and the DropDownListFieldSettings.Text is mapped to display the text in the popup list items for the respective text value.

The following code demonstrates the Value and Text field of the DropDownList component. For instance, the selected item is Badminton (Text Field, this is Game) but the value field holds Game2 (Value Field, this is ID).

CSHTML

@using Syncfusion.Blazor.DropDowns

<p>DropDownList Value is: @DropDownValue</p>

<SfDropDownList TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@DropDownValue">
  <DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    public string DropDownValue { get; set; } = "Game2";
    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 DropDownList 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 DropDownList

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

CSHTML

@using Syncfusion.Blazor.DropDowns

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

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

The following code demonstrates array of int as datasource to the DropDownList component.

CSHTML

@using Syncfusion.Blazor.DropDowns

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

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

Object binding

Bind the Object data to the @bind-Value attribute of the DropdownList component, this is, You can map the class name to TValue.

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

CSHTML

@using Syncfusion.Blazor.DropDowns

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

@code {
    SfDropDownList<Games, Games> DropObj;
    public Games DropDownValue { 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 DropDownList component. The following code helps you to get a string value from the enumeration data.

CSHTML

@using Syncfusion.Blazor.DropDowns;

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

@code{

    public string[] EnumValues = Enum.GetNames(typeof(Values));
    public Values ddlVal { 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;

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

@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 DropDownList 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 dropdownList component

First, create a DropDownList.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;

<SfDropDownList TValue="TValue" Width="300px" TItem="TItem" @bind-Value="@DDLValue" Placeholder="Please select a value" DataSource="@customData">
    <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
</SfDropDownList>

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

Usage of generic component with different type

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

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

[Index.razor]

RAZOR

<DropDownList TValue="string" TItem="Games" @bind-DDLValue="@value" customData="@LocalData">
</DropDownList>

@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

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

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

Two way binding

Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well. The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. To enable two-way binding for the Syncfusion Blazor DropDownList component, you can use the @bind-Value directive to bind the value of the DropDownList

CSHTML

@using Syncfusion.Blazor.DropDowns;

<SfDropDownList ID="Assignee" Placeholder="Select Assignee" TItem="MemberModel" TValue="int?" DataSource="@Members" @bind-Value="@selectedStep.Assignee">

    <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>

</SfDropDownList>

@code {

    public MemberModel selectedStep = new MemberModel();

    public class MemberModel
    {
        public int? Id { get; set; }
        public string Name { get; set; }
        public int? Assignee { get; set; } = 2;
    }

    List<MemberModel> Members = new List<MemberModel>()
    {
        new MemberModel() {Id = 0, Name="John" },
        new MemberModel() {Id = 1, Name="Andrews" },
        new MemberModel() {Id = 2, Name="Robert" },

    };

}

Programmatically clearing value

You can clear the value programmatically by accessing the ClearAsync() method through an instance of the dropdown list. You can bind the click event of a button to the ClearAsync() method. When the button is clicked, it will trigger the ClearAsync() method on the dropdown list, clearing its value.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<button @onclick="Clear">Clear</button>

<SfDropDownList  @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue" >
  <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    SfDropDownList<string, Games> DDLObj;

    public string GameValue { get; set; } = "Game3";

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

    public async Task Clear()
    {
        this.DDLObj.ClearAsync();
    }

}