Can't Find Rad Button Inside Rad Combo Header Template That Is Inside A User Control

[Tracy]

Hi,

I have a rad button that is inside the header template of a rad combo and the rad combo is in a user control.  I am trying to change the selectedToggleState of the rad button when an item is clicked client side.  I am attaching a javascript function to the Item Clicked event of the combo box in code behind and sending the client id of the button that is inside the header template to the function,  but when I try to access the button in the client side script it always returns null.  I placed an alert inside the client side script to show the client id of the button and it seems to return the correct value, but when I try to access the button it always returns null.  I have tried several methods to find the button but none have worked.
Below is my code.

User Control page combo box on it.

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="UC Combo.ascx.vb" Inherits="IPS_Gateway.UC_Combo" %>

<script type="text/javascript">
    function pageLoad() {

    }

    function ShowHideList(sender, args) {
        toggleList = sender.get_selectedToggleStateIndex();
        switch (toggleList) {
            case 0:
            alert('0');
                break;
            case 1:
                alert('1');
                break;
            case 2:
                alert('2');
                break;
        }
    }

    function ComboItemChecked(strClientIds, args) {
        var item = args.get_item()
        var itemText = item.get_text();
        var aryClientIds = strClientIds.split(",");
        var cmbField = $find(aryClientIds[0]);
        var hdfSelectedCount = document.getElementById(aryClientIds[1]);
        var hdfSelectedValue = document.getElementById(aryClientIds[3]);
        var hdfSelectedText = document.getElementById(aryClientIds[2]);
        var hdfCheckedIndex = document.getElementById(aryClientIds[4]);
        alert(aryClientIds[5]);
        //   var ibtDisplay = document.getElementById(aryClientIds[5]);
        //    var ibtDisplay = $find(aryClientIds[5]);
        var ibtDisplay = $telerik.findButton(aryClientIds[5]);
        alert(ibtDisplay);
        ibtDisplay.set_selectedToggleState(1);
    }
    </script>


 <asp:UpdatePanel ID="uppList" runat="server" UpdateMode="Conditional"  ChildrenAsTriggers="false">
    <ContentTemplate>
         <asp:HiddenField ID="hdfSelectedCount"     runat="server" EnableViewState ="true" />  <%-- Holds a count of the number of items  that have been selected. Assigned to public property prpSelectedCount.  --%>
         <asp:HiddenField ID="hdfSelectedText"      runat="server" EnableViewState ="true"/>  <%-- Holds the text values of all items that have been selected.  Assigned to public property prpSelectedText.   --%>
         <asp:HiddenField ID="hdfSelectedValue"     runat="server" EnableViewState ="true"/>  <%-- Holds the value of all items have been selected.   Assigned to public property prpSelectedValue. --%>
         <asp:HiddenField ID="hdfCheckedIndex"      runat="server" EnableViewState ="true" value="1"/>
         <asp:HiddenField ID="hdfFieldClientId"     runat="server" EnableViewState ="true"/>


        <asp:Panel id="pnlList"                         runat="server"  style="float:left;">
            <asp:Label ID="lblField"                    runat="server"  Text="Combo 1" Width="90px" />

            <telerik:RadComboBox ID="rcbField"          runat="server"
                        AllowCustomText="true"
                        AutoPostBack="true"
                        MarkFirstMatch="false"
                        ExpandAnimation-Type="None"   CollapseAnimation-Type="None"  ExpandDirection="Down"
                        Width="250px"
                        Checkboxes="true"
                        EnableEmbeddedSkins="true"   Skin="Office2010Blue"
                        EnableScreenBoundaryDetection="false" EnableVirtualScrolling="false">
                        <Items>
                            <telerik:RadComboBoxItem Text="Item 1" Value = "1" />
                            <telerik:RadComboBoxItem Text="Item 2" Value = "2" />
                            <telerik:RadComboBoxItem Text="Item 3" Value = "3" />
                            <telerik:RadComboBoxItem Text="Item 4" Value = "4" />
                        </Items>
                <HeaderTemplate>
                       <telerik:RadButton ID="rbtListDisplay"  runat="server"  Width="80px" Height="22px" Skin="Default" ButtonType="StandardButton" ToggleType="CustomToggle"  OnClientToggleStateChanged="ShowHideList" AutoPostBack="false"  ToolTip="Show List"   >
                        <ToggleStates>
                            <telerik:RadButtonToggleState Text="."  PrimaryIconUrl="~/App_Themes/Images/UC Multi Select Combo/Blank 16.png"  Selected="true" />
                            <telerik:RadButtonToggleState Text="."  PrimaryIconUrl="~/App_Themes/Images/UC Multi Select Combo/Blue List 14.ico"  />
                            <telerik:RadButtonToggleState Text="."  PrimaryIconUrl="~/App_Themes/Images/UC Multi Select Combo/Checked 14.ico"   />
                        </ToggleStates>
                    </telerik:RadButton>
                     <asp:Label ID="lblHeader"                  runat="server"   />
                     <asp:ImageButton ID="ibtClose"             runat="server"  ImageUrl ="~/App_Themes/Images/UC Multi Select Combo/X Close.png"   ImageAlign="Middle"           ToolTip="Close Drop Down" Width="30"  />
                </HeaderTemplate>
            </telerik:RadComboBox>
        </asp:Panel>

       </ContentTemplate>

</asp:UpdatePanel>

Code Behind For User Control

Private Sub rcbField_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles rcbField.PreRender
      Dim aryClientIds(6) As String
      Dim strClientIds As String

      Me.hdfCheckedIndex.Value = 1

      strClientIds = Me.rcbField.ClientID + "," + _
                     Me.hdfSelectedCount.ClientID + "," + _
                     Me.hdfSelectedText.ClientID + "," + _
                     Me.hdfSelectedValue.ClientID + "," + _
                     Me.hdfCheckedIndex.ClientID + "," + _
                     Me.rcbField.Header.FindControl("rbtListDisplay").ClientID

      Me.rcbField.OnClientItemChecked = "function(sender, args){ComboItemChecked('" + strClientIds + " ', args);return false;}"

  End Sub

Host Page

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm4.aspx.vb" Inherits="IPS_Gateway.WebForm4" %>
<%@ Register TagPrefix="wucc" TagName="Combo1" Src="~/UC Combo.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <act:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"  EnablePartialRendering="true" AsyncPostBackTimeout="5000"/>
        <wucc:Combo1    Id="rcb1" runat="server" />
    </div>
    </form>
</body>
</html>

How can I find and change the rad button that is inside the header template of the combo box?

Thank you for your help.
Tracy

[Nencho]

Hello Tracy,

I was able to replicate the faced issue and it seems that there is a blank space appended to the end of the RadButton's ID. Therefor, I would suggest you to use the trim() method, in order to get ride of that blank space and access the button. Please consider the following approach:

function ComboItemChecked(strClientIds, args) {
        var item = args.get_item()
        var itemText = item.get_text();
        var aryClientIds = strClientIds.split(",");
        var cmbField = $find(aryClientIds[0]);
        var hdfSelectedCount = document.getElementById(aryClientIds[1]);
        var hdfSelectedValue = document.getElementById(aryClientIds[3]);
        var hdfSelectedText = document.getElementById(aryClientIds[2]);
        var hdfCheckedIndex = document.getElementById(aryClientIds[4]);
        alert(aryClientIds[5]);
       var id = aryClientIds[5].trim();

        //   var ibtDisplay = document.getElementById(aryClientIds[5]);
        //    var ibtDisplay = $find(aryClientIds[5]);
        var ibtDisplay = $telerik.findButton(id);
        alert(ibtDisplay);
        ibtDisplay.set_selectedToggleState(1);
    }

Greetings,
Nencho
the Telerik team

[Tracy]

Hi Nencho,

That solved my problem.

Thank You
Tracy