Ayman Ayman - 5 months ago 66
jQuery Question

Accessing a Label control within a GridView Footer with Javascript

How can i assign

$mult
value to label
lblGrandTotal
that exist in
FooterTemplate
.

I have used below java-script code to assign
$mult
value to label that exist outside grid-view.

JavaScript

<script>
$(document).ready(function () {
$(".txtMult input").on('keyup mouseup', multInputs);

function multInputs() {

var $mult = 0;
// calculate Grand total
$("tr.txtMult").each(function () {
// get the values from this row:
var $UnitPrice = $('.UnitPrice', this).val();
var $Quantity = $('.Quantity', this).val();
var $Discountvalue = $('.Discount', this).val() / 100;
var $total = (($UnitPrice) * ($Quantity));
$mult += $total;

});

// for each row:
$("tr.txtMult").each(function () {
// get the values from this row:
var $UnitPrice = $('.UnitPrice', this).val();
var $Quantity = $('.Quantity', this).val();
var $Discountvalue = $('.Discount', this).val() / 100;
var $total = (($UnitPrice) * ($Quantity));
$('.multTotal', this).text(Math.round($total * 100) / 100);
});
$("#<%=Total.ClientID %>").text(Math.round($mult * 100) / 100);
}
});
</script>


Grid-view

<asp:GridView ID="gridpur" CssClass="table text-nowrap" ShowFooter="true" runat="server" OnRowDataBound="gridpur_RowDataBound" AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtCalcQuantity" CssClass="Quantity form-control" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Unit Price">
<ItemTemplate>
<asp:TextBox ID="txtCalcUnitprice" Width="120" CssClass="UnitPrice form-control" runat="server"></asp:TextBox>
</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" CssClass="multTotal" Text="0"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblGrandTotal" Text="" runat="server" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>


Code behind

protected void gridpur_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.CssClass = "txtMult";
}
}

Answer

If you have only one control with ID lblGrandTotal on the page, you could set its ID mode to Static, and that will ensure that this is exactly the client ID that appears in the final markup. That will allow you to use this ID directly in js code:

<asp:Label ID="lblGrandTotal" Text="" runat="server" ClientIDMode="Static" />

And now you do not need any scriplets anymore, just literal ID:

$("lblGrandTotal").text(Math.round($mult * 100) / 100);

Again, this is possible only if you ever have one control with this ID on this page.

Alternative solution would be to assign something that you could query against. For example CssClass would be a somewhat standard approach.

<asp:Label ID="lblGrandTotal" Text="" runat="server" CssClass="grandTotalLabel" />

This class does not need to be defined in your stylesheets. Again, just make sure it is not used anywhere else. Now just query it:

$(".grandTotalLabel").text(Math.round($mult * 100) / 100);