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
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  4. $('.numberonly').keypress(function (e) {
  6. var charCode = (e.which) ? e.which : event.keyCode
  8. if (String.fromCharCode(charCode).match(/[^0-9]/g))
  10. return false;
  12. });
  14. });
  16. function sumBudgetedValues(ctrl) {
  18. var row = $(ctrl).closest('tr')[0];
  20. var strbudgetedval = row.cells[14].childNodes[1];
  22. var totalsum = 0;
  24. for (var i = 2; i < 14; i++) {
  26. totalsum += row.cells[i].childNodes[1].value == "" ? 0 : parseFloat(row.cells[i].childNodes[1].value);
  28. }
  30. var strname = '[name="' + strbudgetedval.name + '"]';
  32. $(strname).val(totalsum);
  34. }
  36. function Validation() {
  38. //validation for FIRM
  40. var isValid = true;
  42. var classname = 'mandatory';
  44. $('.' + classname + '').each(function (i, obj) {
  46. if (obj.value == '') {
  48. isValid = false;
  50. return isValid;
  52. }
  54. });
  58. if (!isValid) {
  60. $('.' + classname + '').each(function (i, obj) {
  62. if (obj.value == '') {
  64. obj.style.border = '1px solid red';
  66. }
  68. else {
  70. obj.style.border = '1px solid black';
  72. }
  74. });
  76. alert('Please fill mandatory details');
  78. }
  80. if (isValid) {
  82. return confirm('Are you sure you want to save information? Once information stored will not be updated.')
  84. }
  87. return isValid;
  89. }
  91. </script>
  92. <asp:GridView ID="gvdashboard" ClientIDMode="Static" runat="server" ShowHeaderWhenEmpty="true" EmptyDataText="No records found" EmptyDataRowStyle-ForeColor="Red"
  94. EmptyDataRowStyle-HorizontalAlign="Center" AllowPaging="True"
  96. AutoGenerateColumns="False" GridLines="Vertical" HeaderStyle-Wrap="false" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px">
  98. <AlternatingRowStyle BackColor="#DCDCDC" />
  101. <Columns>
  103. <asp:BoundField DataField="ID" HeaderText="ID" ControlStyle-CssClass="hidectrl" ItemStyle-CssClass="hidectrl" HeaderStyle-CssClass="hidectrl"></asp:BoundField>
  105. <asp:BoundField DataField="Month" HeaderText="Month" ItemStyle-Width="5px"></asp:BoundField>
  107. <asp:TemplateField HeaderText="Jan">
  109. <ItemTemplate>
  111. <asp:TextBox ID="txtjan" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  113. </ItemTemplate>
  115. </asp:TemplateField>
  117. <asp:TemplateField HeaderText="Feb">
  119. <ItemTemplate>
  121. <asp:TextBox ID="txtfeb" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  123. </ItemTemplate>
  125. </asp:TemplateField>
  127. <asp:TemplateField HeaderText="Mar">
  129. <ItemTemplate>
  131. <asp:TextBox ID="txtmar" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  133. </ItemTemplate>
  135. </asp:TemplateField>
  137. <asp:TemplateField HeaderText="Apr">
  139. <ItemTemplate>
  141. <asp:TextBox ID="txtapr" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  143. </ItemTemplate>
  145. </asp:TemplateField>
  147. <asp:TemplateField HeaderText="May">
  149. <ItemTemplate>
  151. <asp:TextBox ID="txtmay" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  153. </ItemTemplate>
  155. </asp:TemplateField>
  157. <asp:TemplateField HeaderText="Jun">
  159. <ItemTemplate>
  161. <asp:TextBox ID="txtjun" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  163. </ItemTemplate>
  165. </asp:TemplateField>
  167. <asp:TemplateField HeaderText="Jul">
  169. <ItemTemplate>
  171. <asp:TextBox ID="txtjul" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  173. </ItemTemplate>
  175. </asp:TemplateField>
  177. <asp:TemplateField HeaderText="Aug">
  179. <ItemTemplate>
  181. <asp:TextBox ID="txtaug" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  183. </ItemTemplate>
  185. </asp:TemplateField>
  187. <asp:TemplateField HeaderText="Sep">
  189. <ItemTemplate>
  191. <asp:TextBox ID="txtsep" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  193. </ItemTemplate>
  195. </asp:TemplateField>
  197. <asp:TemplateField HeaderText="Oct">
  199. <ItemTemplate>
  201. <asp:TextBox ID="txtoct" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  203. </ItemTemplate>
  205. </asp:TemplateField>
  207. <asp:TemplateField HeaderText="Nov">
  209. <ItemTemplate>
  211. <asp:TextBox ID="txtnov" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  213. </ItemTemplate>
  215. </asp:TemplateField>
  217. <asp:TemplateField HeaderText="Dec">
  219. <ItemTemplate>
  221. <asp:TextBox ID="txtdec" runat="server" CssClass="form-control nopadding numberonly mandatory" onchange="sumBudgetedValues(this)"></asp:TextBox>
  223. </ItemTemplate>
  225. </asp:TemplateField>
  227. <asp:TemplateField HeaderText="Total">
  229. <ItemTemplate>
  231. <asp:TextBox ID="txttotal" runat="server" CssClass="form-control nopadding" ReadOnly="true"></asp:TextBox>
  233. </ItemTemplate>
  235. </asp:TemplateField>
  237. </Columns>
  239. <EditRowStyle BackColor="#2461BF" />
  241. <FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" />
  243. <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  245. <PagerStyle CssClass="pagination-ys" />
  247. <RowStyle BackColor="#EFF3FB" />
  249. <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
  251. <SortedAscendingCellStyle BackColor="#F5F7FB" />
  253. <SortedAscendingHeaderStyle BackColor="#6D95E1" />
  255. <SortedDescendingCellStyle BackColor="#E9EBEF" />
  257. <SortedDescendingHeaderStyle BackColor="#4870BE" />
  259. </asp:GridView>
  262. <asp:Button ID="btnsubmit" CssClass="btn-lg btn-primary" OnClientClick="return Validation();" runat="server" Text="Submit" OnClick="btnsubmit_Click" />