ListBox Overview

The ListBox control displays a list of items which may contain plain text or HTML, and allows users to select items with the mouse or the keyboard. It has a nice search as-you-type feature.

You can populate a ListBox using an array of strings or you can use an array of objects, in which case the displayMemberPath property determines which object property is displayed on the list. And use the selectedIndex property to determine which item is currently selected.

To display items that contain HTML rather than plain text, set the isContentHtml property to true.

The ListBox control supports the following keyboard commands:

Example: Creates a ListBox control and populates it using an object array which has information about countries. The displayMemberPath property is set to 'country' field to display the country name in the ListBox.

HTML

<div style="width:250px;" id="theListBox"></div>

Javascript

onload = function() {
import * as wjInput from '@mescius/wijmo.input';
import { getData } from './data';

function init() {
    var theListBox = new wjInput.ListBox('#theListBox', {
        displayMemberPath: 'country',
        itemsSource: getData()
    });
}

Binding to HTML content

Example: Create a ListBox control that lists the links to various Grapecity Products using an array of anchor tags(html<a>) and setting the isContentHtml property to true.

HTML

<label style="font-size:30px;" for="theListBox">Grapecity Products</label>
<br/>
<div style="width:250px;" id="theListBox"></div>

Javascript

import * as wjInput from '@mescius/wijmo.input';

function init() {

  // ListBox
  var theListBox = new wjInput.ListBox('#theListBox', { isContentHtml: true,
    itemsSource: getData(),
    maxHeight: 200,
    selectedIndex: -1
  });

	// list of Grapecity product pages
  function getData() {
	  return ['<a href="https://developer.mescius.com/en/#product-wj">Javascript</a>',
    '<a href="https://developer.mescius.com/en/#product-sp">Spreadsheets</a>',
    '<a href="https://developer.mescius.com/en/#product-ar">Reports</a>',
    '<a href="https://developer.mescius.com/en/#product-dx">Document APIs</a>',
    '<a href="https://developer.mescius.com/en/#product-c1">.Net, Xamarin</a>',
    ];
  }
}