MultiSelect
Overview
Features
Sample
Settings
Description
This sample shows the basic usage of the MultiSelect control.
ShowFilterInput: determines whether the control should display a "filter" input above the items to filter the items displayed.
CheckOnFilter: determines whether the MultiSelect should automatically select all the filtered items when the filter text changes.
When Case Sensitive Search is true, the user types are searched as case-sensitive
Delay: determines a period of time, in milliseconds, between when a keystroke occurs and when the search is performed to update the filter. This property is relevant only when the showFilterInput property is set to true. The default value for this property is 500 milliseconds.
Source
IndexController.cs
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
using System.Collections.Generic;
namespace MvcExplorer.Controllers
{
public partial class MultiSelectController : Controller
{
private readonly ControlOptions _multiSelectOptions = new ControlOptions
{
Options = new OptionDictionary
{
{"Show Filter Input", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}},
{"Check On Filter", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}},
{"Case Sensitive Search",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "False"}}
}
};
public ActionResult Index(IFormCollection collection)
{
_multiSelectOptions.LoadPostData(collection);
ViewBag.Countries = Countries.GetCountries();
ViewBag.DemoOptions = _multiSelectOptions;
return View();
}
}
}
Index.cshtml
@{
ControlOptions optionsModel = ViewBag.DemoOptions;
ViewBag.DemoSettings = true;
List<string> countries = ViewBag.Countries;
}
@section Scripts{
<script>
var checkedItemsChanged = function (sender, e) {
var i, result = document.getElementById("result"),
items = sender.checkedItems;
if (result) {
result.innerHTML = "";
}
for (i = 0; i < items.length; i++) {
result.innerHTML += "<span>" + (i + 1) + ". " + items[i] + "<\/span><br>";
}
}
function delayChanged(sender, args) {
var multiselect = wijmo.Control.getControl('#multiselect');
multiselect.delay = sender.value;
}
</script>
}
<div>
<label>@Html.Raw(MultiSelectRes.Index_Text0)</label>
<c1-multi-select id="multiselect" placeholder="@MultiSelectRes.Index_Placeholder" header-format="@MultiSelectRes.Index_HeaderFormat" checked-items-changed="checkedItemsChanged"
filter-input-placeholder="@MultiSelectRes.Index_FilterInputPlaceholder"
show-filter-input="@Convert.ToBoolean(optionsModel.Options["Show Filter Input"].CurrentValue)"
check-on-filter="@Convert.ToBoolean(optionsModel.Options["Check On Filter"].CurrentValue)"
case-sensitive-search="@Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue)">
<c1-items-source source-collection="countries" />
</c1-multi-select>
<label>@Html.Raw(MultiSelectRes.Index_SelectResults)</label>
<div id="result"></div>
</div>
@section Settings{
@await Html.PartialAsync("_OptionsMenu", optionsModel)
<label style="font-weight:normal;margin-top:10px;">@Html.Raw(MultiSelectRes.Delay_Text0)</label>
<c1-input-number min="0" max="10000" step="100" value="500" format="n0" width="200px" value-changed="delayChanged" />
}
@section Description{
<p>@Html.Raw(MultiSelectRes.Index_Text1)</p>
<p>@Html.Raw(MultiSelectRes.Index_Text2)</p>
<p>@Html.Raw(MultiSelectRes.Index_Text3)</p>
<p>@Html.Raw(MultiSelectRes.CaseSensitiveSearchDescription_Text0)</p>
<p>@Html.Raw(MultiSelectRes.Delay_Text1)</p>
}
Documentation