RadListBox in RadComboBox Item Template

1 posts, 1 answers
  1. Answer
    Telerik Admin
    Telerik Admin avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 05 Nov 2009 Link to this post


    RadControls version

    RadControls for ASP.NET AJAX Q1 2009+

    .NET version


    Visual Studio version


    programming language


    browser support

    all browsers supported by RadControls for ASP.NET AJAX

    The projects shows how to combine a RadListBox inside a RadComboBox Item Template to achieve multiple selection drop down.

    <telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="true">
        <telerik:RadComboBoxItem Text="" />
        <div id="div1">
            <telerik:RadListBox ID="RadListBox1" runat="server" Width="100%" SelectionMode="Multiple"
                <telerik:RadListBoxItem Text="Item 1" Value="1" />
                <telerik:RadListBoxItem Text="Item 2" Value="2" />
                <telerik:RadListBoxItem Text="Item 3" Value="3" />
        <script type="text/javascript">
            var div1 = document.getElementById("div1");
            div1.onclick = stopPropagation;

    The Text and Value of *all* selected Items are stored respectively as Text of the ComboBox and as Value of the *only* ComboBox Item. Each time an Item is selected/deselected in the ListBox, these two are updated to reflect the selection.

    function onSelectedIndexChanged(sender, eventArgs) {
    function updateComboBox(listBox) {
        var text = "";
        var value = "";
        var items = listBox.get_selectedItems();
        for (var i = 0; i < items.length; i++) {
        var item = items[i];
        //Check whether the Item's 'selected' attribute is set to true.
        if (item.get_selected()) {
            text += item.get_text() + ", ";
            value += item.get_value() + ", ";
        text = text.substring(0, text.length - 2);
        value = value.substring(0, value.length - 2);
        var comboBox = $find("RadComboBox1");
        //Set the text of the RadComboBox to the texts of the selected Items, separated by ','.
        //Set the value of the RadComboBox to values of the selected Items, separated by ','.

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.