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 System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class MultiSelectListBoxController : Controller { private C1NWindEntities db = new C1NWindEntities(); 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(FormCollection 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> @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> } @(Html.C1().MultiSelectListBox("#multiSelectList") .Bind(Model) .DisplayMemberPath("ProductName") .CheckedMemberPath("Discontinued") .ShowSelectAllCheckbox(Convert.ToBoolean(optionsModel.Options["Show Select All Checkbox"].CurrentValue)) .ShowFilterInput(Convert.ToBoolean(optionsModel.Options["Show Filter Input"].CurrentValue)) .OnClientCheckedItemsChanged("checkedItemsChanged") .SelectedIndex(8) .CaseSensitiveSearch(Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue)) .Delay(Convert.ToInt16(optionsModel.Options["Delay Filter"].CurrentValue)) ) @section Settings{ @Html.Partial("_OptionsMenu", optionsModel) } @section Summary{ @Html.Raw(Resources.MultiSelectListBox.Index_Text0) } @section Description{ @Html.Raw(Resources.MultiSelectListBox.Index_Text1) @Html.Raw(Resources.MultiSelectListBox.Index_Text2) <br /> @Html.Raw(Resources.MultiSelectListBox.Index_Text3) <br /> @Html.Raw(Resources.MultiSelectListBox.Index_Text4) }
Documentation