Selection in MultiColumn ComboBox
1 Dec 202524 minutes to read
Get selected value
Retrieve the selected value from the Blazor MultiColumn ComboBox during the ValueChange event by using the ValueChangeEventArgs.Value property. This event also provides both the current and previous values.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Inputs
<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" ValueChange="OnValueChange" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
@code {
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; } // New field
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
public void OnValueChange(ValueChangeEventArgs<string, Games> args)
{
Console.WriteLine("The ComboBox Value is: ", args.Value);
}
}Retrieve the full data object corresponding to the selected value in the ValueChange event by using the ValueChangeEventArgs.ItemData property.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Inputs
<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" ValueChange="OnValueChange" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
@code {
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
public void OnValueChange(ValueChangeEventArgs<string, Games> args)
{
Console.WriteLine("The complete data of the selected value is: ", args.ItemData);
}
}Preselected value on OnInitializedAsync
pre-selected value with the MultiColumn ComboBox component, use the @bind-Value attribute. You can set the value property in the OnInitializedAsync lifecycle method. The following example illustrates how to bind the value when the component is initially rendered.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Buttons
<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" @bind-Value="comboBoxValue" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
@code {
public string comboBoxValue { get; set; }
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
protected override async Task OnInitializedAsync()
{
comboBoxValue = "Cricket";
}
}
Programmatically change the selected value
Change the component’s value either programmatically or externally via the component instance using the @ref attribute. The following example illustrates how to update the component’s value when a button is clicked.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Buttons
<div>
<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" @bind-Value="comboBoxValue" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
</div>
<div>
<SfButton Content="Click to change the value" OnClick="OnBtnClick"></SfButton>
</div>
@code {
public string comboBoxValue { get; set; }
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; } // New field
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
public void OnBtnClick()
{
comboBoxValue = "Rugby";
}
}
ValueChange event
The ValueChange event triggers when the value of the Blazor MultiColumn ComboBox changes and returns the necessary arguments, including the current and previously selected values and the selected item data.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Inputs
<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" ValueChange="OnValueChange" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
@code {
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; } // New field
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
public void OnValueChange(ValueChangeEventArgs<string, Games> args)
{
Console.WriteLine("ValueChange event has been triggered !!");
}
}OnValueSelect event
The OnValueSelect event is raised when a value is chosen in the Blazor MultiColumn ComboBox. Access the selected data via ValueSelectEventArgs.ItemData. To prevent selection, set ValueSelectEventArgs.Cancel to true.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Buttons
<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" OnValueSelect="SelectCountry" @bind-Value="comboBoxValue" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
@code {
public string comboBoxValue { get; set; }
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
public void SelectCountry(ValueSelectEventArgs<Games> args)
{
Console.WriteLine("Select event has been triggered !!");
}
}Preselect value with index
Bind the pre-selected value to the component using the @bind-Index attribute. It binds the respective value present in the specified index position of the datasource.
The following sample shows how to bind the index on initial rendering.
@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();
}
}
Focus the next component on selection
Programmatically move focus using the FocusAsync method. This sets focus to the Blazor MultiColumn ComboBox when invoked.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Buttons
<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" PopupClosed="OnClose" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
<SfMultiColumnComboBox TItem="Games" @ref="@multicolumnObj" TValue="string" DataSource="LocalData" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
@code {
public string comboBoxValue { get; set; }
SfMultiColumnComboBox<string, Games> multicolumnObj;
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
public async Task OnClose(object args)
{
Thread tread = new Thread(
async () =>
{
Thread.Sleep(5);
await multicolumnObj.FocusAsync();
}
);
tread.Start();
await Task.CompletedTask;
}
}
Prevent reload on form submit
When using the Blazor MultiColumn ComboBox inside a form, prevent a full page reload by setting the button’s type to "button" through the HTMLAttributes configuration for that button. This ensures clicks do not submit the form unless explicitly intended.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Buttons
<form>
<div>
<label class="example-label">Select a game</label>
<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
</div>
<div class="submit-btn">
<SfButton HtmlAttributes="@TypeChange" IsPrimary="true">Submit</SfButton>
</div>
</form>
@code {
private Dictionary<string, object> TypeChange = new Dictionary<string, object>()
{
{ "type", "button"}
};
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
}Focus event
The Focus event triggers when the component receives focus.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Buttons
<SfMultiColumnComboBox TItem="Games" @ref="@multicolumnObj" TValue="string" Focus="OnFocus" DataSource="LocalData" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
@code {
public string comboBoxValue { get; set; }
SfMultiColumnComboBox<string, Games> multicolumnObj;
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
public void OnFocus()
{
Console.WriteLine("Focus event has been triggered !!");
}
}Blur event
The Blur event triggers when focus moves out of the component.
@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Buttons
<SfMultiColumnComboBox TItem="Games" @ref="@multicolumnObj" TValue="string" Blur="OnBlur" DataSource="LocalData" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>
@code {
public string comboBoxValue { get; set; }
SfMultiColumnComboBox<string, Games> multicolumnObj;
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
public string Category { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};
public void OnBlur()
{
Console.WriteLine("Blur event has been triggered !!");
}
}