Multiple Select and Multiple ColumnTelerik RadComboBox

4 posts, 0 answers
  1. Noha
    Noha avatar
    30 posts
    Member since:
    Sep 2010

    Posted 09 Nov 2010 Link to this post

    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
  2. Noha
    Noha avatar
    30 posts
    Member since:
    Sep 2010

    Posted 09 Nov 2010 Link to this post

    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
  3. Paul Yerre
    Paul Yerre avatar
    7 posts
    Member since:
    Mar 2006

    Posted 17 Nov 2010 Link to this post

    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>
  4. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 18 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top