Blazor MultiSelect Dropdown Example - Data Binding
This example demonstrates the MultiSelect component's comprehensive data-binding support across both local and remote data sources. It illustrates selection from suggestion lists, initial remote loading behavior, and compatibility with a variety of collection types for flexible integration in Blazor applications.
Data binding features:
- Select items from the suggestion list by clicking items rendered by the MultiSelect component.
- A loader icon appears during initial remote data retrieval to indicate background activity.
- Supported data types include Array, ObservableCollection, ExpandoObject, DynamicObject, and DataManager.
DataManager configuration:
- DataManager.Url – the service endpoint used for data retrieval.
- DataManager.Adaptor – the adaptor used to format requests and responses (ODataAdaptor is the default).
Adaptor options:
- UrlAdaptor – use for generic remote services.
- ODataAdaptor – for OData endpoints.
- ODataV4Adaptor – for OData V4 endpoints.
- WebApiAdaptor – for ASP.NET Web API services.
- WebMethodAdaptor – for direct web method calls.
Demonstrated data-binding types:
- Local Data – Sports collection.
- Remote Data – Customer data via DataManager.
- ObservableCollection – Colors data.
- ExpandoObject – Vehicles data.
- DynamicObject – Customers data.
The sample demonstrates both synchronous and asynchronous retrieval patterns, enabling developers to observe loader behavior while data is fetched from remote endpoints. It also shows how different collection types map to the component's item model, supporting scenarios such as observable updates, dynamic object shapes, and strongly typed arrays for static lists.
Configuration details demonstrate how DataManager properties control request formatting, paging, and adaptor behavior without changing component markup. Use the listed adaptor links to select the adaptor that matches your service protocol, and consult the linked documentation for examples and sample code. Anchor elements include aria-label attributes to improve screen-reader semantics when navigating to API pages.
See also