Selection in MultiColumn ComboBox
23 Sep 202424 minutes to read
Get selected value
Retrieve the selected value from the MultiColumn ComboBox component during the ValueChange event by utilizing the ValueChangeEventArgs.Value 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; } // 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 object list corresponding to the selected value in the ValueChange event by utilizing 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
To associate a 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
You can 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 is triggered when the value of the MultiColumn ComboBox component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value.
@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 activated whenever a value is chosen in the DropDownList component. You can access the relevant arguments, including the ValueSelectEventArgs.ItemData. Additionally, you can prevent item selection by setting the ValueSelectEventArgs.Cancel property to true within the event arguments.
@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 the 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
Focus the component programmatically using the FocusAsync public method. It will set focus instantly to the MultiColumn ComboBox component when invoking it.
@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
To prevent the page from reloading when using the MultiColumn ComboBox component inside a form, you can specify the type of the button as “button” by utilizing the HTMLAttributes property. This will prevent the page from reloading when the button is clicked.
@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 will trigger when the component gets focused.
@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 will trigger when focus moves out from 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 !!");
}
}