This is a migrated thread and some comments may be shown as answers.

Multiple MultiSelect RadComboBox in one page,only one works

1 Answer 80 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 23 Feb 2011, 11:28 PM
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";

        }
        
    }
}          
         

1 Answer, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 01 Mar 2011, 05:44 PM
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!
Tags
ComboBox
Asked by
Mike
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Share this question
or