Value Binding in MultiSelect

1 Nov 20249 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 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 MultiSelectFieldSettings.Value

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

CSHTML

@using Syncfusion.Blazor.DropDowns

@foreach (var SelectedValue in MultiValue)
{
<p>MultiSelect value is:<strong>@SelectedValue</strong></p>
}

<SfMultiSelect TValue="string[]" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@MultiValue" DataSource="@Country" Width="300px">
    <MultiSelectFieldSettings Value="Name" ></MultiSelectFieldSettings>
</SfMultiSelect>

@code {

    public string[] MultiValue { get; set; } = new string[] {"Australia" };

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

Text and value

The MultiSelect MultiSelectFieldSettings.Value and MultiSelectFieldSettings.Text properties point to the corresponding names of the model. The MultiSelectFieldSettings.Value mapped to the component maintains the unique value of the item in the data source, and the MultiSelectFieldSettings.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 MultiSelect 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

Primitive type binding

The MultiSelect 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 MultiSelect.

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

CSHTML

@using Syncfusion.Blazor.DropDowns

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

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

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

CSHTML

@using Syncfusion.Blazor.DropDowns


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

@code {
public int?[] ComboBoxValue { get; set; } = new int?[] { 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

<SfMultiSelect TValue="Games[]" TItem="Games" Width="300px" Placeholder="Select games" DataSource="@LocalData" @bind-Value="SelectedGames">
    <MultiSelectFieldSettings Value="ID" Text="Name"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {

public Games[] SelectedGames { get; set; } = new Games[] { 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 MultiSelect component. The following code helps you to get a string value from the enumeration data.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="Values[]" TItem="string" Placeholder="Select countries" Width="300px" DataSource="@EnumValues" @bind-Value="SelectedValues">
</SfMultiSelect>

@code {

public string[] EnumValues = Enum.GetNames(typeof(Values));
public Values[] SelectedValues { get; set; } = new Values[] { 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

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

@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 MultiSelect 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 MultiSelect component

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

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

@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 MultiSelect component with the required TValue and TItem in the respective razor components.

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

[Index.razor]

RAZOR

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

@code{
    public string[] value { get; set; } = new string[] { "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

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

@code{

public int?[] value { get; set; } = new int?[] { 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"},
    };
}