link textboxes in gridview EditItem template using javascript

  • Thread starter Thread starter Jason
  • Start date Start date
J

Jason

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"
textbox
************************************************************
Here's my markup, which successfully fires the javascript

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

function MyJSFunc() {
var pc =
document.getElementById("grdApproval_PercentIncreaseTextBox");
var amt =
document.getElementById("grdApproval_SalaryIncreaseAmountTextBox");
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
grdApproval.RowEditing
Dim r As GridViewRow
r = grdApproval.Rows(e.NewEditIndex)
DirectCast(r.FindControl("SalaryIncreaseAmountTextBox"),
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)
{System.Web.UI.WebControls.DataControlFieldCell}
System.Web.UI.WebControls.DataControlFieldCell:
{System.Web.UI.WebControls.DataControlFieldCell}
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
 
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"
DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField HeaderText="num1" SortExpression="num1">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%#
Bind("num1") %>' onblur="javascript:foo(this);"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#
Bind("num1") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="num2" SortExpression="num2">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%#
Bind("num2") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%#
Bind("num2") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="time" SortExpression="time">
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%#
Bind("time") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" />
</Columns>
Code of JavaScript function foo():

<script type="text/javascript">
function foo(c) {
var num1_id = c.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;
}
</script>

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

--
Sincerely,
Bravo Yang
Microsoft Online Support

==================================================

Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

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
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx

==================================================
 
Back
Top