Calling javascript in edit mode from a web content form

[nightvision miami]

I have a master page and a derived web content form using the specified master page.  Any javascript I place in my Content1 and the body of the page goes in Content2.  The issue is that I am calling a javacript but since the controls only exist in the Edit Mode of the RadGrid, when the page loads it is firing an error stating that the controls do not exist in the context.

Javascript

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <script type="text/javascript">

           function copyAmount() {
               if (document.getElementById("<%=tbApprovedAmount.ClientID%>")) {
                   document.getElementById("<%=tbApprovedAmount.ClientID%>").value = document.getElementById("<%=tbRequestedAmount.ClientID%>").value;
               }

           }
        </script>
</asp:Content>

Aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
.
.
.
<EditFormSettings EditFormType="Template" FormStyle-BackColor="#DBE9FD">
<EditColumn UniqueName="EditCommandColumn1">
</EditColumn>
<FormStyle BackColor="#DBE9FD" />
<FormTemplate>
<table width="800px" border="0" >
<tr>
<td align="left">
<asp:TextBox ID="tbRequestedAmount" runat="server"
Text='<%# Bind("RequestedAmount", "{0:0.00}") %>' ></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvRequestedAmount" runat="server" ErrorMessage="Requested amount is a required field"
Display="None" ControlToValidate="tbRequestedAmount" ValidationGroup="Service"></asp:RequiredFieldValidator>
<asp:Button ID="tbCopy" runat="server" Text="->" Height="20px"
OnClientClick="copyAmount" />
</td>
</tr>
</table>
</FormTemplate>
</EditFormSettings>
.
.
.
</asp:Content>

[Veli]

This is because the edit form in RadGrid is not initialized until an item is edited. To prevent the javascript error that you are getting, you can take one of 2 approaches:

1. Put your javascript in a RadScriptBlock and inside the <FormTemplate> in RadGrid. Thus, the javascript will be rendered only when an item is edited.

2. Leave your javascript in the page, but check for the existence of the controls and elements you need to access. This is to prevent null reference errors when the edit form is not initialized.

Finally, note that, if you have multi-row editing in RadGrid, your edit forms may be initialized more than once. This means that the edit  form and any controls inside will be duplicated as many times as the number of edited items. Your javascript may need to take this into consideration to prevent accessing wrong instances of elements and controls when there are multiple duplicates.

Veli
the Telerik team

[nightvision miami]

I read some more on the Telerik site and saw that I should be using a RadCodeBlock since i am using the <% %> in my script to access the server-side controls.  I placed the script in a RadCodeBlock within the FormTemplate and I still get the same error.
Compiler Error Message: CS0103: The name 'tbApprovedAmount' does not exist in the current context

<FormTemplate>
     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
          <script language="javascript" type="text/javascript">
               function copyAmount() {
                        document.getElementById("<%= tbApprovedAmount.ClientID %>").value = document.getElementById("<%= tbRequestedAmount.ClientID %>").value;
                                                       }
         </script>
 </telerik:RadCodeBlock>
.
.
.
</FormTemplate>

[Veli]

Here is a help topic on RadCodeBlock and RadScriptBlock. You can read about the differences there, and why you need to be using RadScriptBlock for dynamic script content loaded on AJAX postback.

As for the error you are getting, it indicates that a control with ID tbApprovedAmount cannot be found in the scope of the page. If tbApprovedAmount is a control loaded in the edit form, note that it is not visible in the context of the page and cannot be accessed in a code expression as you specified.

Try the following instead:

function copyAmount() {
    document.getElementById('<%# Container.FindControl("tbApprovedAmount").ClientID %>").value = document.getElementById("<%= Container.FindControl("tbRequestedAmount").ClientID %>").value;
}

Veli
the Telerik team