MultiSelectListBox
MultiSelectListBox
Overview
This sample shows the basic usage of the MultiSelectListBox control.
Features
Checked Items:
- Chai
- Aniseed Syrup
- Chef Anton's Cajun Seasoning
- Chef Anton's Gumbo Mix
- Grandma's Boysenberry Spread
- Queso Cabrales
- Queso Manchego La Pastora
- Konbu
- Tofu
- Genen Shouyu
- Carnarvon Tigers
- Teatime Chocolate Biscuits
- Tunnbröd
- Guaraná Fantástica
- Gumbär Gummibärchen
- Schoggi Schokolade
- Rössle Sauerkraut
- Mascarpone Fabioli
- Geitost
- Sasquatch Ale
- Inlagd Sill
- Gravad lax
- Chartreuse verte
- Boston Crab Meat
- Jack's New England Clam Chowder
- Spegesild
- Chocolade
- Filo Mix
- Perth Pasties
- Tourtière
- Gnocchi di nonna Alice
- Ravioli Angelo
- Escargots de Bourgogne
- Raclette Courdavault
- Camembert Pierrot
- Sirop d'érable
- Tarte au sucre
- Vegie-spread
- Wimmers gute Semmelknödel
- Louisiana Fiery Hot Pepper Sauce
- Louisiana Hot Spiced Okra
- Laughing Lumberjack Lager
- Scottish Longbreads
- Gudbrandsdalsost
- Fløtemysost
- Röd Kaviar
- Rhönbräu Klosterbier
- Lakkalikööri
- Original Frankfurter grüne Soße
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 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); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | @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) } |