link textboxes in gridview EditItem template using javascript



Please could you help?
I have 2 textboxes in a gridview EditItemTemplate. These are template
controls. When I type in the "Amount" textbox I want to fill in the "Percent"
Here's my markup, which successfully fires the javascript

<asp:TemplateField HeaderText="Increase">
ID="SalaryIncreaseAmountTextBox" runat="server" Text='<%#
Bind("SalaryIncreaseAmount") %>' onblur="MyJSFunc()"> </asp:TextBox>
<asp:Label ID="Label6" runat="server"
Text='<%# Bind("SalaryIncreaseAmount","{0:N0}") %>'></asp:Label>
<asp:TemplateField HeaderText="Increase %"
<asp:TextBox ID="PercentIncreaseTextBox"
runat="server" Text='<%# Bind("PercentIncrease") %>'></asp:TextBox>
<asp:Label ID="Label7" runat="server"
Text='<%# Bind("PercentIncrease","{0:N2}") %>'></asp:Label>
<ControlStyle Width="30px" />
<HeaderStyle HorizontalAlign="Right" />
<ItemStyle HorizontalAlign="Right" />
here's my javascript:

function MyJSFunc() {
var pc =
var amt =
var sal = document.getElementById("grdApproval_SalaryLabel");
pc.value = amt.value / sal.value.replace(",", "") * 100;
The problem is that getElementById doesn't find anything

I have tried writing codebehind like this:

Private Sub grdApproval_RowEditing(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewEditEventArgs) Handles
Dim r As GridViewRow
r = grdApproval.Rows(e.NewEditIndex)
TextBox).Attributes.Add("onblur", "MyJSFunc(" &
DirectCast(r.FindControl("PercentIncreaseTextBox"), TextBox).ClientID & ")")
End Sub
Now the FindControl returns nothing.

I dig around inside the GridViewRow and all I can find is things like this:
? r.Controls(7)
AppRelativeTemplateSourceDirectory: "~/"
BindingContainer: {System.Web.UI.WebControls.GridViewRow}
ClientID: "grdApproval_ctl02_ctl02"
Controls: {System.Web.UI.ControlCollection}
EnableTheming: True
EnableViewState: True
ID: "ctl02"
NamingContainer: {System.Web.UI.WebControls.GridViewRow}
Page: {ASP.approvalpage_aspx}
Parent: {System.Web.UI.WebControls.GridViewRow}
Site: Nothing
SkinID: ""
TemplateControl: {ASP.approvalpage_aspx}
TemplateSourceDirectory: "/"
UniqueID: "grdApproval$ctl02$ctl02"
Visible: True

and I can't find anything that looks like a textbox



Shengqing Yang [MSFT]

Hi Jason,

We cannot directly use the ID of a control in a GridView to find it when a
page runs. Actually, the ID will be rendered as something like
GridView1_ctl02_TextBox1 instead of TextBox1 or GridView1_TextBox1.

I made a simple demo for you based on your requirement that when a TextBox
is edited by a user, the value of another TextBox should be changed
automatically. As the code is not short, I would like to provide the key
part of it.
Code of GridView:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
<asp:TemplateField HeaderText="num1" SortExpression="num1">
<asp:TextBox ID="TextBox1" runat="server" Text='<%#
Bind("num1") %>' onblur="javascript:foo(this);"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text='<%#
Bind("num1") %>'></asp:Label>
<asp:TemplateField HeaderText="num2" SortExpression="num2">
<asp:TextBox ID="TextBox2" runat="server" Text='<%#
Bind("num2") %>'></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text='<%#
Bind("num2") %>'></asp:Label>
<asp:TemplateField HeaderText="time" SortExpression="time">
<asp:Label ID="Label3" runat="server" Text='<%#
Bind("time") %>'></asp:Label>
<asp:CommandField ShowEditButton="True" />
Code of JavaScript function foo():

<script type="text/javascript">
function foo(c) {
var num1_id =;
var num2_id = num1_id.replace("TextBox1", "TextBox2");
var time_id = num1_id.replace("TextBox1", "Label3");

var num1_value = c.value;
var time_value = document.getElementById(time_id).innerText;

document.getElementById(num2_id).value = num1_value * time_value;

And the SqlDataSource1 connects to a SQL table having only three columns,
[num1], [num2] and [time] with the logic that num1 * time = num2.

Bravo Yang
Microsoft Online Support


Get notification to my posts through email? Please refer to

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working with
you may need further investigation to reach the most efficient resolution.

The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question