Multiple MultiSelect RadComboBox in one page,only one works

2 posts, 0 answers
  1. Mike
    Mike  avatar
    1 posts
    Member since:
    Feb 2011

    Posted 23 Feb 2011 Link to this post

    Hello everyone,

    I created a web user control called MultiSelectDropDown using RadComboBox based on the example Telerik.com provided.
    When I drag and drop this control into a web page, It works perfect, My problem is , when the page has 2 or more MultiSelectDropDown ,
    Only the one works, for the rest of them, when I click check box items, the text in combo box always empty. I hope some one can help me out.I appreciate it in advanced. Below is code:
    ASCX code:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MultiSelectDropDown.ascx.cs" Inherits="G2WebFramework.RebillRejectedData.Controls.MultiSelectDropDown" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>



     <style type="text/css">
         .example-panel
    {
        width:352px;
        height: 30px;
        margin: 91px 0 0 68px;
        background: transparent url("Img/background.png") no-repeat 0 0;
    }

    .example-panel ul.combobox-panel
    {
        list-style:none;
        margin:156px 0 0 75px;
        padding:0;
        float:left;
    }

    .example-panel ul.status-panel
    {
        list-style:none;
        padding:0;
        margin:40px 0 0 117px;
        float:left;
    }

    .example-panel ul.status-panel label
    {
        font: 14px 'Segoe UI', Arial, sans-serif;
        color: #fff;
        padding-right: 9px;
    }

    .example-panel ul.status-panel li
    {
        float:left;
        font: 14px 'Segoe UI', Arial, sans-serif;
        color: #ffb400;
        padding-right: 15px;
    }

    * html ul.combobox-panel
    {
        display:inline; /*double margin bug*/
    }

    .example-panel ul.combobox-panel li
    {
        float:left;
    }

    .example-panel ul.combobox-panel li label
    {
        font: 12px 'Segoe UI', Arial;
        color: #fff;
        margin-right: 5px;
        margin-left: 40px;
    }

    .combo-item-template input,
    .combo-item-template label
    {
        vertical-align:top;
    }

    .combo-item-template img
    {
        vertical-align:top;
    }

    .example-panel .rent-button
    {
        float:right;
        width: 73px;
        height:21px;
        background: transparent url('Img/button.png') no-repeat 0 0;
        text-decoration:none;
        color: #000;
        text-align:center;
        line-height:21px;
        margin: 18px 30px 0 auto;
    }
    </style>

    <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 %>");
                    
                    //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() + ",";
                        }
                    }
                    //remove the last comma from the string
                    text = removeLastComma(text);
                    values = removeLastComma(values);
                
                    if (text.length > 0)
                    {
                        //set the text of the combobox
                        combo.set_text(text);
                        combo.set_value(text);
                    }
                    else
                    {
                        //all checkboxes are unchecked
                        //so reset the controls
                        combo.set_text("");
                       
                    }
                }

                //this method hides the nodes of the treeeview depending on
                //the checked items in the first combobox
               

                //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>
            
            <%-- <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all" ControlsToSkip="Scrollbars"></telerik:RadFormDecorator>--%>
                        <telerik:RadComboBox ID="RadComboBox1" runat="server" HighlightTemplatedItems="true"
                                    AllowCustomText="true" Width="131px"    
        OnClientDropDownClosed="onDropDownClosing"  ForeColor="Navy"    
        BorderColor="Navy" AutoPostBack="True"  >
        
       
                                    <ItemTemplate>
                                       <div id="ListDiv" onclick="StopPropagation(event)" class="combo-item-template" runat="server" >
                                            <asp:CheckBox runat="server" ID="chk1" Checked="false" onclick="onCheckBoxClick(this)" BorderColor="Navy"/>
                                            <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1" ForeColor="Navy">

                                               <%# Eval(RadComboBox1.DataTextField) %>

                                            </asp:Label>
                                       </div>
                                    </ItemTemplate>
                          </telerik:RadComboBox>
             
              ____________________________________
    C# code:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace G2WebFramework.RebillRejectedData.Controls
    {
        public partial class MultiSelectDropDown : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {

                    RadComboBox1.DataBind();
                }
                   
            }
            

            //selected checkbox text
            public string sText
            {
                get { return RadComboBox1.Text; }
            }

            public Object DataSource
            {
                get { return RadComboBox1.DataSource; }
                set { RadComboBox1.DataSource = value; }
            }

            public string DataTextField
            {
                get { return RadComboBox1.DataTextField; }
                set { RadComboBox1.DataTextField = value; }
            }
            public string DataValueField
            {
                get { return RadComboBox1.DataValueField; }
                set { RadComboBox1.DataValueField = value; }
            }

          
           
        }
    }             
       

    Testing code:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using G2WebBL.DataMappers.RebillRejectedData;

    namespace G2WebFramework.RebillRejectedData
    {
        public partial class Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {

                    BindData_Company();
                    BindData_LEC();
                }
                    
            }

            internal void BindData_Company()
            {

                var DBObj = new RebillRejectedDataAccess("BOSS_SB");
                var DT = DBObj.SelectCompany();
                MultiSelectDropDown1.DataSource = DT;
                MultiSelectDropDown1.DataTextField = "Company";
                MultiSelectDropDown1.DataValueField = "Company";

            }
            internal void BindData_LEC()
            {
                var DBObj = new RebillRejectedDataAccess("BOSS_SB");
                var DT = DBObj.SelectLEC();
                MultiSelectDropDown2.DataSource = null;
                MultiSelectDropDown2.DataSource = DT;
                MultiSelectDropDown2.DataTextField = "LEC";
                MultiSelectDropDown2.DataValueField = "LEC";

            }
            
        }
    }          
             
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 01 Mar 2011 Link to this post

    Hello Mike ,

    Could you send us a runnable version of your project, via a support ticket, in order to examine what is the cause of your issues?

    Regards,
    Dimitar Terziev
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top