JavaScript TextChange(onChange) inside a grid view
Hi,
I am trying to add an onKeyup event to a textbox during runtime ie OnRowCreated event
My Code behind is
protected
void GridView_RowCreated(Object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lblUnitPrice = (Label)e.Row.Cells[2].Controls[1];
TextBox tbQuantity = (TextBox)e.Row.Cells[3].Controls[1];
int s = 0;
if (lblUnitPrice != null)
{
tbQuantity.Attributes.Add(
"onKeyUp", "changeMe('" + lblUnitPrice.ClientID + "','" + tbQuantity.ClientID + "','" + s + "')");
}
}
}
what i want to do is basically pass the ID's of label and textbox to a javascript function "changeMe" .. so it can calculate the total price and display in another total textbox in the footer. my aspx code is:
<
script language="javascript">
function
changeMe(oPrice, oQty, oSubTotal)
{
var Price = document.getElementById(oPrice).innerText;
alert(
"val of oPrice is :" + Price);
var splitPrice = Price.split("$");
alert(
"second split: " + splitPrice[1]);
var fl = parseFloat(splitPrice[1]);
alert(
"val of fl is :" + fl);
var Qty = document.getElementById(oQty).value;
alert(
"val of Qty is :" + Qty);
SubTotal = Number(fl) * Number(Qty);
alert(
"val of SubTotal is :" + SubTotal);
if (document.getElementById("_ctl0_ContentPlaceHolder 1_ItemsSummary__ctl4_txtTotal").value == "")
{
alert(
"Subtotal is nothing");
//document.getElementById(oSubTotal).value = SubTotal;
document.getElementById(
"_ctl0_ContentPlaceHolder1_ItemsSummary__ctl4_txtT otal").value = SubTotal;
}
else
{
alert(
"Subtotal is something :" + Subtotal);
document.getElementById(
"_ctl0_ContentPlaceHolder1_ItemsSummary__ctl4_txtT otal").value = Number(document.getElementById("_ctl0_ContentPlace Holder1_ItemsSummary__ctl4_txtTotal").value) + Number(SubTotal);
//document.getElementById(oSubTotal).value = Number(document.getElementById(oSubTotal).value) + Number(SubTotal);
alert(
"new val of subtotal :" + document.getElementById("_ctl0_ContentPlaceHolder1 _ItemsSummary__ctl4_txtTotal").value);
}
}
</script>
<
div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="Tab1" runat="server">
<asp:GridView Width="100%" runat="server" ID="ItemsSummary" DataSourceID="XMLDATASOURCE" OnRowCreated="GridView_RowCreated"
AutoGenerateColumns="False" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None"
BorderWidth="1px" CellPadding="3" CellSpacing="2" ShowFooter=true >
<Columns>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<cc1:DynamicImage ID="diGdi" AlternateText="click to enlarge" onclick = "showImage()" runat="server" Image='<%#ThumbnailImage(XPath("ThumbImage/FileContents"))%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label runat="server" ID="NameLabel" Text='<%#XPath("Description")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Unit Price">
<ItemTemplate>
<asp:Label runat="server" ID="UnitPriceLabel" Text='<%#XPath("Price")%>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<b>Total</b>
</FooterTemplate>
<ItemStyle HorizontalAlign="Right" />
<FooterStyle HorizontalAlign="Right" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Qty">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server" Width="30px"></asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtTotal" Font-Bold="true" ReadOnly= true ForeColor = "Black" BackColor="Khaki" runat="server" Width="40px" />
</FooterTemplate>
<ItemStyle HorizontalAlign="Right" />
<FooterStyle HorizontalAlign="Right" />
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
</asp:GridView>
<asp:XmlDataSource ID="XMLDATASOURCE" runat="server"></asp:XmlDataSource>
</asp:View>
<asp:View ID="Tab2" runat="server">
</asp:View>
<asp:View ID="Tab3" runat="server">
<asp:Label ID="lblCCNo" runat="server" Text="Credit Card Number:"></asp:Label>
<asp:TextBox ID="txtCCNo" runat="server"></asp:TextBox><br />
<asp:Label ID="lblType" runat="server" Text="Type:"></asp:Label>
<asp:DropDownList ID="ddlCardType" runat="server">
<asp:ListItem Text="visa" Selected="true"></asp:ListItem>
<asp:ListItem Text="Master"></asp:ListItem>
<asp:ListItem Text="American"></asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="lblAmount" runat="server" Text="Amount To Pay:"></asp:Label>
<asp:TextBox ID="txtAmountBeingPaid" runat="server"></asp:TextBox><br />
</asp:View>
</asp:MultiView></div>
My problem is that it does go inside that javascript function on each row created but always calculate the total rpice for the first row inside the gridview.
doesnot calculate price for the rest of the rows.. just the first one.. i have been stuck on this for a while .. can somebody help ????
Regards
Umar
|