Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

ComboBox - Selection with Checkboxes


Checked Items:

RadComboBox fully supports checkboxes, which are displayed next to the RadComboBoxItems. You can enable the checkboxes mode by setting the combobox's CheckBoxes property to "True". With the checkboxes you can 'select' multiple items. The checkbox selection is different from the standard selection of the combobox, so there is actually no single selected item.

Both on the client and the server sides, you can use the get_checkedItems() and CheckedItems properties to get all items, which are checked.

The Text property of the combobox holds the concatenated texts of all checked items. The SelectedValue property is empty because there is no single selected item. You can get the values of all checked items from the aforementioned properties.

The CheckBoxes feature provides functionality for checking all items with one checkbox.
Setting the EnableCheckAllItemsCheckBox property to "true" will display the "Check All" section.

Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.CheckBoxes.DefaultCS"Language="c#"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>ASP.NET ComboBox Demo - Selection with Checkboxes</title>
     <link rel="stylesheet" type="text/css" href="styles.css" />

    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

     <div class="qsf-demo-canvas">
          <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">

               <telerik:RadComboBox ID="RadComboBox1" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="true"
                    Width="300" Label="Select book genres:">
                         <telerik:RadComboBoxItem Text="Arts" />
                         <telerik:RadComboBoxItem Text="Biographies" />
                         <telerik:RadComboBoxItem Text="Children's Books" />
                         <telerik:RadComboBoxItem Text="Computers &amp; Internet" />
                         <telerik:RadComboBoxItem Text="Cooking" />
                         <telerik:RadComboBoxItem Text="History" />
                         <telerik:RadComboBoxItem Text="Fiction" />
                         <telerik:RadComboBoxItem Text="Mystery" />
                         <telerik:RadComboBoxItem Text="Nonfiction" />
                         <telerik:RadComboBoxItem Text="Romance" />
                         <telerik:RadComboBoxItem Text="Science Fiction" />
                         <telerik:RadComboBoxItem Text="Travel" />
               <telerik:RadButton ID="Button1" runat="server" Text="Get Checked Items" OnClick="Button1_Click" />

               <h3>Checked Items:</h3>
               <asp:Literal ID="itemsClientSide" runat="server" />