Hi, I have created a user control of RadComboBox with Checkboxes. It has Select All checkbox as HeaderTemplate. All selected values are displayed in the textbox of RadComboBox. It works fine for single instance of user control.

But when I add multiple controls in a page, any checkbox click event refers to last user control added. i.e. Select All, or any checkbox click event refers to last created dropdown. Any help is appreciated.

Here is the code of my user control DropdownControl.ascx

<

script type="text/javascript">  

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 %>");

    //if any item is selected, uncheck select all

    if (AllSelected() == true)    

     {

        var chkall = $get(combo.get_id() + "_Header_SelectAll");

         chkall.checked =

true;

    }

    else

    {

        var chkall = $get(combo.get_id() + "_Header_SelectAll");

         chkall.checked =

false;

     }

//holds the text of all checked items

 var text = "";

//holds the values of all checked items

 var values = "";

var items = combo.get_items();

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 

if (text.length > 0)

 {

//set the text of the combobox

combo.set_text(text);

}

else

{

//all checkboxes are unchecked

//so reset the controls

combo.set_text("");

 }

}

//this method removes the ending comma from a string

function removeLastComma(str)

 {

    return str.replace(/,$/,"");

 }
 

//Check if any one value is selected in drop down 

function AnyOneSelected()

{

var combo = $find("<%=RadComboBox1.ClientID %>");

var items = combo.get_items();

for(var i = 0; i < items.get_count(); i++)

 {

var item = items.getItem(i);

var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");

if (chk1.checked)

{

return true;

 }

 }

return false;

 }

//Check if all the values are selected in drop down

var combo = $find("<%=RadComboBox1.ClientID %>");

var item = items.getItem(i);

return false;

 }

 }

return true;

 }

//Handle Select All click

function selectAllClick(chk)

 {

//if selectAll = true; check All ; otherwise uncheck all

var selectAll = true;

if (AnyOneSelected() == true)

 selectAll =

true;

false;

var text = "";

//holds the values of all checked items

var values = "";

var combo = $find("<%=RadComboBox1.ClientID %>");

var items = combo.get_items();

for(var i = 0; i < items.get_count(); i++)

 {

var item = items.getItem(i);

var chk1 = $get(combo.get_id() + "_i" + i + "_chk1");

if (selectAll)

 chk1.checked =

true;

else

chk1.checked = false;

if (chk1.checked)

{

text += item.get_text() +

"," ;

 values += item.get_value() +

",";

 }

 }

//remove the last comma from the string

if (text.length > 0)

//set the text of the combobox

else

//all checkboxes are unchecked

//so reset the controls
combo.set_text("");

 }

</

script>

 <

div>

<table>

<tr>

<td style="height: 43px">

<telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Vista" AllowCustomText="true"

HighlightTemplatedItems="false" OnClientDropDownClosed="onDropDownClosing">

<HeaderTemplate>

<asp:CheckBox runat="server" ID="SelectAll" onclick="selectAllClick(this)" />

<asp:Label runat="server" ID="hdrLabel" AssociatedControlID="SelectAll">Select All</asp:Label>

</HeaderTemplate>

<ItemTemplate>

<div onclick="StopPropagation(event)" class="combo-item-template">

<asp:CheckBox runat="server" ID="chk1" onclick="onCheckBoxClick(this)" />

<asp:Label runat="server" ID="label1" AssociatedControlID="chk1"><%# DataBinder.Eval(Container, "Text") %></asp:Label>

</div>

</ItemTemplate>

</telerik:RadComboBox>

</td>

</tr>

</table>

 </

div>

The properties are implemented just to bind dropdown to stored procedure. The Select All and everything works fine if I add only one control. But if I add another control dd2, all click events in dd1 refers to dd2.


Web.Reporting.WebCommon.Controls.DropdownControl dd1 = (Web.Reporting.WebCommon.Controls.DropdownControl) LoadControl("~/WebCommon/Controls/DropdownControl.ascx");

 dd1.cs =

ConfigurationManager.ConnectionStrings["CS"].ToString();

 dd1.DataSourceProcedureName =

"uspGetPortfolioAssetType";

 dd1.DataTextField =

"portfolioAssetType";

 dd1.DataValueField =

"portfolioAssetTypeId";

Web.Reporting.WebCommon.Controls.DropdownControl dd2 = (Web.Reporting.WebCommon.Controls.DropdownControl) LoadControl("~/WebCommon/Controls/DropdownControl.ascx");

 dd2.cs =

ConfigurationManager.ConnectionStrings["CS"].ToString();

 dd2.DataSourceProcedureName =

"uspGetAssetClass";

 dd2.DataTextField =

"assetClassDescription";

 dd2.DataValueField =

"assetClassId";