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

Load items on Demand

The List Box control can dynamically load items when an end-user scrolls the list, which is useful when you need to display many list items. Enabling this functionality reduces the initial page loading time since it only loads the number of items the CallbackPageSize specifies.

To load List Box' items on demand, specify the AJAX request routing using the MapRoute method (available through the Routes method). Use the CallbackPageSize method to set the number of items loaded initially and returned from the server on each AJAX request.

@model int
@inject WorldCitiesContext WorldCities
@(Html.DevExpress()
    .BootstrapListBox("ListBoxWithLoadedItemsOnDemand")
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("ListBoxLoadItemsOnDemand")
            .Controller("Editors")))
    .CallbackPageSize(25)
    .TextField("CountryName")
    .ValueField("CountryId")
    .ValueType(typeof(int))
    .Bind(WorldCities.Countries)
    .Value(Model)
)
using System.Linq;
using System.Threading;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class EditorsController : Controller {
        public EditorsController(WorldCitiesContext worldCitiesContext) {
            WorldCitiesContext = worldCitiesContext;
        }
        protected WorldCitiesContext WorldCitiesContext { get; }
        public IActionResult ListBoxLoadItemsOnDemand() {
            if(Request.IsAjaxRequest())
                Thread.Sleep(1000);
            return View("ListBox/ListBoxLoadItemsOnDemand", WorldCitiesContext.Countries.First().CountryId);
        }
    }
}
Screen Size
Color Themes
Demo QR Code