Xojo Documentation 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.

Events

CellClick

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

SelectionChanged

Called when the row selection has changed.

Properties

AlternateRowColor, PrimaryRowColor

Used to specify the background colors of rows.

CellTag

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

ColumnCount

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.

HasHeading

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

Heading

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

List

Provides access to the first column of data.

ListIndex

Identifies the currently selected row.

RowCount

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.

Methods

AddRow

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

Cell

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.

DeleteAllRows

Removes all the rows from the List Box.

InsertRow

Adds a row at the specified position.

RemoveRow

Removes the specified row.

RowTag

Used to assign a tag value to the specified row.

Selected

Indicates if the specified row is selected.

Usage

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

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

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
Next
Next

// 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