ListBox

using MvcExplorer.Models;   
using System.Collections.Generic;  
using System.Web.Mvc;
 
namespace MvcExplorer.Controllers
{
    public partial class ListBoxController : Controller
    {
        private readonly ControlOptions _optionModel = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Case Sensitive Search",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "False"}}
            }
        };
        public ActionResult Index(FormCollection collection)
        {                
            IValueProvider data = collection;  
            _optionModel.LoadPostData(data);
            ViewBag.DemoOptions = _optionModel;
            ViewBag.Cities = Cities.GetCities();
            return View();
        }
    }
}

@{
    List<string> cities = ViewBag.Cities;
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
}
 
<div>
    <label>@Html.Raw(Resources.ListBox.Index_SelectAnItem)</label>
    <div class="wj-input" style="margin: 5px 0px">
        <input type="text" id="searchValue" class="wj-form-control" placeholder="@Html.Raw(Resources.ListBox.EnterTextSearch_Text0)" style="width:250px; height: 30px"/>
    </div>
    <div id="list" style="width:250px;height:200px"></div>
</div>
<p>
    <b>@Html.Raw(Resources.ListBox.Index_SearchResult)<span id="lbSelResult"></span></b>
</p>
<p>
    <b>@Html.Raw(Resources.ListBox.Index_SelectedIndex)<span id="lbSelIdx"></span></b>
</p>
<p>
    <b>@Html.Raw(Resources.ListBox.Index_SelectedValue)<span id="lbSelVal"></span></b>
</p>
 
@section Scripts{
<script>
    // selectedIndexChanged event handler
    function selectedIndexChanged(sender) {
 
        // set selectedIndex and selectedValue text
        document.getElementById('lbSelIdx').innerHTML = sender.selectedIndex;
        document.getElementById('lbSelVal').innerHTML = sender.selectedValue;
    }
 
    c1.documentReady(function () {
        document.getElementById("searchValue").addEventListener("keyup", function (e) {
            var listbox = wijmo.Control.getControl('#list');
            listbox.selectedIndex = -1;
            listbox._search = this.value;
            listbox.selectedIndex = listbox._findNext();
 
            var searchValue = document.getElementById("searchValue").value;
            if (searchValue === '') {
                document.getElementById('lbSelResult').innerHTML = null;
                return;
            }
 
            var searchResult;
            if ('@optionsModel.Options["Case Sensitive Search"].CurrentValue' === 'False') {
                searchResult = listbox.itemsSource.items.filter(function (c) {
                    if (c.toLowerCase().indexOf(searchValue.toLowerCase()) == 0) return c;
                });
            } else {
                searchResult = listbox.itemsSource.items.filter(function (c) {
                    if (c.indexOf(searchValue) == 0) return c;
                });
            }
            document.getElementById('lbSelResult').innerHTML = searchResult.join(", ");
        });
    });
</script>
}
 
@(Html.C1().ListBox("#list")
    .Bind(cities).SelectedIndex(0)
    .OnClientSelectedIndexChanged("selectedIndexChanged")
    .CaseSensitiveSearch(Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue))
)
 
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}
 
@section Description{
    @Html.Raw(Resources.ListBox.Index_Text0)
    <br />
    @Html.Raw(Resources.ListBox.CaseSensitiveSearchDescription_Text0)
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Scheduling >

Documents >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Scheduling

Documents

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Overview

Features

Settings

Description