How can I help you?
Getting Started with Blazor ComboBox in Blazor WASM App
29 Jun 20267 minutes to read
This section explains how to include the Blazor ComboBox component in a Blazor WebAssembly App using Visual Studio, Visual Studio Code, and the .NET CLI.
Create a new Blazor WebAssembly (Standalone) App
Create a Blazor WebAssembly App using Visual Studio via Microsoft Templates or the Blazor Extension.
Run the following command to create a new Blazor WebAssembly App.
dotnet new blazorwasm -o BlazorApp
cd BlazorAppAlternatively, create a Blazor WebAssembly App using Visual Studio Code via Microsoft Templates or the Blazor Extension, or the C# Dev Kit extension.
Run the following command to create a new Blazor WebAssembly App.
dotnet new blazorwasm -o BlazorApp
cd BlazorAppInstall the required Blazor packages
Install the Syncfusion.Blazor.DropDowns and Syncfusion.Blazor.Themes NuGet packages. All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.
- Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
- Search the required NuGet packages (
Syncfusion.Blazor.DropDownsandSyncfusion.Blazor.Themes) and install them.
Alternatively, you can install the same packages using the Package Manager Console with the following commands.
Install-Package Syncfusion.Blazor.DropDowns -Version 33.2.3
Install-Package Syncfusion.Blazor.Themes -Version 33.2.3Open the terminal and run the following commands.
dotnet add package Syncfusion.Blazor.DropDowns -v 33.2.3
dotnet add package Syncfusion.Blazor.Themes -v 33.2.3Open the command prompt and run the following commands.
dotnet add package Syncfusion.Blazor.DropDowns -v 33.2.3
dotnet add package Syncfusion.Blazor.Themes -v 33.2.3Add import namespaces
After the packages are installed, open the ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.DropDowns namespaces.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.DropDownsRegister the Blazor service
Open the Program.cs file in Blazor WebAssembly App and register the Blazor service.
....
using Syncfusion.Blazor;
....
builder.Services.AddSyncfusionBlazor();
....Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the ~wwwroot/index.html file.
...
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
...
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>Add Blazor ComboBox component
Open a Razor file located in the ~/Pages/*.razor (for example, Home.razor)
and add the Blazor ComboBox component inside the razor file.
@using Syncfusion.Blazor.DropDowns
<SfComboBox TValue="string" TItem="string" Placeholder="Select a game"></SfComboBox>Run the application
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor ComboBox component will render in your default web browser.
Open the terminal and run the following command.
dotnet runOpen the command prompt and run the following command.
dotnet run
Binding data source
After initialization, populate the ComboBox with data using the DataSource property. In the following example, a list of objects (with ID and Text fields) is bound to the ComboBox.
@using Syncfusion.Blazor.DropDowns
<SfComboBox TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
<ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
</SfComboBox>
@code
{
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"},
};
}
Custom values
The ComboBox supports custom values that are not present in the predefined list. This behavior is enabled by the AllowCustom property. In this mode, the typed text is treated as both the display text and the value, and the custom value is posted with the form on submit.
<SfComboBox TValue="string" TItem="Games" AllowCustom=true Placeholder="Select a game" DataSource="@LocalData">
<ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
</SfComboBox>
Configure the popup list
By default, the popup list width automatically adjusts to the ComboBox input width, and the popup height is 350px. The height and width of the popup list can be customized using the PopupHeight and PopupWidth properties.
<SfComboBox TValue="string" TItem="Games"PopupHeight="350px" PopupWidth="350px" Placeholder="Select a game" DataSource="@LocalData">
<ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
</SfComboBox>
NOTE