MultiSelect Data Binding
This article explains the different ways to provide data to a MultiSelect component, the properties related to data binding and their results.
For details on Value Binding and Data Binding, and the differences between them, see the Data Binding vs Value Binding section.
There are two key ways to bind data:
There are also some considerations to keep in mind.
Strings and Value Types
You can data bind the MultiSelect to a collection of string or value type data (such as int, decimal, bool, Guid, and Enum). When you have a concrete list of options for the user to choose from, their string representation is often suitable for display and you do not need special models.
To bind the MultiSelect, you need to:
- provide an
IEnumerable<string>to itsDataproperty, - point the
Valueparameter to aList<string>field.
Data binding an MultiSelect to a simple string data source
Data binding an MultiSelect to a simple number data source
Bind to a Model
You can bind the MultiSelect to a model in your application. This is useful when you have the data in some form already and you don't need to prepare a separate collection of suggestions.
To bind the MultiSelect to a model:
- populate its
Dataproperty with the collection of items you want in the dropdown - set the
ValueFieldand theTextFieldto point to the corresponding fields of the model that contain, sespectively, the value of the options and the string data for them. - point the
Valueparameter to aList<TValue>field in the view-model.
Data binding an MultiSelect to a model
If you are looking for more fields from the view-model that describes the dropdown items, not just the
Value, see the Get model from dropdown KB article and the OnChange event.You may also want to review/join the discussion and Vote for this request: Binding DropDownList Value to complex model
Considerations
The MultiSelect component attempts to infer the type of its model and value based on the provided Data and initial Value. This affects the way its reference is obtained and what happens if you can't provide data or a value.
Missing Value Or Data
In case you cannot provide either of a Value, or Data, or both when the component initializes, you need to set the corresponding type properties to the TItem and TValue properties as shown below.
MultiSelect configuration if you cannot provide Value or Data