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.

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

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="CountriesDataSource2"
    TextField="CountryName" ValueField="CountryName" SelectedIndex="0">
</dx:BootstrapListBox>
<ef:EntityDataSource ID="CountriesDataSource2" 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="CountriesDataSource3"
    TextField="CountryName" ValueField="CountryName" SelectedIndex="0" CallbackPageSize="25" EnableCallbackMode="true">
</dx:BootstrapListBox>
<ef:EntityDataSource ID="CountriesDataSource3" runat="server" ContextTypeName="DevExpress.Web.Demos.WorldCitiesContextSL"
    EntitySetName="Countries" OrderBy="it.CountryName">
</ef:EntityDataSource>
Screen Size
Color Themes
Demo QR Code