5.20203.748
5.20203.748

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:

Key Combination Action
Up/Down Select the previous/next item
PageUp/Down Select the item one page above or below the selection
Home/End Select the first/last items
Space Toggle the checkbox in the current item (see the checkedMemberPath property)
Other characters Search for items that contain the text typed (multi-character auto-search)

ListBox

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 '@grapecity/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.

ListBox

HTML
<label style="font-size:30px;" for="theListBox">Grapecity Products</label>
<br/>
<div style="width:250px;" id="theListBox"></div>
Javascript
import * as wjInput from '@grapecity/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://www.grapecity.com/en/#product-wj">Javascript</a>',
    '<a href="https://www.grapecity.com/en/#product-sp">Spreadsheets</a>',
    '<a href="https://www.grapecity.com/en/#product-ar">Reports</a>',
    '<a href="https://www.grapecity.com/en/#product-dx">Document APIs</a>',
    '<a href="https://www.grapecity.com/en/#product-c1">.Net, Xamarin</a>',
    ];
  }
}