Value Binding in MultiColumn ComboBox
24 Sep 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
Value binding can be accomplished using the @bind-Value attribute, which supports string, int, enum, bool, and complex types. When the component’s value changes, it will impact all instances where the variable is bound using the @bind-value attribute. For the binding to function correctly, the value assigned to the @bind-value attribute should correspond to the TextField and ValueField mapped to the component.
- TValue - Specifies the type of each list item on the suggestion list.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
@code {
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
public string Availability { get; set; }
public string Category { get; set; }
public double Rating { get; set; }
}
private List<Product> Products = new List<Product>();
private string Value { get; set; } = "Smartphone";
protected override Task OnInitializedAsync()
{
Products = new List<Product>
{
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
new Product { Name = "Keyboard", Price = 39.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.1 },
new Product { Name = "Mouse", Price = 19.99m, Availability = "Out of Stock", Category = "Accessories", Rating = 4.3 },
new Product { Name = "Printer", Price = 89.99m, Availability = "In Stock", Category = "Office Supplies", Rating = 4.2 },
new Product { Name = "Camera", Price = 499.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
new Product { Name = "Speakers", Price = 149.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.5 },
new Product { Name = "Router", Price = 79.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.4 },
new Product { Name = "External Hard Drive", Price = 59.99m, Availability = "In Stock", Category = "Storage", Rating = 4.6 },
new Product { Name = "USB Flash Drive", Price = 9.99m, Availability = "In Stock", Category = "Storage", Rating = 4.2 },
new Product { Name = "Webcam", Price = 29.99m, Availability = "Limited Stock", Category = "Accessories", Rating = 4.1 },
new Product { Name = "Smart TV", Price = 799.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.8 },
new Product { Name = "Projector", Price = 299.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.5 },
new Product { Name = "VR Headset", Price = 349.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.7 },
new Product { Name = "Drone", Price = 599.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
new Product { Name = "Fitness Tracker", Price = 99.99m, Availability = "In Stock", Category = "Wearables", Rating = 4.3 }
};
return base.OnInitializedAsync();
}
}
Index value binding
The Index value binding is accomplished through the @bind-Index attribute, which supports both integer and nullable integer types. This attribute allows you to bind values according to their corresponding index.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox TItem="Product" TValue="string" @bind-Index="@ComboIndex" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
@code {
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
public string Availability { get; set; }
public string Category { get; set; }
public double Rating { get; set; }
}
private List<Product> Products = new List<Product>();
private int? ComboIndex { get; set; } = 2;
protected override Task OnInitializedAsync()
{
Products = new List<Product>
{
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
new Product { Name = "Keyboard", Price = 39.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.1 },
new Product { Name = "Mouse", Price = 19.99m, Availability = "Out of Stock", Category = "Accessories", Rating = 4.3 },
};
return base.OnInitializedAsync();
}
}
Show or hide clear button
Utilize the ShowClearButton property to control the visibility of the clear button. When the clear button is activated, the Value, Text, and Index properties will all revert to null.
NOTE
If the TValue is a non-nullable type, pressing the clear button will reset it to the default value for that data type. Conversely, if TValue is a nullable type, pressing the clear button will set it to null. For instance, if TValue is defined as
int, clearing it will assign a value of 0 to the component, whereas if TValue is defined asint?, it will assign a value of null.
The following example illustrates the use of string as the TValue. Therefore, when the clear button is used, the value will be set to null, as that is the default for that type.
@using Syncfusion.Blazor.MultiColumnComboBox
<SfMultiColumnComboBox TValue="string" TItem="Product" @bind-Value="@Value" ShowClearButton=true DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
@code {
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
public string Availability { get; set; }
public string Category { get; set; }
public double Rating { get; set; }
}
private List<Product> Products = new List<Product>();
private string Value { get; set; } = "Smartphone";
protected override Task OnInitializedAsync()
{
Products = new List<Product>
{
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
};
return base.OnInitializedAsync();
}
}
Dynamically change TItem
The TItem property can be modified dynamically by specifying the datasource type of the MultiColumn ComboBox component using the @typeparam directive. The sample demonstration below illustrates how to dynamically change the TItem with various types of datasources.
Creating generic MultiColumn Combobox component
First, create a MultiColumnComboBox.razor file as a parent component in the /Pages folder. Also, add a Parameter property for a List as <TItem> and TValue.
@using Syncfusion.Blazor.MultiColumnComboBox
@typeparam TValue;
@typeparam TItem;
<SfMultiColumnComboBox TValue="TValue" Width="300px" TItem="TItem" @bind-Value="@ComboBoxValue" Placeholder="Please select a value" DataSource="@customData" ValueField="ID" TextField="Text">
</SfMultiColumnComboBox>
@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 MultiColumn ComboBox component with the required TValue and TItem in the respective razor components.
Here, the MultiColumn ComboBox component with TValue as an int nullable type in the /Index.razor file.
[Index.razor]
<MultiColumnComboBox TValue="int?" TItem="Games" @bind-ComboBoxValue="@value" customData="@LocalData" >
</MultiColumnComboBox>
@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"},
};
}