Batch editing mode issues

[Mladen Lakic]

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

[Mladen Lakic]

Hello, 

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 16.2.0.46.

Attachment: batch_edit_issues_2_7d15192f.zip

[Mladen Lakic]

Hi, 

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):

[Thavasianand Sankaranarayanan]

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. 

[index.js] 

var grid = new ej.grids.Grid({ 

        dataSource: localdata, 

        allowPaging: true, 

        pageSettings: { pageCount: 5 }, 

        editSettings:{allowEditing:true, allowDeleting:true, allowAdding:true, mode:"Batch"}, 

        toolbar:["Add","Edit","Delete","Update","Cancel"], 

        cellSave:function(args){ 

        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); 

      if(!isNaN(amount)){ 

      args.rowData.amount = amount; 

      this.editModule.updateCell(editedRowIndex, "Amount", amount); 

      } 

    } 

        }, 

        columns: [ 

          .   .    .   .  

        ], 

        aggregates: [{ 

            columns: [{ 

                type: 'Sum', 

                field: 'Amount', 

                format: 'C2', 

                footerTemplate: 'Total: ${Sum}' 

            }] 

        }] 

    }); 

    grid.appendTo('#Grid'); 

Sample link: https://stackblitz.com/edit/wi4dm4?file=index.js 

Help Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/aggregates/?no-cache=1#footer-aggregate 

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

Regards, 

Thavasianand S. 

[Mladen Lakic]

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

},

[Mladen Lakic]

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

[Thavasianand Sankaranarayanan]

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.  

Sample link: https://stackblitz.com/edit/wi4dm4-phyjg9?file=index.js 

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.

Regards, 

Thavasianand S. 

[Mladen Lakic]

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

https://stackblitz.com/edit/aggregate-rouding-issue

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

Attachment: aggregateroudingissue_f6e639a9.zip

[Thavasianand Sankaranarayanan]

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 8^th 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.  

 

https://www.syncfusion.com/feedback/5925/format-is-not-applied-to-footertemplate-aggregate-when-dynamic-data-update-in-grid 

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

  

regards, 

Thavasianand S. 

[Renjith Singh Rajendran]

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, 

Sample : https://stackblitz.com/edit/aggregate-rouding-issue-vmho7b?file=index.js 

 

Documentation : https://ej2.syncfusion.com/javascript/documentation/grid/columns/?no-cache=1#column-type 

 

     

{ 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. 

Regards, 

Renjith Singh Rajendran.