RadListBox in RadComboBox Item Template

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

    Posted 05 Nov 2009 Link to this post

    Requirements

    RadControls version

    RadControls for ASP.NET AJAX Q1 2009+

    .NET version

    2.0+

    Visual Studio version

    2005/2008

    programming language

    JavaScript

    browser support

    all browsers supported by RadControls for ASP.NET AJAX


    PROJECT DESCRIPTION
    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">
        <Items>
        <telerik:RadComboBoxItem Text="" />
        </Items>
        <ItemTemplate>
        <div id="div1">
            <telerik:RadListBox ID="RadListBox1" runat="server" Width="100%" SelectionMode="Multiple"
            OnClientSelectedIndexChanged="onSelectedIndexChanged">
            <Items>
                <telerik:RadListBoxItem Text="Item 1" Value="1" />
                <telerik:RadListBoxItem Text="Item 2" Value="2" />
                <telerik:RadListBoxItem Text="Item 3" Value="3" />
            </Items>
            </telerik:RadListBox>
        </div>
     
        <script type="text/javascript">
            var div1 = document.getElementById("div1");
            div1.onclick = stopPropagation;
        </script>
     
        </ItemTemplate>
    </telerik:RadComboBox>

    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) {
        updateComboBox(sender);
    }
     
    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 ','.
        comboBox.set_text(text);
         
        //Set the value of the RadComboBox to values of the selected Items, separated by ','.
        comboBox.trackChanges();
        comboBox.get_items().getItem(0).set_value(value);
        comboBox.commitChanges();
    }

Back to Top