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

5 posts, 0 answers
  1. Lefteris
    Lefteris avatar
    4 posts
    Member since:
    Mar 2012

    Posted 18 Nov 2013 Link to this post

    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 
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 21 Nov 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lefteris
    Lefteris avatar
    4 posts
    Member since:
    Mar 2012

    Posted 23 Nov 2013 Link to this post

    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 
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 Nov 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 10 Aug Link to this post

    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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017