MultiSelect
MultiSelect
概要
機能
サンプル
設定
説明
このサンプルは、MultiSelect コントロールの基本的な使用方法を示します。
ShowFilterInput: 表示される項目をフィルタするために、コントロールが項目の上に「フィルタ」入力を表示するかどうかをを決定します。
CheckOnFilter: フィルタテキストが変更されたときに、MultiSelectListBox がすべてのフィルタされた項目を自動的に選択するかどうかを決定します。
CaseSensitiveSearch プロパティをtrueに設定した場合、検索では大文字と小文字が区別されます。
Delay:キーストロークが発生してから検索が実行されてフィルタが更新されるまでの遅延(ミリ秒単位)を取得または設定します。このプロパティは、ShowFilterInputプロパティがtrueに設定されている場合にのみ役立ちます。このプロパティのデフォルト値は500ミリ秒です。
ソース
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 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(FormCollection collection) { IValueProvider data = collection; _multiSelectOptions.LoadPostData(data); 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(Resources.MultiSelect.Index_Text0)</label> @(Html.C1().MultiSelect() .Name("countries") .Id("multiselect") .Bind(countries) .Placeholder(Resources.MultiSelect.Index_Placeholder) .FilterInputPlaceholder(Resources.MultiSelect.Index_FilterInputPlaceholder) .HeaderFormat(Resources.MultiSelect.Index_HeaderFormat) .ShowFilterInput(Convert.ToBoolean(optionsModel.Options["Show Filter Input"].CurrentValue)) .CheckOnFilter(Convert.ToBoolean(optionsModel.Options["Check On Filter"].CurrentValue)) .OnClientCheckedItemsChanged("checkedItemsChanged") .CaseSensitiveSearch(Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue)) ) <label>@Html.Raw(Resources.MultiSelect.Index_SelectResults)</label> <div id="result"></div> </div> @section Settings{ @Html.Partial("_OptionsMenu", optionsModel) <label style="font-weight:normal;margin-top:10px;">@Html.Raw(Resources.MultiSelect.Delay_Text0)</label> @(Html.C1().InputNumber().Min(0).Max(10000).Step(100).Value(500).Format("n0").Width(200).OnClientValueChanged("delayChanged")) } @section Description{ <p>@Html.Raw(Resources.MultiSelect.Index_Text1)</p> <p>@Html.Raw(Resources.MultiSelect.Index_Text2)</p> <p>@Html.Raw(Resources.MultiSelect.Index_Text3)</p> <p>@Html.Raw(Resources.MultiSelect.CaseSensitiveSearchDescription_Text0)</p> <p>@Html.Raw(Resources.MultiSelect.Delay_Text1)</p> }
マニュアル