How to make calculation inside an Edit Form: Jquery
Question
Answers
-
User-1330468790 posted
Hi, 9peculiar
Thank you for your reply. For the issues you encounter, you can refer to the following example:
Foreground code:
<head runat="server"> <title></title> <link type="text/css" href="Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> <script src="Scripts/jquery-3.4.1.js"></script> <script src="Scripts/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="Scripts/jquery.jqGrid.js" type="text/javascript"></script> <script type="text/javascript"> function sum() { $('input[id*="txt4"]').attr("readOnly", true); $('input[id*="txt"]').on("change", function () { var txt1 = $('input[id*="txt1"]').val(); var txt2 = $('input[id*="txt2"]').val(); var txt3 = $('input[id*="txt3"]').val(); var value = Number(txt1) + Number(txt2) + Number(txt3); $('input[id*="txt4"]').val(value); }); } $(function () { $("#dataGrid").jqGrid({ url: 'Test.aspx/GetDataFromDB', datatype: 'json', mtype: 'POST', serializeGridData: function (postData) { return JSON.stringify(postData); }, gridComplete: function () { var ids = jQuery("#dataGrid").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var cl = ids[i]; be = "<input style='height:22px;width:20px;' type='button' id='editBtn" + i + "' value='E' onclick=\"jQuery('#dataGrid').editRow('" + cl + "');sum()\" />"; se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#dataGrid').saveRow('" + cl + "');\" />"; ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#dataGrid').restoreRow('" + cl + "');\" />"; jQuery("#dataGrid").jqGrid('setRowData', ids[i], { act: be + se + ce }); } }, ajaxGridOptions: { contentType: "application/json" }, loadonce: true, colNames: ['act', 'txt1', 'txt2', 'txt3', 'SUM'], colModel: [ { name: 'act', index: 'act', width: 80 }, { name: 'txt1', index: 'txt1', width: 140, editable: true, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } }, { name: 'txt2', index: 'txt2', width: 140, editable: true, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } }, { name: 'txt3', index: 'txt3', width: 140, editable: true, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } }, { name: 'txt4', index: 'SUM', width: 140, editable: true, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } } ], pager: '#pagingGrid', rowNum: 5, rowList: [10, 20, 30], viewrecords: true, gridview: true, jsonReader: { page: function (obj) { return 1; }, total: function (obj) { return 1; }, records: function (obj) { return obj.d.length; }, root: function (obj) { return obj.d; }, repeatitems: false, id: "0" }, }); }); $('#dataGrid').jqGrid('navGrid', "#pagingGrid", { edit: true, add: true, del: false }); </script> </head> <body style="font-size: 20px"> <form id="form1" runat="server"> <table style="border: solid 2px red; width: 100%; vertical-align: central;"> <tr> <td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-family: 'Times New Roman'; font-weight: bold; font-size: 20pt; color: chocolate;">jQ Grid demo </td> </tr> <tr> <td style="text-align: center; vertical-align: central; padding: 50px;"> <table id="dataGrid" style="text-align: center; font-size: 20px"></table> <div id="pagingGrid"></div> </td> </tr> </table> </form> </body>Code Behind:
[WebMethod] public static List<Dictionary<string, object>> GetDataFromDB() { DataTable dt = new DataTable(); using (SqlConnection con = new SqlConnection(@"Server=.;Database=TestDB;Trusted_Connection=True;")) { using (SqlCommand cmd = new SqlCommand("SELECT id,txt1,txt2,txt3,txt4 from test", con)) { con.Open(); SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(dt); System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); Dictionary<string, object> row; foreach (DataRow dr in dt.Rows) { row = new Dictionary<string, object>(); foreach (DataColumn col in dt.Columns) { row.Add(col.ColumnName, dr[col]); } rows.Add(row); } return rows; } } }Result:
According to your description, I suggest you keep the value in number instead of currency format as number format is more friendly and it will save time from coding for dealing with currency in calculation.
Hope this can help you.
Best regards,
Sean
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
All replies
-
User-1330468790 posted
Hi, 9peculiar
Based on your description, I suggest you could do like this, please refer to the following example:
Code:
<body> <form id="sum" runat="server"> <div> <input id="txt1" type="text" />+ <input id="txt2" type="text" />+ <input id="txt3" type="text" />= <input id="txt4" type="text" readonly="true"/> </div> </form> <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script> <script> $(document).ready(function () { $("#txt1,#txt2,#txt3").on("change", function () { var txt1 = $("#txt1").val(); var txt2 = $("#txt2").val(); var txt3 = $("#txt3").val(); var value = Number(txt1) + Number(txt2) + Number(txt3); $("#txt4").val(value); }); }); </script> </body>Result:
I would like to know if this can help you meet your needs.
If it is another requirement, can you describe it in detail?
Best regards,
Sean
-
User-1330468790 posted
Hi, 9peculiar
Thank you for your reply. For the issues you encounter, you can refer to the following example:
Foreground code:
<head runat="server"> <title></title> <link type="text/css" href="Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> <script src="Scripts/jquery-3.4.1.js"></script> <script src="Scripts/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="Scripts/jquery.jqGrid.js" type="text/javascript"></script> <script type="text/javascript"> function sum() { $('input[id*="txt4"]').attr("readOnly", true); $('input[id*="txt"]').on("change", function () { var txt1 = $('input[id*="txt1"]').val(); var txt2 = $('input[id*="txt2"]').val(); var txt3 = $('input[id*="txt3"]').val(); var value = Number(txt1) + Number(txt2) + Number(txt3); $('input[id*="txt4"]').val(value); }); } $(function () { $("#dataGrid").jqGrid({ url: 'Test.aspx/GetDataFromDB', datatype: 'json', mtype: 'POST', serializeGridData: function (postData) { return JSON.stringify(postData); }, gridComplete: function () { var ids = jQuery("#dataGrid").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var cl = ids[i]; be = "<input style='height:22px;width:20px;' type='button' id='editBtn" + i + "' value='E' onclick=\"jQuery('#dataGrid').editRow('" + cl + "');sum()\" />"; se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#dataGrid').saveRow('" + cl + "');\" />"; ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#dataGrid').restoreRow('" + cl + "');\" />"; jQuery("#dataGrid").jqGrid('setRowData', ids[i], { act: be + se + ce }); } }, ajaxGridOptions: { contentType: "application/json" }, loadonce: true, colNames: ['act', 'txt1', 'txt2', 'txt3', 'SUM'], colModel: [ { name: 'act', index: 'act', width: 80 }, { name: 'txt1', index: 'txt1', width: 140, editable: true, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } }, { name: 'txt2', index: 'txt2', width: 140, editable: true, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } }, { name: 'txt3', index: 'txt3', width: 140, editable: true, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } }, { name: 'txt4', index: 'SUM', width: 140, editable: true, formatter: 'currency', formatoptions: { prefix: '$', thousandsSeparator: ',' } } ], pager: '#pagingGrid', rowNum: 5, rowList: [10, 20, 30], viewrecords: true, gridview: true, jsonReader: { page: function (obj) { return 1; }, total: function (obj) { return 1; }, records: function (obj) { return obj.d.length; }, root: function (obj) { return obj.d; }, repeatitems: false, id: "0" }, }); }); $('#dataGrid').jqGrid('navGrid', "#pagingGrid", { edit: true, add: true, del: false }); </script> </head> <body style="font-size: 20px"> <form id="form1" runat="server"> <table style="border: solid 2px red; width: 100%; vertical-align: central;"> <tr> <td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-family: 'Times New Roman'; font-weight: bold; font-size: 20pt; color: chocolate;">jQ Grid demo </td> </tr> <tr> <td style="text-align: center; vertical-align: central; padding: 50px;"> <table id="dataGrid" style="text-align: center; font-size: 20px"></table> <div id="pagingGrid"></div> </td> </tr> </table> </form> </body>Code Behind:
[WebMethod] public static List<Dictionary<string, object>> GetDataFromDB() { DataTable dt = new DataTable(); using (SqlConnection con = new SqlConnection(@"Server=.;Database=TestDB;Trusted_Connection=True;")) { using (SqlCommand cmd = new SqlCommand("SELECT id,txt1,txt2,txt3,txt4 from test", con)) { con.Open(); SqlDataAdapter da = new SqlDataAdapter(cmd); da.Fill(dt); System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); Dictionary<string, object> row; foreach (DataRow dr in dt.Rows) { row = new Dictionary<string, object>(); foreach (DataColumn col in dt.Columns) { row.Add(col.ColumnName, dr[col]); } rows.Add(row); } return rows; } } }Result:
According to your description, I suggest you keep the value in number instead of currency format as number format is more friendly and it will save time from coding for dealing with currency in calculation.
Hope this can help you.
Best regards,
Sean
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
