Select2MultiSelect
in namespace DotVVM.Bootstrap5.Select2.Controls
Usage & Scenarios
Extends the Bootstrap 5 MultiSelect control with the Select2 widget, which provides searchable multiple selection.
Install the DotVVM.Controls.Bootstrap5.Select2 package and register it in DotvvmStartup.cs after Bootstrap 5:
config.AddBootstrap5Configuration();
config.AddBootstrap5Select2Configuration();
The control uses the bs prefix and supports all properties of MultiSelect.
Sample 1: Searchable Multiple Selection
Bind SelectedValues to a collection of item values. Users can search for and select multiple options in the Select2 widget.
<bs:Select2MultiSelect SelectedValues="{value: SelectedTechnologies}"
DataSource="{value: Technologies}"
ItemTextBinding="{value: Name}"
ItemValueBinding="{value: Id}" />
<p>Selected technologies: <strong>{{value: SelectedTechnologies}}</strong></p>using DotVVM.Framework.ViewModel;
using System.Collections.Generic;
namespace DotvvmWeb.Views.Docs.Controls.bootstrap5_select2.Select2MultiSelect.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public List<Technology> Technologies { get; set; } = new List<Technology>
{
new Technology { Id = 1, Name = "C#" },
new Technology { Id = 2, Name = "DotVVM" },
new Technology { Id = 3, Name = "TypeScript" },
new Technology { Id = 4, Name = "Bootstrap" }
};
public List<int> SelectedTechnologies { get; set; } = new List<int> { 1, 2 };
public class Technology
{
public int Id { get; set; }
public string Name { get; set; }
}
}
}Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static |
|
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates. |
attribute
bindable
|
null |
|
DataSource | Object | Gets or sets the source collection or a GridViewDataSet that contains data in the control. |
attribute
bindable
|
null |
|
Enabled | Boolean | Gets or sets a value indicating whether the control is enabled and can be modified. |
attribute
static value
bindable
|
True |
|
ID | String | Gets or sets the control client ID within its naming container. |
attribute
static value
bindable
|
null |
|
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
static value
bindable
|
True |
|
InnerText | String | Gets or sets the inner text of the HTML element. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children. |
attribute
static value
bindable
|
null |
|
ItemTextBinding | IValueBinding<String> | The expression of DataSource item that will be displayed in the control. |
attribute
bindable
|
null |
|
ItemTitleBinding | IValueBinding | The expression of DataSource item that will be placed into html title attribute. |
attribute
bindable
|
null |
|
ItemValueBinding | IValueBinding | The expression of DataSource item that will be passed to the SelectedValue property when the item is selected. |
attribute
bindable
|
null |
|
SelectedValues | Object | Gets or sets the values of selected items. |
attribute
bindable
|
null |
|
Visible | Boolean | Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control. |
attribute
static value
bindable
|
True |
Events
| Name | Type | Description | |
|---|---|---|---|
 |
SelectionChanged | Command | Gets or sets the command that will be triggered when the selection is changed. |