ASP.NET Web Forms GridView With Running Total Per Group Using JavaScript

Basing from the post DataTable With Running Total Per Group which applies running total to a DataTable object, we can also achieve the same functionality through the front-end side by changing the structure of the GridView control given that this is an ASP.NET WebForm application. The snippet to set the control's data source is simple such as below:

 dt.Columns.AddRange(new DataColumn[5]
     { new DataColumn("SrNo", typeof(int)),
    new DataColumn("PartyName", typeof(string)),
    new DataColumn("ItemName",typeof(string)),
    new DataColumn("ChqAmt", typeof(int)),
    new DataColumn("PartyCode",typeof(string))});
 dt.Rows.Add(1, "ABC Water Supply", "Construction Service", 400, "ABC");
 dt.Rows.Add(2, "ABC Pump Services", "Type 24 Engine Pump", 150, "ABC");
 dt.Rows.Add(3, "ABC Water Supply", "12 Ft Water Tank", 600, "ABC");
 dt.Rows.Add(4, "XYZ Hardware", "Garden Soil", 250, "XYZ");
 dt.Rows.Add(5, "XYZ Hardware", "Power Generator", 245, "XYZ");
 dt.Rows.Add(6, "ACE Hardware", "Screw Driver", 16, "ACE");
 dt.Rows.Add(7, "ACE Hardware", "8W Led Bulb", 18, "ACE");
 GridView1.DataSource = dt;
 GridView1.DataBind();
}

The GridView control has BoundField columns used to display the information.

<div id="content">
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4">
  <Columns>
   <asp:BoundField DataField="SrNo" HeaderText="SrNo" />
   <asp:BoundField DataField="PartyName" HeaderText="PartyName" />
   <asp:BoundField DataField="ItemName" HeaderText="ItemName" />
   <asp:BoundField DataField="ChqAmt" HeaderText="ChqAmt" >
    <ItemStyle HorizontalAlign="Right" />
   </asp:BoundField>
   <asp:BoundField DataField="PartyCode" HeaderText="PartyCode" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol"/>
  </Columns>
  <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
  <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
  <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
  <RowStyle BackColor="White" ForeColor="#003399" />
  <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
  <SortedAscendingCellStyle BackColor="#EDF6F6" />
  <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
  <SortedDescendingCellStyle BackColor="#D6DFDF" />
  <SortedDescendingHeaderStyle BackColor="#002876" />
 </asp:GridView>
</div>

The JavaScript code will loop through the table and does the calculation plus adding another table row to display the running total.

$(document).ready(function () {
 var table = $('table');
 var subtotal = 0;
 var grandTotal = 0;
 var flag = $('table tr:eq(1) td:eq(4)').text(); //assign code to flag from second table row after th.
 var tblLength = $('table tr').length;
 for (var index = 0; index < tblLength; index++) {
  if ($('table tr:eq(' + index + ')').find('td:eq(4)').text() != "") {
   var temp = $('table tr:eq(' + index + ')').find('td:eq(4)').text();
   if (temp != flag) {
    var html = "<tr style='color:#003399;background-color:White;'>"
        + "<td></td>"
        + "<td>" + "Total For " + $('table tr:eq(' + parseInt(index - 1) + ')').find('td:eq(4)').text() + "</td>"
        + "<td></td>"
        + "<td align='right'>" + subtotal + "</td>"
        + "<td class='hiddencol'></td>"
        + "</tr>";
    $('table tbody tr:eq(' + parseInt(index - 1) + ')').after(html);
    tblLength = $('table tr').length;
    grandTotal = parseFloat(grandTotal) + parseFloat(subtotal);
    subtotal = 0;
    flag = $('table tbody tr:eq(' + parseInt(index + 1) + ')').find('td:eq(4)').text();
    continue;
   }
   else {
    subtotal = parseInt(subtotal) + parseInt($('table tr:eq(' + index + ')').find('td:eq(3)').text());
    var len = $('table tr').length - 1;
    if (index == len) {
     var html = "<tr  style='color:#003399;background-color:White;'>"
          + "<td></td>"
          + "<td>" + "Total For " + $('table tr:eq(' + index + ')').find('td:eq(1)').text() + "</td>"
          + "<td></td>"
          + "<td align='right'>" + subtotal + "</td>"
          + "<td class='hiddencol'></td>"
          + "</tr>";
     $('table tbody tr:eq(' + parseInt(index) + ')').after(html);
     grandTotal = parseFloat(grandTotal) + parseFloat(subtotal);

     //insert grand total
     var htmlGrandTotal = "<tr  style='color:#003399;background-color:White;'>"
         + "<td></td>"
         + "<td>" + "Grand Total </td>"
         + "<td></td>"
         + "<td align='right'>" + grandTotal + "</td>"
         + "<td class='hiddencol'></td>"
         + "</tr>";
     $('table tbody tr:eq(' + parseInt(index + 1) + ')').after(htmlGrandTotal);
    }
   }
  }
 }

 $('table tr').each(function () {
  $(this).find('td').eq(3).text(parseFloat($(this).find('td').eq(3).text()).toLocaleFixed(2));
 });
});

Number.prototype.toLocaleFixed = function (n) {
 return this.toLocaleString(undefined, {
  minimumFractionDigits: n,
  maximumFractionDigits: n
 });
};

Screenshot