ListBox

ListBox

Overview

This sample shows the basic usage of the ListBox control. When Case Sensitive Search is true, the user types are searched as case-sensitive The VirtualizationThreshold property allow to enable/disable the vitualization.

Features

Sample SourceDocumentation

Select an item

Search result:

SelectedIndex: 0

SelectedValue: Abidjan

Number of real elements corresponding Virtualization Threshold: 100

Settings

Description

This sample shows the basic usage of the ListBox control.

When Case Sensitive Search is true, the user types are searched as case-sensitive

The VirtualizationThreshold property allow to enable/disable the vitualization. The default value for this property is a very big number, meaning virtualization is disabled. To enable virtualization, set its value to 0 or a positive number. Note that the vitualization makes a huge difference in performance when the ListBox contains a large number of items (say 1,000 or so).

IndexController.cs Index.cshtml

using Microsoft.AspNetCore.Http; 
using Microsoft.AspNetCore.Mvc; 
using MvcExplorer.Models; 
using System.Collections.Generic; 
  
namespace MvcExplorer.Controllers 
{ 
    public partial class ListBoxController : Controller 
    { 
        private readonly ControlOptions _options = new ControlOptions 
        { 
            Options = new OptionDictionary 
            { 
                {"Case Sensitive Search",new OptionItem{ Values = new List<string> { "True", "False"}, CurrentValue = "False"}}, 
                {"Virtualization Threshold",new OptionItem{ Values = new List<string> { "Disable" , "0" }, CurrentValue = "Disable"}} 
            } 
        }; 
        public ActionResult Index(IFormCollection collection) 
        { 
            _options.LoadPostData(collection); 
            ViewBag.DemoOptions = _options; 
            ViewBag.Cities = Cities.GetCities(); 
            return View(); 
        } 
    } 
} 

@{ 
    ControlOptions optionsModel = ViewBag.DemoOptions; 
    ViewBag.DemoSettings = true; 
    List<string> cities = ViewBag.Cities; 
    string vThreshold = optionsModel.Options["Virtualization Threshold"].CurrentValue; 
} 
  
<div> 
    <label>@Html.Raw(ListBoxRes.Index_Text0)</label> 
    <div class="wj-input" style="margin: 5px 0px"> 
        <input type="text" id="searchValue" class="wj-form-control" placeholder="@Html.Raw(ListBoxRes.EnterTextSearch_Text0)" style="width:250px; height: 30px" /> 
    </div> 
    <div id="list" style="width:250px;height:200px"></div> 
</div> 
<p><b>@Html.Raw(ListBoxRes.Index_SearchResult) <span id="lbSelResult"></span></b></p> 
<p><b>@Html.Raw(ListBoxRes.Index_SelectedIndex) <span id="lbSelIdx"></span></b></p> 
<p><b>@Html.Raw(ListBoxRes.Index_SelectedValue) <span id="lbSelVal"></span></b></p> 
<p><b>@Html.Raw(ListBoxRes.Index_VirtualizationThreshold) <span id="lbSelVThreshold"></span></b></p> 
  
<c1-list-box id="list" selected-index="0" selected-index-changed="selectedIndexChanged"
             case-sensitive-search="@Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue)"
             virtualization-threshold="@vThreshold.Equals("Disable") ? int.MaxValue : int.Parse(vThreshold)"> 
    <c1-items-source source-collection="@cities"></c1-items-source> 
</c1-list-box> 
  
@section Settings{ 
    @await Html.PartialAsync("_OptionsMenu", optionsModel) 
} 
  
@section Description{ 
    <p>@Html.Raw(ListBoxRes.Index_Text1)</p> 
    <p>@Html.Raw(ListBoxRes.CaseSensitiveSearchDescription_Text0)</p> 
    <p>@Html.Raw(ListBoxRes.Index_Text2)</p> 
} 
  
@section Scripts{ 
    <script>
        function selectedIndexChanged(sender) { 
            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(", "); 
            }); 
  
            document.getElementById('lbSelVThreshold').innerHTML = document.getElementById("list").childNodes.length; 
        }); 
    </script>
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Overview

Features

Settings

Description