Default Check Box List

This example demonstrates the Bootstrap 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. Each item within a Check Box List is represented by a BootstrapListEditItem object.

ASPXCopy 
<dx:BootstrapCheckBoxList runat="server">
    <Items>
        <dx:BootstrapListEditItem Text="WinForms" Value="WinForms" />
        <dx:BootstrapListEditItem Text="ASP.NET" Value="ASP.NET" Selected="true" />
        <dx:BootstrapListEditItem Text="ASP.NET MVC" Value="ASP.NET MVC" Selected="true" />
        <dx:BootstrapListEditItem Text="WPF" Value="WPF" />
    </Items>
</dx:BootstrapCheckBoxList>

Repeat Columns

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

ASPXCopy 
<dx:BootstrapCheckBoxList runat="server" RepeatColumns="2">
    <Items>
        <dx:BootstrapListEditItem Text="WinForms" Value="WinForms" />
        <dx:BootstrapListEditItem Text="ASP.NET" Value="ASP.NET" Selected="true" />
        <dx:BootstrapListEditItem Text="ASP.NET MVC" Value="ASP.NET MVC" Selected="true" />
        <dx:BootstrapListEditItem Text="WPF" Value="WPF" />
    </Items>
</dx:BootstrapCheckBoxList>

Badges

Badges contain supplementary information about items and can display an icon and/or text. Use the BootstrapListEditItem.Badge property and the corresponding object's settings to configure an item badge:

  • Badge.Text - Specifies the text in the badge.
  • Badge.CssClass - Specifies the name of a CSS class applied to the badge element.
ASPXCopy 
<dx:BootstrapCheckBoxList runat="server" Caption="Select ranges($):">
    <Items>
        <dx:BootstrapListEditItem Value="0-250"  Badge-Text="30" Badge-CssClass="bg-warning"/>
        <dx:BootstrapListEditItem Value="250-500" Selected="true"  Badge-Text="152" Badge-CssClass="bg-success" />
        <dx:BootstrapListEditItem Value="500-750" Selected="true" Badge-Text="25" Badge-CssClass="bg-warning"/>
        <dx:BootstrapListEditItem Value="750-1000" Badge-Text="0" />
        <dx:BootstrapListEditItem Value="1000+" Badge-Text="3" Badge-CssClass="bg-danger" />
    </Items>
</dx:BootstrapCheckBoxList>
Screen Size
Color Themes
Demo QR Code