<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    
        <script type="text/javascript">
            var supressDropDownClosing = false;
            
            function OnClientDropDownClosing(sender, eventArgs)
            {
                eventArgs.set_cancel(supressDropDownClosing);
            }
            
            function OnClientSelectedIndexChanging(sender, eventArgs)
            {
                eventArgs.set_cancel(supressDropDownClosing);
            }
            
            function OnClientDropDownOpening(sender, eventArgs)
            {
                supressDropDownClosing = true;
            }
            
            function OnClientBlur(sender)
            {
                supressDropDownClosing = false;
                
                sender.toggleDropDown();
            }
                
            function checkboxClick()
            {            
                collectSelectedItems();
            }
            
            function getItemCheckBox(item)
            {
                //Get the 'div' representing the current RadComboBox Item.
                var itemDiv = item.get_element();
                
                //Get the collection of all 'input' elements in the 'div' (which are contained in the Item).
                var inputs = itemDiv.getElementsByTagName("input");
                
                for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++)
                {   
                    var input = inputs[inputIndex];
                    
                    //Check the type of the current 'input' element.
                    if (input.type == "checkbox")
                    {
                        return input;
                    }
                }
                
                return null;
            }
            
            function collectSelectedItems()
            {
                var combo = $find("<%= RadComboBox1.ClientID %>");
                //alert(combo);
                var items = combo.get_items();
                
                var selectedItemsTexts = "";
                var selectedItemsValues = "";
                
                var itemsCount = items.get_count();
                
                for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++)
                {
                    var item = items.getItem(itemIndex);
                   
                    var checkbox = getItemCheckBox(item);
                    
                    //Check whether the Item's CheckBox) is checked.
                    if (checkbox.checked)
                    {
                        selectedItemsTexts += item.get_text() + ", ";
                        selectedItemsValues += item.get_value() + ", ";
                    }
                }

                selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);
                selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);
                
                //Set the text of the RadComboBox with the texts of the selected Items, separated by ','.
                combo.set_text(selectedItemsTexts);

                //Set the comboValue hidden field value with values of the selected Items, separated by ','.
                document.getElementById("comboValue").value = selectedItemsValues;
                
                if (selectedItemsValues == "")
                {
                    combo.clearSelection();
                }
            }
        </script>
      
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <input type="hidden" id="comboValue" value="" runat="server" />
            <telerik:RadComboBox 
                runat="server" 
                ID="RadComboBox1" 
                AllowCustomText="true"
                HighlightTemplatedItems="true"
                OnClientDropDownOpening="OnClientDropDownOpening"
                OnClientDropDownClosing="OnClientDropDownClosing"
                OnClientSelectedIndexChanging="OnClientSelectedIndexChanging"
                OnClientBlur="OnClientBlur">
                <Items>
                   <telerik:RadComboBoxItem Text="One" Value="One" />
                   <telerik:RadComboBoxItem Text="Two" Value="Two" />
                   <telerik:RadComboBoxItem Text="Three" Value="Three" />
                </Items>
                <ItemTemplate>
                   <asp:CheckBox runat="server" ID="CheckBox" onclick="checkboxClick();"  Text='<%# DataBinder.Eval(Container, "Text") %>' />
                </ItemTemplate>
             </telerik:RadComboBox>
             <br />
             <asp:Button ID="Button1" runat="server" Text="Check Text and Value" OnClick="OnButton1_Click" />
             <br />
             RadComboBox Text: <asp:Label ID="Label1" runat="server"></asp:Label>
             <br />
             RadComboBox Value: <asp:Label ID="Label2" runat="server"></asp:Label>
        </div>
    </form>
</body>
</html>
