New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Selection with Checkboxes

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ 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>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
        <div class="demo-container size-medium">
            <div class="combobox-wraper">
                <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" 
                    Width="400" Label="Select book genres:">
                    <Items>
                        <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" />
                    </Items>
                </telerik:RadComboBox>
                <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" Text="Get Checked Items" OnClick="Button1_Click"  />
            </div>
            <asp:Literal ID="itemsClientSide" runat="server" />
        </div>
    </telerik:RadAjaxPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance