Default List Box

This example demonstrates the Bootstrap List Box control with default settings. The Bootstrap List Box control displays a list of items that can be selected by end-users. In this demo, it is allowed to select only one item at a time and initial selection is set with the BootstrapListBox.SelectedIndex property. The control can be bound to a DataSource or populated using the Items collection.

• BootstrapListEditItem.Value - gets/sets a value for a specific item.
• BootstrapListEditItem.Text - specifies text for an item. The text can be different than a value.
• BootstrapListEditItem.IconCssClass - specifies a custom icon for an item.
• BootstrapListEditItem.Selected - specifies whether an item is selected.

<dx:BootstrapListBox runat="server" SelectedIndex="0" >
    <Items>
        <dx:BootstrapListEditItem Text="Item1" Value="Item1" />
        <dx:BootstrapListEditItem Text="Item2" Value="Item2" />
        <dx:BootstrapListEditItem Text="Item3" Value="Item3" />
        <dx:BootstrapListEditItem Text="Item4" Value="Item4" />
        <dx:BootstrapListEditItem Text="Item5" Value="Item5" />
    </Items>
</dx:BootstrapListBox>

Selection via Check Boxes

When the List Box control's SelectionMode property is set to CheckColumn, the List Box displays a column of check boxes indicating the selection status of list items. In this mode, multiple items can be selected within the editor using the mouse click.

• BootstrapListBox.SelectedItems / BootstrapListBox.SelectedIndices - gets List Box' selected items or indices on the server side.
• BootstrapClientListBox.GetSelectedItems / BootstrapClientListBox.SelectItems - manipulates selected items on the client side.
• BootstrapClientListBox.GetSelectedIndices / BootstrapClientListBox.SelectIndices - gets/sets selected indices on the client side.

When the CheckColumn selection mode is enabled, end-users can select all items using the "Select All" check box at the top of the list box. To enable this feature, set the ListBox control's EnableSelectAll property value to true.

<dx:BootstrapListBox runat="server" SelectionMode="CheckColumn" EnableSelectAll="true">
    <Items>
        <dx:BootstrapListEditItem Text="Item1" Value="Item1" Selected="true" />
        <dx:BootstrapListEditItem Text="Item2" Value="Item2" />
        <dx:BootstrapListEditItem Text="Item3" Value="Item3" Selected="true" />
        <dx:BootstrapListEditItem Text="Item4" Value="Item4" />
        <dx:BootstrapListEditItem Text="Item5" Value="Item5" />
    </Items>
</dx:BootstrapListBox>

Badges

The ListBox can display supplementary information for any item within a badge. A badge can display a text, an icon or both. Use the following API to configure badges on the server side:

• BootstrapListEditItem.Badge - Gets or sets the item badge on the server.

The methods listed below allow you to manipulate badges on the client:

• BootstrapClientListBox.GetItemBadgeText - Gets the text of an item's badge.
• BootstrapClientListBox.SetItemBadgeText - Sets the text an item's badge.
• BootstrapClientListBox.GetItemBadgeIconCssClass - Gets the icon CSS class of an item's badge.
• BootstrapClientListBox.SetItemBadgeIconCssClass - Sets the icon CSS class of an item's badge.

Note that the BootstrapListEditItem.Badge property does not affect templated items.

<dx:BootstrapListBox runat="server" Caption=".NET Controls" Rows="4">
    <Items>
        <dx:BootstrapListEditItem Value="WinForms">
            <Badge Text="160+" />
        </dx:BootstrapListEditItem>
        <dx:BootstrapListEditItem Value="ASP.NET" Selected="true">
            <Badge Text="100+" />
        </dx:BootstrapListEditItem>
        <dx:BootstrapListEditItem Value="ASP.NET MVC">
            <Badge Text="65+" />
        </dx:BootstrapListEditItem>
        <dx:BootstrapListEditItem Value="WPF">
            <Badge Text="110+" />
        </dx:BootstrapListEditItem>
    </Items>
</dx:BootstrapListBox>

Data Binding

The List Box control's content can be dynamically generated by binding the editor to a data source. On retrieving items from the data source, item characteristics such as the text and value are obtained from specific data fields. These data fields can be either defined manually using the TextField and ValueField properties or the List Box control can obtain them automatically provided that the data fields in the data source are named the same as corresponding characteristics ("Text", "Value").

<dx:BootstrapListBox runat="server" DataSourceID="CountriesDataSource"
    TextField="CountryName" ValueField="CountryName" SelectedIndex="0">
</dx:BootstrapListBox>
<ef:EntityDataSource ID="CountriesDataSource" runat="server" ContextTypeName="DevExpress.Web.Demos.WorldCitiesContextSL"
    EntitySetName="Countries" OrderBy="it.CountryName">
</ef:EntityDataSource>

Filtering

The List Box control allows filtering items by entering text in the editor displayed above the list. The list is automatically updated during typing and items that do not match entered text are filtered out. The FilteringSettings property provides access to settings related to the filtering functionality. The following settings are available:

• ShowSearchUI - Enables the filter editor.
• CustomEditorID - Specifies the ID of a DevExpress editor that is used to set the filtering criterion.
• EditorNullText - Gets or sets the string displayed in the filter editor when the editor's value is null.
• EditorNullTextDisplayMode - Gets or sets a value indicating when null text should be displayed in the list box's filter editor.
• MinLength - Gets or sets the minimum number of characters an end-user should enter into the editor before filtering is performed.
• Delay - Gets or sets the time interval between the time when a user starts typing within the list box's filter editor and filtering is applied.
• EnableAnimation - Gets or sets the value that specifies whether a specific animation effect is used when the filter editor is invoked/hidden if the "Select All" mode is enabled.
• UseCompactView - Gets or sets a value specifying whether the list box's search UI is displayed in Compact mode.

<dx:BootstrapListBox runat="server" DataSourceID="CountriesDataSource"
    TextField="CountryName" ValueField="CountryName">
    <FilteringSettings ShowSearchUI="true" EditorNullTextDisplayMode="Unfocused" />
</dx:BootstrapListBox>

Load Items on Callbacks

In this example, the List Box operates in callback mode. In this mode, list items that are not currently displayed within the editor are dynamically loaded when you scrolls the list. The callback mode makes the first page load much faster, since only a few items need to be loaded initially.

• EnableCallbackMode - specifies whether or not the List Box operates in callback mode
• CallBackPageSize - defines the number of items to be obtained from the server each time it's required

<dx:BootstrapListBox runat="server" DataSourceID="CountriesDataSource"
    TextField="CountryName" ValueField="CountryName" SelectedIndex="0" CallbackPageSize="25" EnableCallbackMode="true">
</dx:BootstrapListBox>

Multi Column

The List Box can display data across multiple columns. To enable multi-column mode, add data source fields to the BootstrapListBox.Fields collection and set the BootstrapListBox.EnableMultiColumn property to true. Each added field is rendered as a List Box column. To customize a column's caption, width, and tooltip, use the field's SettingsMultiColumn property.

<dx:BootstrapListBox runat="server" DataSourceID="WWICountriesDataSource" EnableMultiColumn="true"  ValueField="CountryID">
    <Fields>
        <dx:BootstrapListBoxField FieldName="IsoAlpha3Code">
            <SettingsMultiColumn Caption="Code" ToolTip="IsoAlpha3Code" Width="50px" />
        </dx:BootstrapListBoxField>
        <dx:BootstrapListBoxField FieldName="CountryName" />
        <dx:BootstrapListBoxField FieldName="Region" />
        <dx:BootstrapListBoxField FieldName="Subregion" />
    </Fields>
</dx:BootstrapListBox>

Screen Size

Color Themes

Demo QR Code