- Home
- Forum
- ASP.NET MVC
- Calculate cell value based on values of two cells in Batch Edit Mode
Calculate cell value based on values of two cells in Batch Edit Mode
|
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.ClientSideEvents(ce=> { ce.CellSave("cellSave"); })
.AllowPaging() /*Paging Enabled*/
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch); })
.ToolbarSettings(toolbar =>
{
-------------
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("Freight").HeaderText("Freight").AllowEditing(false).TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();
}))
</div>
<script type="text/javascript">
function cellSave(args) {
var gridObj = $("#FlatGrid").data("ejGrid");
var rowIndex = gridObj.selectedRowsIndexes;
if (args.columnName == "EmployeeID") { // after the change the employeeid column value
var employeeID = args.value;// getting the new value in employeeid column
var cellIndex = 2; // Freight column's cellIndex
gridObj.setCellText(rowIndex, cellIndex, employeeID * 5);
}
}
</script>
|
setCellText()
Used to update a particular cell value.
NOTE
It will work only for Local Data.This method applicable for all editMode’s except batch edit mode.
|
@(Html.EJ().Grid<object>("FlatGrid")
.ClientSideEvents(ce=> { ce.CellSave("cellSave"); })
-------------------
<script type="text/javascript">
function cellSave(args) {
var gridObj = $("#FlatGrid").data("ejGrid");
var rowIndex = gridObj.selectedRowsIndexes;
if (args.columnName == "EmployeeID") {
debugger
var employeeID = args.value;// getting the new value
var cellIndex = 4; // Freight column's cellIndex
gridObj.model.columns[4]['allowEditing'] = true; // 4 denotes the freight column’s index, enable the allowEditing for the disabled column
gridObj.setCellValue(rowIndex, "Freight", employeeID * 5);
gridObj.model.columns[4]['allowEditing'] = false; // 4 denotes the freight column’s index, enable the allowEditing for the disabled column
}
}
</script>
|
Hi Bruno,
We have analyzed your query and we found that you are using inline editMode in grid. Since CellSave event will works only in batch edit mode so we suggest you to use EndEdit event for Inline edit mode.
Please refer the code sample:
|
@(Html.EJ().Grid<object>("FlatGrid")
.ClientSideEvents(eve=>eve.EndEdit("endEdit")) -------------------
<script type="text/javascript"> function endEdit(args) { var gridObj = $("#FlatGrid").data("ejGrid"); var rowIndex = gridObj.selectedRowsIndexes; var employeeID = args.data.EmployeeID;// getting the new value var cellIndex = 4; // Freight column's cellIndex gridObj.setCellText(rowIndex, cellIndex, employeeID * 5);
}
</script> |
Please find the documentation link
https://help.syncfusion.com/api/js/ejgrid#events:endedit
Please let us know if you need any further assistance.
Regards,
Balasubramanian Masilamani
|
@(Html.EJ().Grid<object>("FlatGrid")
.AllowPaging()
.ClientSideEvents(cevent => cevent.ActionComplete("complete"))
---
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(75).Add();
col.Field("Freight").HeaderText("Freight").Width(100).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(90).Add();
col.HeaderText("Calculated Column").Template("<span id='CalcCol'>{{:EmployeeID * Freight }}</span>").Width(90).Add();
}))
</div>
<script type="text/javascript">
function complete(args) {
if (args.requestType == "beginedit" || args.requestType == "add") {
$("#" + this._id + "EmployeeID").keyup(function (event) {
Valuechange();
});
$("#" + this._id + "Freight").keyup(function (event) {
Valuechange();
});
}
}
function Valuechange(args) {
var employeeID = $("#FlatGrid" + "EmployeeID").val();
var freight = $("#FlatGrid" + "Freight").val();
$("#CalcCol")[0].innerHTML = parseFloat(employeeID) * parseFloat(freight);
}
</script>
|
You could try updating args.rowData within CellSave to reflect the most recent changes before triggering the total calculation—this often solves the issue in batch edit mode. For non-editable fields like TotalPrice, keeping the field editable in config but preventing manual input visually (e.g., with CSS or custom editors) usually works. I've seen similar patterns used in web-based tools like https://aliciacalculadora.net/ that rely on calculated fields based on user input.
Thanks for your valuable update. We have deprecated our EJ1 products with its Nugets and NPM Packages. So, we don't publish any new builds & packages for this product here after. Unfortunately, we will no longer be able to provide development support for this product. This means that we cannot offer bug fixes or feature implementations for EJ1 Please refer to the following link for a list of our retired products: https://help.syncfusion.com/common/essential-studio/essential-studio-retired-products
We retire products in order to maintain industry standards. It is highly recommended that you migrate to next generation JS controls. We also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive. This new-generation data grid control offers several benefits over our existing EJ1 Grid control like better performance, touch friendliness, light weight, and much more. JS2 DataGrid offers 2–3x improved performance in many scenarios. The Essential JS 2 documentation is regularly updated and maintained.
We suggest you look into our following product page for more details.
https://www.syncfusion.com/aspnet-mvc-ui-controls/grid
https://ej2.syncfusion.com/aspnetmvc/grid/gridoverview#/fluent2
https://ej2.syncfusion.com/aspnetmvc/documentation/grid/getting-started-mvc
Regards,
Farveen sulthana T
Solution to Problem 1: Use args.rowData Instead
In CellSave, args.rowData contains the current row with all latest in-memory values, including the new value just edited and any other unsaved ones in that row.
Update your CellSave like this
function CellSave(args){
var gridObj = $("#QuoteSimulationPlantCostsGrid").data("ejGrid");
var index = gridObj.selectedRowsIndexes[0];
// Use args.rowData to get current values in batch mode
var quantity = args.rowData.Quantity;
var unitPrice = args.rowData.UnitPrice;
var total = (quantity || 0) * (unitPrice || 0);
gridObj.setCellValue(index, "TotalPrice", total);
updatePlantTotals();
updateTotals();
}
Solution to Problem 2: Mark TotalPrice as Read-Only with CSS/UI, Not Grid Setting
Instead of setting .AllowEditing(false), allow editing programmatically but prevent manual edits via a combination of CSS and event handlers.
-
Leave
.AllowEditing()default (do not disable it) forTotalPrice. -
Use the
CellEditevent to cancel user editing:
javascript
function CellEdit(args) {
if (args.columnName === "TotalPrice") {
args.cancel = true; // prevents user editing
}
}
Optionally add CSS to make it look disabled:
.e-grid .e-rowcell[aria-colindex="X"] {
background-color: #f9f9f9;
pointer-events: none;
}
For more details, check out the official site of Calculadora Alicia.
For Problem 1, in batch mode, unsaved changes aren't reflected in getSelectedRecords(). Instead, use args.rowData to access updated values directly during CellSave.
For Problem 2, to update a non-editable field programmatically, keep AllowEditing(true) but use readOnly: true in EditTemplate or use args.row.find('td...') to set the value manually in the DOM. This way, it's not user-editable but still updatable in code.
Read more....
Be Clean Nj,
For Problem #1:
You can use
the batchChanges or getBatchChanges method to retrieve all pending changes
before the records are updated. This can help in managing edited records before updating/saving into the data source.
Reference: getBatchChanges - API Documentation
For Problem #2:
Based on your earlier request, the TotalPrice field was configured to be non-editable. The current implementation calculates the TotalPrice dynamically based on the values of the UnitPrice and Quantity fields.
Please confirm if you now require the TotalPrice field to be editable. If so, kindly provide more details about your exact requirement.
- Should changes to TotalPrice affect the UnitPrice or Quantity fields?
- Should the calculated values remain in sync?
- Is this change applicable to specific scenarios only?
Once we have a clear understanding of your updated requirement, we’ll be happy to assist you further.
You're facing a common challenge with Syncfusion's batch edit mode. In batch editing, the grid doesn’t immediately commit the edited value to the record object (getSelectedRecords() still returns the previous state). Instead, it holds temporary values in the internal batch changes.
✅ Solution for Problem 1:
To get the newest edited values, access them using the internal batch changes object (batchChanges.editedRecords) rather than relying on getSelectedRecords().
Here's a better way to retrieve current row values inside CellSave:
javascriptfunction CellSave(args) {
var gridObj = $("#QuoteSimulationPlantCostsGrid").data("ejGrid");
var batchData = gridObj.batchChanges.editedRecords;
var rowIndex = args.rowIndex;
// Find the edited row by primary key (or use row index carefully)
var editedRow = batchData.find(item => item.PlantCostId === args.row.data.PlantCostId);
if (editedRow) {
var quantity = editedRow.Quantity || args.row.data.Quantity;
var unitPrice = editedRow.UnitPrice || args.row.data.UnitPrice;
var total = (quantity * unitPrice) || 0;
gridObj.setCellValue(rowIndex, "TotalPrice", total);
}
updatePlantTotals();
updateTotals();
}
✅ Solution for Problem 2:
If you set AllowEditing(false) on the "TotalPrice" column, the field becomes read-only and locked for updates via setCellValue.
Instead, allow editing in the grid config but disable editing visually and logically using ClientSideEvents → CellEdit:
javascriptfunction CellEdit(args) {
if (args.columnName === "TotalPrice") {
args.cancel = true;
}
}
This way, users can’t manually edit "TotalPrice", but you can still update it programmatically with setCellValue().
By the way, if you're also dealing with other types of numeric or educational calculations outside of construction or finance (like percentage, area, interest, or academic math), this matematicias calculadora might be helpful. It’s simple, reliable, and great for educational or quick-reference use.
Hope this helps you fix both issues cleanly! Let me know if you’d like a working JSFiddle or example code structure.
That’s a solid breakdown of how to handle calculated fields in batch mode. I’ve also seen similar implementations where the logic uses temporary in-memory edits to keep results consistent across rows. For anyone who wants to experiment with simplified numeric computations or quick math validations, the 2025 calculator can be really handy for testing small calculation cases before finalizing grid logic.
Hi Sebestian,
Thanks for your suggestion.
Regards,
Pavithra S
Use args.rowData in batch mode to get the updated values, then force-update the read-only TotalPrice with:
gridObj.setCellValue(args.rowIndex, "TotalPrice", qty * price, false);- 18 Replies
- 12 Participants
-
CR CLAUDIO RICCARDI
- Mar 23, 2017 10:28 AM UTC
- Nov 25, 2025 11:27 AM UTC
