Implementing Syncfusion ASP.NET Core ComboBox
Component Overview
The ComboBox is a powerful dropdown control that combines:
- User-friendly selection with searchable/filterable options
- Data binding support for local arrays and remote data sources
- Rich customization through templates and styling
- Advanced features like grouping, sorting, virtual scrolling, and cascading
- Accessibility built-in for keyboard navigation and screen readers
- ASP.NET Core integration via Tag Helper syntax
Key Capabilities:
- Type-ahead/autocomplete with filtering
- Custom values (allowing user-entered data not in list)
- Data grouping and sorting
- Dropdown templates for list items, headers, footers
- Remote data binding with DataManager
- Virtual scrolling for large datasets
- RTL (right-to-left) support
- WCAG 2.1 AA compliance
Documentation and Navigation Guide
Read the following references based on your needs:
Getting Started
📄 Read: references/getting-started.md
- Installation and NuGet package setup
- Adding ComboBox to your ASP.NET Core project
- Minimal working example with Tag Helper syntax
- CSS/script imports and configuration
- Running your first ComboBox
Data Binding
📄 Read: references/data-binding.md
- Binding local array data (strings and objects)
- Binding remote data via DataManager
- Mapping complex data structures
- Custom value support
- OData and Web API integration
Filtering & Search
📄 Read: references/filtering-and-search.md
- Enabling autocomplete and filtering
- Search as user types
- Changing filter type (contains, startsWith, endsWith)
- Case-sensitive vs insensitive filtering
- Setting minimum character threshold
- Remote filtering from server
Templates & Customization
📄 Read: references/templates-and-customization.md
- Item templates for list display
- Header and footer templates
- Group header customization
- CSS class customization
- Theme customization with CSS variables
- Popup height/width configuration
Grouping & Sorting
📄 Read: references/grouping-and-sorting.md
- Grouping items by category
- Sorting in ascending/descending order
- Custom sort functions
- Combining grouping with sorting
- Group header styling
Autofill & Autocomplete
📄 Read: references/autofill-and-autocomplete.md
- Enable autofill for faster data entry
- Autocomplete as user types
- Combine autofill with filtering
- Keyboard handling for suggestions
- Performance with large datasets
Popup Resizing
📄 Read: references/popup-resize.md
- Enable user-resizable popup
- Set initial width/height
- Persist resized dimensions
- Responsive resize behavior
- Resize handle styling
Advanced Features
📄 Read: references/advanced-features.md
- Creating cascading ComboBoxes
- Virtual scrolling for large datasets
- Keyboard navigation (Tab, Enter, Arrow keys)
- Accessibility attributes (ARIA labels)
- RTL (right-to-left) support
- Custom validation
- Event handling (change, selecting, select, filtering)
Quick Start Example
Here's a minimal ComboBox setup in ASP.NET Core:
html
<!-- In _Layout.cshtml or Index.cshtml -->
@{
ViewData["Title"] = "ComboBox Example";
List<string> sports = new List<string> { "Cricket", "Badminton", "Basketball", "Tennis" };
}
<ejs-combobox id="games" dataSource="@sports" placeholder="Select a sport"></ejs-combobox>
With data binding:
html
@{
var data = new List<object>
{
new { Id = 1, Text = "Microsoft", Code = "US" },
new { Id = 2, Text = "Google", Code = "US" },
new { Id = 3, Text = "Apple", Code = "US" }
};
}
<ejs-combobox id="countries"
dataSource="@data"
fields-text="Text"
fields-value="Id"
placeholder="Select a company">
</ejs-combobox>
How-To Guides
Quick Autofill
Use autofill for faster user input with autocomplete suggestions:
html
<ejs-combobox autofill="true" allowFiltering="true"></ejs-combobox>
Resizable Popup
Let users resize the dropdown popup for better visibility:
html
<ejs-combobox allowResize="true" popupWidth="400px" popupHeight="300px"></ejs-combobox>
Common Patterns
Pattern 1: Filtered Search
Enable filtering so users can search while typing:
html
<ejs-combobox id="combobox"
dataSource="@data"
allowFiltering="true"
placeholder="Type to search">
</ejs-combobox>
Pattern 2: Cascading ComboBoxes
Second ComboBox data depends on first selection. See advanced-features.md for complete example.
Pattern 3: Custom Value Entry
Allow users to enter values not in the list:
html
<ejs-combobox id="combobox"
allowCustom="true"
dataSource="@data">
</ejs-combobox>
Pattern 4: Grouped Data
Group items by category:
html
<ejs-combobox id="combobox"
dataSource="@data"
fields-groupBy="Category"
fields-text="Name">
</ejs-combobox>
Key Properties
| Property | Type | Purpose |
|---|
| array or DataManager | Items to display in dropdown |
| string | Which field to display as label |
| string | Which field to use as selected value |
| string | Hint text when empty |
| bool | Enable search/filter as you type |
| bool | Allow user to enter values not in list |
| string | Field to group items by |
| Ascending/Descending | Sort order of items |
| string | Height of dropdown (e.g., "300px") |
| string | Width of dropdown |
| bool | Prevent user input, only allow selection |
| bool | Enable/disable the control |
Common Use Cases
- Selecting from a list of countries/cities → Use data binding + optional grouping
- Searching through large datasets → Use filtering + virtual scrolling
- Creating dependent dropdowns → Use cascading pattern (see advanced features)
- Displaying categorized items → Use grouping and custom templates
- Matching API response data → Use DataManager with fields mapping
- Building accessible forms → Use ARIA attributes (see advanced features)
Next Steps:
- Start with Getting Started to install and set up
- Move to Data Binding for connecting your data
- Explore Advanced Features for complex scenarios
For issues or troubleshooting, check individual reference files for gotchas and edge cases.