Default ListBox

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.

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

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.

<dx:BootstrapListBox runat="server" SelectionMode="CheckColumn">
    <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:

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

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>

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>
Screen Size
Color Themes
Demo QR Code