Default Check Box List

This example demonstrates theBootstrap Check Box List editor with default settings. The Bootstrap Check Box List editor is a check box group that allows an end-user to select multiple items. Its content can be generated dynamically by binding the editor to a data source. Use the Items method to declare Check Box List item.

@(Html.DevExpress()
    .BootstrapCheckBoxList("checkBoxListDefault")
    .Items(items => {
        items.Add()
            .Text("WinForms")
            .Value("WinForms");
        items.Add()
            .Text("ASP.NET")
            .Value("ASP.NET")
            .Selected(true);
        items.Add()
            .Text("ASP.NET MVC")
            .Value("ASP.NET MVC")
            .Selected(true);
        items.Add()
            .Text("WPF")
            .Value("WPF");
    }))

Repeat Columns

The RepeatColumns method specifies the number of columns displayed within the Check Box List editor.

@(Html.DevExpress()
    .BootstrapCheckBoxList("checkBoxListRepeatColumns")
    .RepeatColumns(2)
    .Items(items => {
        items.Add()
            .Text("WinForms")
            .Value("WinForms");
        items.Add()
            .Text("ASP.NET")
            .Value("ASP.NET")
            .Selected(true);
        items.Add()
            .Text("ASP.NET MVC")
            .Value("ASP.NET MVC")
            .Selected(true);
        items.Add()
            .Text("WPF")
            .Value("WPF");
    })
)

Model Binding

The Check Box List control's content can be dynamically generated by binding the editor to a model. When items are retrieved from the model, item characteristics such as the displayed text and value are obtained from specific data fields. These data fields can be specified either manually using the TextField and ValueField methods or the Check Box List control can determine them automatically if data items contain fields named "Text" and "Value". Use the Bind method to assign a model to the control.

You can obtain the Check Box List value on the controller side by wrapping the control with an HTML form element and submitting form data. To obtain all selected items, make sure that the model object has an enumerable data type.

@model IEnumerable<string>
<form action="@(Url.RouteUrl("components", new { DemoKey = "Editors-CheckBoxList" }))#CheckBoxListModelBinding" method="post">
    @(Html.DevExpress()
          .BootstrapCheckBoxList("languages")
          .Bind(ProgrammingLanguages.KnownLanguages)
          .Value(Model)
          .RepeatColumns(3))
    @(Html.DevExpress()
          .BootstrapButton("submit")
          .Text("Submit")
          .UseSubmitBehavior(true))
</form>
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class EditorsController : Controller {
        public IActionResult CheckBoxListModelBinding() {
            var languages = ProgrammingLanguages.KnownLanguages
                .Skip(1)
                .Take(2);
            return PartialView("CheckBoxList/ModelBinding", languages);
        }
        [HttpPost]
        public IActionResult CheckBoxListModelBinding(IEnumerable<string> languages) {
            return PartialView("CheckBoxList/ModelBinding", languages);
        }
    }
}
using System.Collections.Generic;

namespace DevExpress.AspNetCore.Demos {
    public static class ProgrammingLanguages {
        public static readonly string[] KnownLanguages = new string[] {
            "Java", "Perl", "C++", "C#", "F#", "Ruby"
        };
    }
}
Screen Size
Color Themes
Demo QR Code