[Solved] RadComboBox with Checkboxes in user control

[Amir]

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 = "";

 

 

 

 

//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);

 

 

}

 

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

 

 

 

 

 

function AllSelected()

 

 

{

 

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 == false)

 

{

 

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;

 

 

 

 

if (AllSelected() == true)

 

 

 selectAll =

false;

 

 

 

 

//holds the text of all checked items

 

 

 

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

 

text = removeLastComma(text);

values = removeLastComma(values);

 

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

 

 }

 

 

</

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

 

 

 

 

 

 

 

           

[Simon]

Hello Amir,

You need to make each event handler function dependent on the client ID of the ComboBox to which it relates. Additionally you could move the 'static' functions (stopPropagation, removeLastComma) to a higher level (the containing page).

Please see the attached modified for the full code modifications and let me know if you have any additional questions.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jim]

Hi Simon,

The javascript in the example user control doesn't compile where the id is added to the var/function names.  For example the line

var cancelDropDownClosing<%= RadComboBox1.ClientID %> = false;

indicates a warning at the opening angle bracket:  Expected ";"

What do I need to do to have this control work?

Regards,
Jim

[Veselin Vasilev]

Hello Jim,

It should work as expected. Please open a new support ticket and attach there a small working project which we can run locally.

Thanks

Sincerely yours,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.