ComboBox - Selection with Checkboxes

select
Isolate this demo as a stand-alone application

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.

<%@ 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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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 ID="RadComboBox1" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="true"
                    Width="250" 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 ID="Button1" runat="server" Text="Get Checked Items" OnClick="Button1_Click" />
            </div>
            <asp:Literal ID="itemsClientSide" runat="server" />
        </div>
    </telerik:RadAjaxPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?