Calculate the Sum or Total of GridView Rows in ASP.NET using jQuery or Javascript

Hiren Bhatti
5y
22.4k
0
1

Blog

Introduction

This post shows how to calculate the sum of gridview rows in ASP.NET using jQuery or Javascript. All the textboxes are mandatory and only allow numbers.

Code

<script type="text/javascript">
$(document).ready(function () {
$('.numberonly').keypress(function (e) {
var charCode = (e.which) ? e.which : event.keyCode
if (String.fromCharCode(charCode).match(/[^0-9]/g))
return false;
});
});
function sumBudgetedValues(ctrl) {
var row = $(ctrl).closest('tr')[0];
var strbudgetedval = row.cells[14].childNodes[1];
var totalsum = 0;
for (var i = 2; i < 14; i++) {
totalsum += row.cells[i].childNodes[1].value == "" ? 0 : parseFloat(row.cells[i].childNodes[1].value);
}
var strname = '[name="' + strbudgetedval.name + '"]';
$(strname).val(totalsum);
}
function Validation() {
//validation for FIRM
var isValid = true;
var classname = 'mandatory';
$('.' + classname + '').each(function (i, obj) {
if (obj.value == '') {
isValid = false;
return isValid;
}
});
if (!isValid) {
$('.' + classname + '').each(function (i, obj) {
if (obj.value == '') {
obj.style.border = '1px solid red';
}
else {
obj.style.border = '1px solid black';
}
});
alert('Please fill mandatory details');
}
if (isValid) {
return confirm('Are you sure you want to save information? Once information stored will not be updated.')
}
return isValid;
}
</script>
<asp:GridView ID="gvdashboard" ClientIDMode="Static" runat="server" ShowHeaderWhenEmpty="true" EmptyDataText="No records found" EmptyDataRowStyle-ForeColor="Red"
EmptyDataRowStyle-HorizontalAlign="Center" AllowPaging="True"
AutoGenerateColumns="False" GridLines="Vertical" HeaderStyle-Wrap="false" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px">
<AlternatingRowStyle BackColor="#DCDCDC" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ControlStyle-CssClass="hidectrl" ItemStyle-CssClass="hidectrl" HeaderStyle-CssClass="hidectrl"></asp:BoundField>
<asp:BoundField DataField="Month" HeaderText="Month" ItemStyle-Width="5px"></asp:BoundField>
<asp:TemplateField HeaderText="Jan">
<ItemTemplate>
<asp:TextBox ID="txtjan" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Feb">
<ItemTemplate>
<asp:TextBox ID="txtfeb" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mar">
<ItemTemplate>
<asp:TextBox ID="txtmar" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Apr">
<ItemTemplate>
<asp:TextBox ID="txtapr" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="May">
<ItemTemplate>
<asp:TextBox ID="txtmay" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Jun">
<ItemTemplate>
<asp:TextBox ID="txtjun" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Jul">
<ItemTemplate>
<asp:TextBox ID="txtjul" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Aug">
<ItemTemplate>
<asp:TextBox ID="txtaug" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sep">
<ItemTemplate>
<asp:TextBox ID="txtsep" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Oct">
<ItemTemplate>
<asp:TextBox ID="txtoct" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Nov">
<ItemTemplate>
<asp:TextBox ID="txtnov" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Dec">
<ItemTemplate>
<asp:TextBox ID="txtdec" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:TextBox ID="txttotal" runat="server" CssClass="form-control nopadding" ReadOnly="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle CssClass="pagination-ys" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F5F7FB" />
<SortedAscendingHeaderStyle BackColor="#6D95E1" />
<SortedDescendingCellStyle BackColor="#E9EBEF" />
<SortedDescendingHeaderStyle BackColor="#4870BE" />
</asp:GridView>
<asp:Button ID="btnsubmit" CssClass="btn-lg btn-primary" OnClientClick="return Validation();" runat="server" Text="Submit" OnClick="btnsubmit_Click" />