Default ListBox

The Bootstrap List Box control displays a list of items that can be selected by end-users. The control can be bound to data or populated using the Items method. This example demonstrates the Bootstrap List Box control with default settings.

A list item's methods:

@(Html.DevExpress()
    .BootstrapListBox("ListBoxDefault")
    .Value("Item1")
    .Items(items => {
        items.Add()
            .Text("Item1")
            .Value("Item1");
        items.Add()
            .Text("Item2")
            .Value("Item2");
        items.Add()
            .Text("Item3")
            .Value("Item3");
        items.Add()
            .Text("Item4")
            .Value("Item4");
        items.Add()
            .Text("Item5")
            .Value("Item5");
    })
)

Selection via CheckBoxes

If you pass the CheckColumn value to the List Box control's SelectionMode method, 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 a mouse click.

Use the following API to manipulate item selection on the client:

@(Html.DevExpress()
    .BootstrapListBox("SelectionViaCheckBoxesListBox")
    .SelectionMode(ListEditSelectionMode.CheckColumn)
    .Items(items => {
        items.Add()
            .Text("Item1")
            .Value("Item1")
            .Selected(true);
        items.Add()
            .Text("Item2")
            .Value("Item2");
        items.Add()
            .Text("Item3")
            .Value("Item3")
            .Selected(true);
        items.Add()
            .Text("Item4")
            .Value("Item4");
        items.Add()
            .Text("Item5")
            .Value("Item5");
    })
)

Badges

The List Box 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 method does not affect templated items.

@(Html.DevExpress()
    .BootstrapListBox("BadgesListBox")
    .Caption(".NET Controls")
    .Rows(4)
    .Items(items => {
        items.Add()
            .Value("WinForms")
            .Badge(badge =>
                badge.Text("160+"));
        items.Add()
            .Value("ASP.NET")
            .Selected(true)
            .Badge(badge =>
                badge.Text("100+"));
        items.Add()
            .Value("ASP.NET MVC")
            .Badge(badge =>
                badge.Text("65+"));
        items.Add()
            .Value("WPF")
            .Badge(badge =>
                badge.Text("110+"));
    })
)

Data Binding

The List Box control’s content can be dynamically generated by binding the editor to a model. On retrieving items from the model, 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 methods or the List Box control can obtain them automatically if provided data items contains fields named “Text” and “Value”. Use the Bind method to assign a model to the control.

@inject WorldCitiesContext WorldCities
@model Country
@(Html.DevExpress()
    .BootstrapListBox("DataBindingListBox")
    .TextField("CountryName")
    .ValueField("CountryId")
    .ValueType(typeof(int))
    .Bind(WorldCities.Countries)
    .Value(Model.CountryId)
)
Screen Size
Color Themes
Demo QR Code