MultiSelectListBox
MultiSelectListBox
Overview
This sample shows the basic usage of the MultiSelectListBox control.
Features
Sample
Checked Items:
Settings
Description
The MultiSelectListBox control is an advance ListBox control which supports checkboxes for each item, options for selecting all items and filtering items .
This sample exposes the list of checked items through the checkedItems property.
This sample also set the selection at the item in the middle of view by using SelectedIndex property.
When the filter input is shown, using the Delay property in milliseconds set the delay between when a keystroke occurs and when the search is performed to update the filter.
Using CaseSensitiveSearch determines whether searches performed while the user types should case-sensitive.
This sample exposes the list of checked items through the checkedItems property.
This sample also set the selection at the item in the middle of view by using SelectedIndex property.
When the filter input is shown, using the Delay property in milliseconds set the delay between when a keystroke occurs and when the search is performed to update the filter.
Using CaseSensitiveSearch determines whether searches performed while the user types should case-sensitive.
Source
IndexController.cs
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
using Microsoft.AspNetCore.Http;
using System.Collections.Generic;
namespace MvcExplorer.Controllers
{
public partial class MultiSelectListBoxController : Controller
{
private readonly C1NWindEntities _db;
public MultiSelectListBoxController(C1NWindEntities db)
{
_db = db;
}
private readonly ControlOptions _multiSelectOptions = new ControlOptions
{
Options = new OptionDictionary
{
{"Show Select All Checkbox", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}},
{"Show Filter Input", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}},
{"Case Sensitive Search", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "false"}},
{"Delay Filter", new OptionItem {Values = new List<string> {"500", "1000", "2000"}, CurrentValue = "500"}}
}
};
public ActionResult Index(IFormCollection collection)
{
_multiSelectOptions.LoadPostData(collection);
ViewBag.DemoOptions = _multiSelectOptions;
return View(_db.Products);
}
}
}
Index.cshtml
@model IEnumerable<Product>
@{
ControlOptions optionsModel = ViewBag.DemoOptions;
ViewBag.DemoSettings = true;
}
<div style="overflow: auto">
<div class="col-md-5">
<div id="multiSelectList" style="width:100%;max-width:400px;height:530px; overflow-y: scroll"></div>
</div>
<div class="col-md-7">
<p>
<b>Checked Items:</b>
</p>
<div style="height:500px; overflow-y:auto; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;">
<ul id="checkedItems" class="col-md-5"></ul>
<ul id="checkedItems1" class="col-md-5"></ul>
</div>
</div>
</div>
<c1-multi-select-list-box id="multiSelectList" display-member-path="ProductName" checked-member-path="Discontinued"
show-select-all-checkbox="@Convert.ToBoolean(optionsModel.Options["Show Select All Checkbox"].CurrentValue)"
show-filter-input="@Convert.ToBoolean(optionsModel.Options["Show Filter Input"].CurrentValue)"
checked-items-changed="checkedItemsChanged" selected-index="8"
delay="@Convert.ToInt16(optionsModel.Options["Delay Filter"].CurrentValue)" case-sensitive-search="@Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue)">
<c1-items-source source-collection="Model"></c1-items-source>
</c1-multi-select-list-box>
@section Scripts{
<script>
c1.documentReady(function () {
let multiSelectList = wijmo.Control.getControl("#multiSelectList");
checkedItemsChanged(multiSelectList);
})
// CheckedItemsChanged event handler
function checkedItemsChanged(sender) {
let html = '',
html1 = '',
items = sender.checkedItems,
n = items.length;
if (n > 40) n = n / 2;
else if (n > 20) n = 20;
items.forEach(function(item) {
n--;
if (n >= 0) {
html += "<li>" + item.ProductName + "</li>";
} else {
html1 += "<li>" + item.ProductName + "</li>";
}
});
document.querySelector('#checkedItems').innerHTML = html;
document.querySelector('#checkedItems1').innerHTML = html1;
}
</script>
}
@section Settings{
@await Html.PartialAsync("_OptionsMenu", optionsModel)
}
@section Summary{
@Html.Raw(MultiSelectListBoxRes.Index_Text0)
}
@section Description{
@Html.Raw(MultiSelectListBoxRes.Index_Text1)
@Html.Raw(MultiSelectListBoxRes.Index_Text2)
<br />
@Html.Raw(MultiSelectListBoxRes.Index_Text3)
<br />
@Html.Raw(MultiSelectListBoxRes.Index_Text4)
}
Documentation