Cannot get object reference when RadButton is inside the EditTemplate of a ViewForm

[Lefteris]

Hello,

I am trying to get the reference to a RadButton object (which is used as a check box) which is inside the EditTemplate of a FormView. More specifically, I have the following code:

<telerik:RadFormDecorator id="FormDecorator1" runat="server" DecoratedControls="All" Skin="Metro"></telerik:RadFormDecorator>

    <asp:Panel runat="server" ID="Panel1">

        <asp:FormView ID="EmployerFormView" DataSourceID="EmployerObjectDataSource" DataKeyNames="id" runat="server" DefaultMode="Edit">

            <EditItemTemplate>

                <table>

                    <tr>

                        <td class="auto-style5">

                            <telerik:RadButton ID="rdBtnPhysical" runat="server" AutoPostBack="False" GroupName="rdEmplrType"

                                Text="Individual" ToggleType="Radio" OnClientCheckedChanged="rdBtnPhysical_CheckedChanged"

                                UseSubmitBehavior="False">

                                <ToggleStates>

                                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadioChecked" />

                                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadio" />

                                </ToggleStates>

                            </telerik:RadButton>

                        </td>

                        <td>

                            <telerik:RadButton ID="rdBtnLegal" runat="server" AutoPostBack="False" GroupName="rdEmplrType" Text="Legal Entity"

                                ToggleType="Radio" OnClientCheckedChanged="rdBtnLegal_CheckedChanged" UseSubmitBehavior="False">

                                <ToggleStates>

                                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadioChecked" />

                                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadio" />

                                </ToggleStates>

                            </telerik:RadButton>

                        </td>

                    </tr>

                    <tr>

                        <td class="auto-style5" style="white-space: nowrap">

                            <label>Employer Registration number:</label>

                        </td>

                        <td style="width: 100px">

                            <telerik:RadTextBox ID="txtAme" runat="server"

                                EmptyMessage="A.M.E.">

                            </telerik:RadTextBox>

                        </td>

                    </tr>
   ...



Then I have the following javascript code:

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">

        <script type="text/javascript">

            $(document).ready(function () {

 

                 

                var firstName = $('input[id$="txtFirstName"]'); //This works fine

                firstName = $telerik.toTextBox(firstName);

                 

                var fathersName = document.getElementById('<%=EmployerFormView.FindControl("txtFathersName").ClientID%>'); //This also works fine

                 

                fathersName = $telerik.toTextBox(fathersName);

                var lbl = $get("lblEmplrName");

                 //The next line returns null reference

                var checkbox = document.getElementById('<%=EmployerFormView.FindControl("rdBtnLegal").ClientID%>');

               

                 //This comes up with an exception since the object is null

                checkBox = $telerik.toButton(checkBox);

                if (checkBox.get_checked()) {

However, when I looked into the generated HTML code, I saw that the ClientID for the checkbox was the following:

ctl00_ContentPlaceHolder1_EmployerFormView_rdBtnLegal_input

with the problem being _input since the javascript line is rendered to the following:

var checkbox = document.getElementById('ctl00_ContentPlaceHolder1_EmployerFormView_rdBtnLegal');

As a result checkbox is undefined. Btw, there is also a ctl00_ContentPlaceHolder1_EmployerFormView_rdBtnLegal_ClientState

I do not understand why, and I don't know how to get the reference I want. It works fine with the RadTextBox (i.e. there is no _input appended at the end of the ClientID).

Thanks 

Lefteris 

[Danail Vasilev]

Hello Lefteris,

What I can suggest is that you create a hidden filed where you can store the id of the RadButton in OnDataBound event of the FormView, so that this id can be obtained later on the client-side. For example:
JavaScript:

<telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var id = document.getElementById('hdnNameRadButton').value;
            var checkbox = document.getElementById(id);
            checkbox = $telerik.toButton(checkbox);
            alert(checkbox);
        }
    </script>
</telerik:RadCodeBlock>

C#:

protected void EmployerFormView_DataBound(object sender, EventArgs e)
{
    hdnNameRadButton.Value = ((RadButton)EmployerFormView.FindControl("rdBtnPhysical")).ClientID;
}

protected void Page_Load(object sender, EventArgs e)
{
    EmployerFormView.DataSource = GetData();
    EmployerFormView.DataBind();
}

protected DataTable GetData()
{
    DataTable dt = new DataTable();

    dt.Columns.Add("ID");

    dt.Rows.Add(1);
    dt.Rows.Add(2);
    dt.Rows.Add(3);

    return dt;
}

ASPX:

<asp:HiddenField ID="hdnNameRadButton" runat="server" />
<asp:Panel runat="server" ID="Panel1">
    <asp:FormView ID="EmployerFormView" __DataSourceID="EmployerObjectDataSource" DataKeyNames="ID" runat="server" DefaultMode="Edit" OnDataBound="EmployerFormView_DataBound">
        <EditItemTemplate>
            <table>
                <tr>
                    <td class="auto-style5">
                        <telerik:RadButton ID="rdBtnPhysical" runat="server" AutoPostBack="False" GroupName="rdEmplrType"
                            Text="Individual" ToggleType="Radio" __OnClientCheckedChanged="rdBtnPhysical_CheckedChanged"
                            UseSubmitBehavior="False">
                            <ToggleStates>
                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadioChecked" />
                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadio" />
                            </ToggleStates>
                        </telerik:RadButton>
                    </td>
                    <td>
                        <telerik:RadButton ID="rdBtnLegal" runat="server" AutoPostBack="False" GroupName="rdEmplrType" Text="Legal Entity"
                            ToggleType="Radio" __OnClientCheckedChanged="rdBtnLegal_CheckedChanged" UseSubmitBehavior="False">
                            <ToggleStates>
                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadioChecked" />
                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleRadio" />
                            </ToggleStates>
                        </telerik:RadButton>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5" style="white-space: nowrap">
                        <label>Employer Registration number:</label>
                    </td>
                    <td style="width: 100px">
                        <telerik:RadTextBox ID="txtAme" runat="server"
                            EmptyMessage="A.M.E.">
                        </telerik:RadTextBox>
                    </td>
                </tr>
            </table>
        </EditItemTemplate>
    </asp:FormView>
</asp:Panel>

You may also find interesting How to access the controls in formview control using javascript forum thread.

Regards,
Danail Vasilev
Telerik

[Lefteris]

Thank you Danail,

I will try this and let you know how it goes. However, one thing that I do not understand is that if I put the Panel inside the EditTemplate, then everything works fine. Do you know why this could be?

Thanks 

[Danail Vasilev]

Hi Lefteris,

I have tried to reproduce the mention issue but to no avail. You can watch a short video in the attached archive and then tell me what I am missing.

Could you please try to reproduce the issue with the attached VS example and then tell us what changes you have made, so that we can make an investigation locally?

Regards,
Danail Vasilev
Telerik

[Phil H.]

Hi:

I do something like the following:

<telerik:RadButton id="radButton" runat="server" OnClientLoad="radBtnLoad" Text="Btn" />
<script type="text/javascript">
    var radBtn = undefined;
    function radBtnLoad  (sender, args) { radBtn = sender; }
</script>

So the js variable radBtn has a reference to the button.  Even if it is in a FormView.

Phil