Multiselect
The Multiselect control displays a list of predefined values a user can select multiple values from.
Default Behavior
Demonstrates the default behavior of the Multiselect control.
The Multiselect control displays a list of predefined values a user can select multiple values from.
new ac.dropdowns.Multiselect(
{
placeholder: "Pick Your Favorite Sports"
},
"#cntlMultiselect"
);<select id="cntlMultiselect">
<option value="item01">Baseball</option>
<option value="item02">Basketball</option>
<option value="item03">Football</option>
<option value="item04">Golf</option>
<option value="item05">Hockey</option>
<option value="item06">Pickleball</option>
<option value="item07">Rugby</option>
<option value="item08">Soccer</option>
<option value="item09">Swimming</option>
<option value="item10">Tennis</option>
</select>/* Local Data Binding */
new ac.dropdowns.Multiselect(
{
dataStore: localData,
placeholder: "Pick Your Favorite Sports"
},
"#cntlLocalDataBinding"
);
/* Remove Data Binding */
new ac.dropdowns.Multiselect(
{
dataStore: new ac.data.DataStore({
url: "https://localhost:7223/odata/sports",
adaptor: new ac.data.ODataV4Adaptor(),
crossDomain: false
}),
query: new ac.data.Query().select(["Id", "Name"]).take(10),
fields: { value: "Name" },
placeholder: "Pick Your Favorite Sports"
},
"#cntlRemoteDataBinding"
);<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Local Data</label>
<div class="col-lg-8">
<input id="cntlLocalDataBinding" />
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Remote Data</label>
<div class="col-lg-8">
<input id="cntlRemoteDataBinding" />
</div>
</div>
</div>const localData = [
{ text: "Baseball", id: 1 },
{ text: "Basketball", id: 2 },
{ text: "Football", id: 3 },
{ text: "Golf", id: 4 },
{ text: "Hockey", id: 5 },
{ text: "Pickleball", id: 6 },
{ text: "Rugby", id: 7 },
{ text: "Soccer", id: 8 },
{ text: "Swimming", id: 9 },
{ text: "Tennis", id: 10 }
];ac.dropdowns.Multiselect.Inject(ac.dropdowns.CheckboxSelection);
new ac.dropdowns.Multiselect(
{
dataStore: sports,
placeholder: "Pick Your Favorite Sports",
mode: "CheckBox",
showSelectAll: true,
showDropDownIcon: true,
filterBarPlaceholder: "Search countries"
},
"#cntlMultiselect"
);<input id="cntlMultiselect" />const sports = [
{ text: "Baseball", id: 1 },
{ text: "Basketball", id: 2 },
{ text: "Football", id: 3 },
{ text: "Golf", id: 4 },
{ text: "Hockey", id: 5 },
{ text: "Pickleball", id: 6 },
{ text: "Rugby", id: 7 },
{ text: "Soccer", id: 8 },
{ text: "Swimming", id: 9 },
{ text: "Tennis", id: 10 }
];