Update total aggregate for a column when column's value is updated with dialog edit mode and reactive forms

Question

Hi guys,I have an empty grid and when the user starts to add rows in the grid, I want to show below 4 of the columns the total for each one, please see the screenshot below. The calculation for total value is calculated correctly when a row is added, but I have two issues:1) I want the total to be updated for a specific column when I update the value for that column in the grid, using dialog editing with reactive forms, but I see that the total isn't recalculated after the edit. As a note, the "Importo Linea" field value from the dialog is assigned to "Importo Proposto", "Importo Deliberato" fields in the grid when the model is mapped. So when I update the Importo Linea value in the dialog, the update should be reflected in the edited row and in the total value for that column.2) In the dialog I have "Details of undefined" title when I double click on a row to edit it;Could you please provide a solution for these?Thank you!

Sujith Kumar Rajkumar · Accepted Answer

Hi Ciprian-Catalin, 
 
Sorry we misunderstood your query. By default reactive aggregate update is not supported by inline and dialog edit modes as it is not feasible to anticipate the value change event for every editor. However, you can refresh the aggregates manually in the dialog edit mode by using the refresh method of aggregate module. This can be done in the Grid’s actionComplete event handler as demonstrated in the below code snippet, 
 




// Grid’s actionComplete event handler 
actionComplete(args) { 
    if (args.requestType === 'save') { 
        // The aggregate module is refreshed with the updated data 
        this.gridObj.aggregateModule.refresh(args.data); 
    } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-gku6di?file=app.component.ts 
 
More details on this can be checked in the below documentation link, 
 
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#refresh-aggregates-in-inline-edit-mode 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Sujith Kumar Rajkumar · Answer

Hi Ciprian-Catalin, 
 
Greetings from Syncfusion support. 
 
Please find the below response for your queries, 
 
Query – 1: “I want the total to be updated for a specific column when I update the value for that column in the grid, using dialog editing with reactive forms, but I see that the total isn't recalculated after the edit.” 
 
From the provided information and shared image we suspect that your requirement is to update the column value and aggregate value on editing itself as it gets updated by default on performing save action. The column values are retrieved from the Grid data source which will be updated on performing the save action successfully. The Grid data values cannot be updated while edit is still open(which is the current behavior) and even if we use workaround it can have many complexities like - the value can be modified multiple times, remote data binding(would make multiple server calls for update), etc., and so it is not feasible to update it on each data change. This is the default behavior of the Grid based on its current architecture and so it is not feasible to achieve your requirement. 
Query – 2: “In the dialog I have "Details of undefined" title when I double click on a row to edit it;” 
 
This problem occurs if a primary key column is not defined in the Grid since a primary key column is needed for performing CRUD actions. So please define a primary key column for the Grid to resolve the problem. 
 
More details on this can be checked in the below documentation link, 
 
https://ej2.syncfusion.com/angular/documentation/grid/editing/edit/ 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Ciprian-Catalin · Answer

Thank you for your response.I'm not sure if I was very clear in the explanation, it can be understood that I want the values edited in the dialog to be updated in real-time in the grid and in the aggregate without hitting the save button. I'll try to be more specific and I'll enumerate the steps for reproducing the issue:1) I'm creating a new row, I click save on the dialog, the row is added into the grid and the total in the aggregates is calculated correctly.2) I add another row, same process as before, click save, the row is added in the grid, the total in the aggregates is updated with the new value (the sum between the two columns), all good.3)  Then I want to update one row, I double-click on it, the dialog is opened and I changed the value for one field, let's say "Importo Linea" from the dialog form. Now when I click on save, the value is updated in the grid for that specific row, in the corresponding column in the grid (which is "Importo Proposto"), but the total aggregate for that updated column is not recalculated, it is the same as before the update.I don't know why the total is recalculated only when I add new rows from the dialog, and it is not recalculated when I edit an existing row and update the value for one column from the dialog.This is the logic for handling all the operations between dialog and grid:.ts:.html:Is anything missing from the implementation for the aggregates?

Ciprian-Catalin · Answer

Thank you for the solution!

Sujith Kumar Rajkumar · Answer

Hi Ciprian-Catalin, 

You’re welcome. 

Please get back to us if you require any further assistance. 

Regards, 
Sujith R