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

How to calculate the sum of ASP.NET GridView rows in using jQuery or Javascript. All the textboxes are mandatory and only allow numbers.

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" />