Multiple Select and Multiple ColumnTelerik RadComboBox

[Noha]

Dear all 

I follow this demo, to buiuld a Multi Column RadComboBox and It works.
http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multicolumncombo/defaultcs.aspx

But now I want to apply Multiple Select with Multi Column RadComboBox

Can anyone help me in that issue ?

Best Regards

[Noha]

I do it Allhmd lillah

This demo helps me
http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx

Thank u Telerik Team for those great demos

[Paul Yerre]

I have implmenetd a checkboxescombobox  like the example on this page http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/templates/defaultcs.aspx  

But having issues adding multiple checkedcomboboxes to one page.   How do i modify the javascript to accomodate multiple  controls of this type.  Do i have to create a separate javascript function for each checkedcombobox? ie onCheckBoxClick(chk)


CHECKEDCOMBOBOX #1
                            <cc1:checkedradcombobox ID="RadComboBoxCustomer" runat="server" EmptyMessage="All Types"
                                HighlightTemplatedItems="true" AllowCustomText="false" Width="240px"
                                OnClientDropDownClosed="onDropDownClosing" AutoPostBack="True">
                                <ItemTemplate>
                                    <div onclick="StopPropagation(event)" class="combo-item-template">
                                        <asp:CheckBox runat="server" ID="chk1" Checked="true" ToolTip='<%#Eval("CustomerId")%>'
                                            onclick="onCheckBoxClick(this)" />
                                        <asp:Label runat="server" ID="Label7" AssociatedControlID="chk1"> <%#Eval("Name")%>  </asp:Label>
                                    </div>
                                </ItemTemplate>
                            </cc1:checkedradcombobox>
            
CHECKEDCOMBOBOX #2
                            <cc1:checkedradcombobox ID="RadComboBoxSites" runat="server" EmptyMessage="All Types"
                                HighlightTemplatedItems="true" AllowCustomText="false" Width="240px" Enabled="false" OnClientDropDownClosed="onDropDownClosing">
                                <ItemTemplate>
                                    <div onclick="StopPropagation(event)" class="combo-item-template">
                                        <asp:CheckBox runat="server" ID="chk1" Checked="true" ToolTip='<%#Eval("CustomerId")%>'
                                            onclick="onCheckBoxClick(this)" />
                                        <asp:Label runat="server" ID="Label8" AssociatedControlID="chk1"> <%#Eval("Name")%>  </asp:Label>
                                    </div>
                                </ItemTemplate>
                            </cc1:checkedradcombobox>





 <script type="text/javascript">
            /* <![CDATA[ */
            var cancelDropDownClosing = false;

            function StopPropagation(e) {
                //cancel bubbling
                e.cancelBubble = true;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
            }

            function onDropDownClosing() {
                cancelDropDownClosing = false;
            }

            function onCheckBoxClick(chk) {
                var combo = $find("<%= RadComboBox1.ClientID %>");  //how can i get it the refer to the correct name using the chk input
                //prevent second combo from closing
                cancelDropDownClosing = true;
                //holds the text of all checked items
                var text = "";
                //holds the values of all checked items
                var values = "";
                //get the collection of all items
                var items = combo.get_items();
                //enumerate all items
                for (var i = 0; i < items.get_count(); i++) {
                    var item = items.getItem(i);
                    //get the checkbox element of the current item
                    var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");
                    if (chk1.checked) {
                        text += item.get_text() + ",";
                        values += item.get_value() + ",";
                    }
                }
            }


            //this method removes the ending comma from a string
            function removeLastComma(str) {
                return str.replace(/,$/, "");
            }


            function OnClientDropDownClosingHandler(sender, e) {
                //do not close the second combo if
                //a checkbox from the first is clicked
                e.set_cancel(cancelDropDownClosing);
            }
            /* ]]> */
        </script>

[Simon]

Hello Paul Yerre,

You can throw away the hard-coded ID by using a function that extracts the parent Item from the CheckBox element; then you can get the parent RadComboBox directly. Below is an example showing the helper function and its usage:

function extractItemFromDomElement(element, itemTypeName) {
    while (element && element.nodeType !== 9) {
        if (element._item && (element._itemTypeName === itemTypeName))
            return element._item;

        element = element.parentNode;
    }

    return null;
}

function onCheckBoxClick(chk)
{
    var parentItem = extractItemFromDomElement(chk, "Telerik.Web.UI.RadComboBoxItem");
    var combo = parentItem.get_parent();
    //...
}

I hope this helps.

Regards,
Simon
the Telerik team