Web List Box

From Xojo Documentation

A List Box displays a scrolling list of values in one or more columns. The user can use the mouse or the arrow keys to choose an item.

You can change the number of columns of any List Box by changing the ColumnCount property in the Inspector.

You can use a Style object to change the appearance of a List Box in various ways and you can use the PrimaryRowColor and AlternateRowColor properties to apply different background colors to alternate rows.

Use the Set Default Value feature to change the headers of the List Box in the Layout Editor. Click once on the header to select it and then click again on the column you wish to edit. You can also use the Set Default Value feature to add default rows to the List Box.

Web List Box

Commonly used events, properties and methods are listed below. Refer to WebListBox in the Language Reference for the complete list.



Called when the user clicks within a specific cell in the List Box. The Row and Column (zero-based) are supplied as parameters.


Called when the row selection has changed.


AlternateRowColor, PrimaryRowColor

Used to specify the background colors of rows.


Specifies a tag value for a specific cell. As it is a variant, a tag can contain any value.


Use to get or set the number of columns.

ColumnWidth, ColumnWidths

These properties are used to set a specific column width or the width for all the columns.


When True, the List Box has a heading for each column.


If there is a heading, this property is used to specify the heading for a column.


Provides access to the first column of data.


Identifies the currently selected row.


This is the total number of rows.

RowHeight, MinimumRowHeight

Used to get the height of the row and to set what the minimum allowable height should be.



Call this method to add a row (after the last row) and specify the values for the cells in the row.


Used to get or set the values of a specific cell.

CellStyle, ColumnStyle

Use this method to apply a Style to a specific cell or a specific row.


Removes all the rows from the List Box.


Adds a row at the specified position.


Removes the specified row.


Used to assign a tag value to the specified row.


Indicates if the specified row is selected.


This code adds 100 rows to a 5-column listbox:

For row As Integer = 1 To 100
Listbox1.AddRow("Col1", "Col2", "Col3", "Col4", "Col5")

This code takes text entered in two Text Fields (FirstNameField and LastNameField) and adds it to a List Box:

// The WebListBox.AddRow method allows you to pass multiple parameters
// to add values to other columns of the new row
PeopleList.AddRow(FirstNameField.Text, LastNameField.Text)

Cell Appearance

Eddie's Electronics Invoice List

Here's how you can change the appearance of an individual cell when it is clicked. First, create a WebStyle (call it SelectedCellStyle) and set its Background to blue and its Text Color to white (or other colors of your own choosing).

In the SelectionChanged event handler for the ListBox, disable the selected row to prevent the selection from hiding the cell style:

If Me.ListIndex >= 0 Then
// Turn off row selection to allow cell style to appear
Me.Selected(Me.ListIndex) = False
End If

In the CellClick event handler, apply the SelectedCellStyle to the cell that was clicked:

// Clear all cell styles so only the selected cell is styled
For r As Integer = 0 To Me.RowCount - 1
For c As Integer = 0 To Me.ColumnCount - 1
Me.CellStyle(r, c) = Nil

// Set style for selected cell
Me.CellStyle(row, column) = SelectedCellStyle

Example Projects

These example project demonstrates features of the List Box:

  • Examples/Web/Controls/LargeData
  • Examples/Web/Controls/ListBoxDataSource
  • Examples/Web/Controls/ListBoxExample
  • Examples/Web/Controls/SortableListBox
  • Examples/Sample Applications/EddiesElectronics/Web/EEWeb

See Also

WebListBox class; UserGuide:Web UI topic