We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Batch editing mode issues

Hi, everyone! 

I'm very need your help.
We use your grid control to display calculated payroll data. For load and binding data I used local data source with AJAX-request. We need to recalculate the 'Amount' field and its aggregation row by changing values in  'Quanity', 'Multiplier', 'Value' fields in Batch mode. I used the approach described in this thread: 'https://www.syncfusion.com/forums/129519/calculate-cell-value-based-on-values-of-two-cells-in-batch-edit-mode';

Columns definition:
columns: [
{ field: 'Id', headerText: 'ID', width: 30, visible: false, showInColumnChooser: false, isPrimaryKey: true },
{ field: 'profileId', foreignKeyField: 'profileId', foreignKeyValue: 'profileName', dataSource: that.usersDS, headerText: 'User Name', width: 90, visible: true, showInColumnChooser: false,},
{ field: 'wageTypeStartTime', headerText: 'Date', width: 100, format: { type:'date', format:'ccc dd.MM.yyyy' }, editType: 'datepickeredit', edit: { params: { format:'dd.MM.yyyy' }} },
{ field: 'wageTypeEndTime', headerText: 'End time', width: 200, visible: false, showInColumnChooser: false },
{ field: 'wageTypeId', foreignKeyField: 'wageTypeId', foreignKeyValue: 'wageTypeName', dataSource: that.wageTypesDS, headerText: 'Wage Type', width: 90, visible: true, showInColumnChooser: false },
{ field: 'quantity', headerText: 'Quantity', editType: 'numericedit', format: 'N2', width: 50 },
{ field: 'multiplier', headerText: 'Multiplier', editType: 'numericedit', format: 'N3', visible: true, width: 50},
{ field: 'value', headerText: 'Value', editType: 'numericedit', format: 'C2', width: 50 },
{ field: 'amount', headerText: 'Amount', format: 'C2', allowEditing: false, width: 50 },
{ field: 'comment', headerText: 'Comment', visible: false, width: 100 },
{ field: 'status', headerText: 'Status', width: 50, valueAccessor: that.statusFormatter, allowEditing: false },
{ headerText: 'Actions', width: 60,
commands: [{ type: 'EditCustom', buttonOption: { iconCss: 'fa fa-payroll-edit fa-pencil', cssClass: 'e-flat', click: that.editItemCommand } },
{ type: 'Delete', buttonOption: { iconCss: 'fa fa-payroll-delete fa-trash', cssClass: 'e-flat' } },
{ type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },
{ type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } },
{ type: 'Approve', buttonOption: { iconCss: 'fa fa-payroll-approve fa-thumbs-o-up', cssClass: 'e-flat', click: that.approveItemCommand } },
{ type: 'Disapprove', buttonOption: { iconCss: 'fa fa-payroll-disapprove fa-thumbs-o-down', cssClass: 'e-flat', click: that.disapproveItemCommand } },
{ type: 'Revoke', buttonOption: { iconCss: 'fa fa-payroll-revoke fa-undo', cssClass: 'e-flat', click: that.revokeItemCommand } } ]
{ type: 'checkbox', /* template: '#checkboxTemplate', */ allowFiltering: false, allowSorting: false, width: 50 },

Cell Save Event:
* After 'cellSave'
gridCellSave : function(args) {
var editedRowIndex = parseInt($(args.cell).closest('.e-row').attr('aria-rowindex'));

// only for columns: "quantity", "multiplier", "value"
if(args.columnName === "quantity" || args.columnName === "multiplier" || args.columnName === "value") {
var quantity = args.columnName === "quantity" ? args.value : args.rowData.quantity;
var value = args.columnName === "value" ? args.value : args.rowData.value;
var multiplier = args.columnName === "multiplier" ? args.value : args.rowData.multiplier;
var amount = (quantity * multiplier * value);

args.rowData.amount = amount;
this.setCellValue(editedRowIndex, "amount", amount);

// If selection changed in column 'wageTypeId'
if(args.columnName === "wageTypeId") {
var selWagetypeId = args.value;
var wageTypeObject = anfPayrollCalculation.wageTypesDS.find(function(element) {
return element.wageTypeId == selWagetypeId;

args.rowData.multiplier = wageTypeObject.wageTypeMultiplier;
args.rowData.amount = (args.rowData.multiplier * args.rowData.quantity * args.rowData.value);
this.setCellValue(editedRowIndex, "multiplier", wageTypeObject.wageTypeMultiplier);
this.setCellValue(editedRowIndex, "amount", args.rowData.amount);

Here are the problems that I have with this:

Issue# 1: Aggregated values are not recalculated when changes are made to more than one column.

Issue# 2: In some cases I got the following aggregation sum (with large number of digit after decimal sign):

Issue# 3: Batch mode saves previous recalculated value for 'Amount' field (see attached video).

I would appreciate your help!

Attachment: before_batch_save_a5fd260c.zip

9 Replies

ML Mladen Lakic April 10, 2019 08:14 AM UTC


I have updates regarding issues with recalculation in Batch editing mode: 

Issue# 4: After sorting, the result of the Amount recalculation is inserted into the wrong row or doesn't insert at all (see attached video).

Issue# 5: The result of the calculation of the Amount is not inserted on other pages (see attached video).

PS.: We use Essential Studio for JavaScript version

Attachment: batch_edit_issues_2_7d15192f.zip

ML Mladen Lakic April 10, 2019 01:07 PM UTC


I got to solve almost all of these problems (# .: 1,3,4,5), using grid.editModule.updateCell () method instead of grid.setCellValue ().

So, only the 2nd issue left unsolved:
Issue# 2: In some cases I got the following aggregation sum (with large number of digit after decimal sign):

TS Thavasianand Sankaranarayanan Syncfusion Team April 12, 2019 07:23 AM UTC

Hi Mladen, 

Query :  In some cases I got large number of digit values after decimal in the aggregation sum. 

We have validated your query provided information. We suggest you to define the format of aggregate value on the aggregates property. Please refer the below code example for more information. 

var grid = new ej.grids.Grid({ 
        dataSource: localdata, 
        allowPaging: true, 
        pageSettings: { pageCount: 5 }, 
        editSettings:{allowEditing:true, allowDeleting:true, allowAdding:true, mode:"Batch"}, 
        var editedRowIndex = parseInt(ej.base.closest(args.cell,".e-row").getAttribute("aria-rowindex"),10); 
        if(args.columnName === "Quantity" || args.columnName === "Multiplier" || args.columnName === "Value") { 
      var quantity = args.columnName === "Quantity" ? args.value : args.rowData.Quantity; 
      var value = args.columnName === "Value" ? args.value : args.rowData.Value; 
      var multiplier = args.columnName === "Multiplier" ? args.value : args.rowData.Multiplier; 
      var amount = (quantity * multiplier * value); 
      args.rowData.amount = amount; 
      this.editModule.updateCell(editedRowIndex, "Amount", amount); 
        columns: [ 
          .   .    .   .  
        aggregates: [{ 
            columns: [{ 
                type: 'Sum', 
                field: 'Amount', 
                format: 'C2', 
                footerTemplate: 'Total: ${Sum}' 

Please get back to us, if you need further assistance. 

Thavasianand S. 

ML Mladen Lakic April 15, 2019 06:05 AM UTC

Hi, Thavasianand

Thanks for the response. Yes, I did it, but it still does not work. Here is my aggregates config snippet:

aggregates: [{
columns: [{
type: 'Sum',
field: 'amount',
format: 'C2',
groupFooterTemplate: 'Total amount: ${Sum}', /* bottom */
footerTemplate: 'Total: ${Sum}' /* total gross - bottom of all table */
// groupCaptionTemplate: 'Total amount: ${Sum}' /* top */

ML Mladen Lakic April 15, 2019 07:49 AM UTC

And I also have the following problem (aggregation does not recalculate values but concatenates them):

TS Thavasianand Sankaranarayanan Syncfusion Team April 16, 2019 01:01 PM UTC

Hi Mladen, 

We have validated the reported issue provided information in our end. But unfortunately, we are unable to reproduce the reported defect on our Grid with you requirements and we are share the working sample link for your assistance.  

Could you please provide more information it will helpful for us to provide a better solution as soon as possible. 

  1. Share the issue reproduce sample code.
  2. Share the EJ2 package version.
  3. Share the Video to demonstrate the issue.

Thavasianand S. 

ML Mladen Lakic April 17, 2019 08:50 AM UTC

Hi, Thavasianand
I managed to solve the 'Contatenate' problem. The reasons of that problem was in this expression (sorry, I left the wrong code snippets at earlier requests): 

var amount = (quantity * multiplier * value).toFixed(2);

I replaced that expression to the following and it fixed issue:

var amount = parseFloat((quantity * multiplier * value).toFixed(2));

But what regarding the rounding issues in aggregates, I prepared video (attached to this reply) and share code example on "stackblitz":


Could you also explain why when I use a data source for a foreign column my currency sign disappears?

Attachment: aggregateroudingissue_f6e639a9.zip

TS Thavasianand Sankaranarayanan Syncfusion Team April 22, 2019 11:09 AM UTC

Hi Mladen, 

Thanks for your update.. 

We have validated the defect Format is not applied to footertemplate aggregate when dynamic data update in Grid you have initiated with us. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our 8th May, 2019 patch release. 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

Note: Given feedback portal is under reviewing status and it will be visible once it get reviewed. 
Thavasianand S. 

RS Renjith Singh Rajendran Syncfusion Team May 1, 2019 03:32 PM UTC

Hi Mladen, 

We regret for the inconvenience caused. 

We suggest you to set the type for the aggregate column. When column type is not set the type for column will be fetched from the first row data of column. Since there will be no initial data in Grid and no type set for the column. This problem arise. 

We have modified the sample from your previous update, please find the sample from the link below, 
{ field: 'Amount', type: 'number', headerText: 'Amount', width: 140, format: 'C2', editType: "numberedit", allowEditing: false } 

So we suggest you to set the “type” for the aggregate column to overcome the issue you are facing. 

Renjith Singh Rajendran. 

Live Chat Icon For mobile
Up arrow icon