Batch editing mode issues

Mladen Lakic

Asked On April 9, 2019 02:24 PM UTC

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

Reply | Reply with quote

Mladen Lakic

Replied On April 10, 2019 08:14 AM UTC

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

Reply | Reply with quote

Mladen Lakic

Replied On April 10, 2019 01:07 PM UTC

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On 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.

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

Reply | Reply with quote

Mladen Lakic

Replied On 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 */
            },

Reply | Reply with quote

Mladen Lakic

Replied On April 15, 2019 07:49 AM UTC

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On 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.

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.

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

Regards,

Thavasianand S.

Reply | Reply with quote

Mladen Lakic

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

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On 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 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.

Reply | Reply with quote

Renjith Singh Rajendran [Syncfusion]

Replied On 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,

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
143892	Apr 9,2019 02:24 PM UTC	May 1,2019 03:32 PM UTC	JavaScript - EJ 2	9

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US