RadListBox in RadComboBox Item Template

1 posts, 1 answers
  1. Answer
    Telerik Admin
    Telerik Admin avatar
    1696 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