1. Home
  2. Forum
  3. Angular - EJ 2
  4. How to update (Agreegate) column cell based on other cell values of that particular rowin batch mode

How to update (Agreegate) column cell based on other cell values of that particular rowin batch mode

In this screen show, when ever I enter the numeric  value in DeshiGodown1 say 21,  I want to updte the Store Total value similarly if I enter 20 into DeshiShop1 then in store total it will become 21+20 = 41 i.e 41 will be visible. Please help. Also Wine Name, Brand Total and Store Total are my hardcoded column and freezed rest are my dynamic columns. I am using CellSave event but in that I am not able to update the vlue of Store Total column. 

10 Replies 1 reply marked as answer
AG Ajith Govarthan Syncfusion Team June 26, 2020 01:26 PM UTC

Hi Rakhi, 

Thanks for contacting Syncfusion support. 

Based on your requirement you need to update the value of an column based on other column value. To achieve your requirement we have used actionBegin event of EJ2 Grid.  

When you edit and save data the actionBegin event will be triggered with the request type as save and in that we have added all the Shop count and changed the TotalStore value. For your convenience we have attached the sample so please refer the sample for your reference. 



Regards, 
Ajith G. 


RA RakhiS replied to Ajith Govarthan June 29, 2020 10:13 AM UTC

Hi Rakhi, 

Thanks for contacting Syncfusion support. 

Based on your requirement you need to update the value of an column based on other column value. To achieve your requirement we have used actionBegin event of EJ2 Grid.  

When you edit and save data the actionBegin event will be triggered with the request type as save and in that we have added all the Shop count and changed the TotalStore value. For your convenience we have attached the sample so please refer the sample for your reference. 



Regards, 
Ajith G. 


Thanks for the response, but my requirement is different. I am having no button, its totally on client side. I want to add the values just after entry is done in cell. 
I have mentioned this clearly. Please have a look into it once again. 

PK Prasanna Kumar Viswanathan Syncfusion Team June 30, 2020 10:31 AM UTC

Hi Rakhi, 
 
Thanks for the update. 
 
Based on your query we understood that you need to update the total value in Store Total column when you enter the value in other columns (Deshi Godown1 + Deshi Shop 1). In previous update you have mentioned that you do not have any button in the Grid. So, before we provide solution on your query we need the following details, 
 
1. You have mentioned that you do not have any button in the Grid. So, then how will you update the data in the Grid?  
 
2. In this you also mentioned that (Deshi Godown1 + Deshi Shop 1) are dynamic columns. So, please share the code example of adding dynamic columns in the Grid?  
 
3. Share the complete grid rendering code. 
 
4. Share the edit mode(Normal, Batch) that you are used in the Grid. 
 
Regards, 
Prasanna Kumar N.S.V 


RA RakhiS replied to Prasanna Kumar Viswanathan July 2, 2020 02:55 AM UTC

Hi Rakhi, 
 
Thanks for the update. 
 
Based on your query we understood that you need to update the total value in Store Total column when you enter the value in other columns (Deshi Godown1 + Deshi Shop 1). In previous update you have mentioned that you do not have any button in the Grid. So, before we provide solution on your query we need the following details, 
 
1. You have mentioned that you do not have any button in the Grid. So, then how will you update the data in the Grid?  
 
2. In this you also mentioned that (Deshi Godown1 + Deshi Shop 1) are dynamic columns. So, please share the code example of adding dynamic columns in the Grid?  
 
3. Share the complete grid rendering code. 
 
4. Share the edit mode(Normal, Batch) that you are used in the Grid. 
 
Regards, 
Prasanna Kumar N.S.V 


Hi,
Please find the answers belows:


1. You have mentioned that you do not have any button in the Grid. So, then how will you update the data in the Grid?  
Ans: Client Side by using cellsave event I am getting the values I am adding it and now I want to show the sum in the store column.
 
2. In this you also mentioned that (Deshi Godown1 + Deshi Shop 1) are dynamic columns. So, please share the code example of adding dynamic columns in the Grid?  
getStoreMappingForInvoice() {
    this._purchaseInvoicesService.getStoreWineMappingByInvoiceId(42).subscribe
      (
        data => {
          this.distributionData = JSON.parse(data[0]["jsonText"]);
        
        }
      )
  }
 
3. Share the complete grid rendering code. 
Ans: In distribution data I am getting my columns
<ejs-grid #grid1 [dataSource]='distributionData' gridLines="Both" 
                  [frozenColumns]='4' [editSettings]='distributionEditSettings' (queryCellInfo)='customiseCell($event)'
                  (cellSave)="onsave($event)" (load)='load($event)' [allowTextWrap]="true" (actionComplete)='actionComplete($event)'                  
                  wrapMode="Both">
        </ejs-grid>
 
4. Share the edit mode(Normal, Batch) that you are used in the Grid. 
Ans: Batch mode

AG Ajith Govarthan Syncfusion Team July 3, 2020 01:53 PM UTC

Hi RakhiS, 

Thanks for the update. 

We checked your query and suspect you would like to change the TotalStore column value when entering data in the column shop1 or shop2. But the value of the edit form will only be updated in our EJ2 Grid Component when you focus out of the cell.  

So we have achieved your query when you focus out of the edited cell. When you focus out of the cell  the cellSaved event will be triggered and in that we have updated the data in the TotalStore column value using the updateCell and batchSave method. 

For your convenience we have attached the sample so please refer them for your reference. 


Documentation Links: 

Please get back to us if you need further assistance. 

Regards, 
Ajith G. 


RA RakhiS January 11, 2021 07:35 AM UTC

hi,
my data is getting clear in the same senerio when i come in next row using tab. please help me out into this

AG Ajith Govarthan Syncfusion Team January 12, 2021 02:10 PM UTC

Hi RakhiS, 
 
Query: my data is getting clear in the same senerio when i come in next row using tab. please help me out into this 
 
Based on your query we have prepared sample with batch edit mode of the grid component and found everything works fine at our end. For your convenience we have attached the sample so please refer the sample for your reference. 
 
 
UG-links: 
 
 
If you still face the issue, then please share the below details to find the root cause of the issue. 
 
  1. If possible, please try to reproduce the issue in the attached sample.
 
  1. Share the complete grid code example.
 
  1. Share the screenshot/video demonstration of the issue.
 
  1. Share the Syncfusion package version.
 
Regards, 
Ajith G. 



Marked as answer
RA RakhiS January 13, 2021 05:44 AM UTC


This is the same screenshot which I shared before, in this when I enter values using tab in all the shop and when I press enter after putting value in shop3 to come to next row, then it is clearing all my data .

I am using following method to enter and calculation the sum: It is working fine, but the thing is my data is getting clear when I press enter to come next row.
  onsave(args) {
    var columnname; let columnval; var distributionTotal: number = 0;
    var dataLength = JSON.stringify(args.rowData).split(",").length;//converted json string into array and getting its length

    if (args.column.index == dataLength - 1) {
      //this.grid1.refreshColumns();
    }
    else {
      for (var i = 0; i < dataLength; i++) { //assuming that wine name will not have "," 
        columnname = JSON.stringify(args.rowData).split(",")[i].split(":")[0];
        columnval = JSON.stringify(args.rowData).split(",")[i].split(":")[1];

        if (i == dataLength - 1) {
          columnval = columnval.replace("}", "")//inorder to remove last "}" we use this condition
        }
        //it will leave the hardcoded initial 4 columns and consoling others dynamic values
        if (!((columnname.includes("WineId")) || (columnname.includes("Wine Name")) || (columnname.includes("Brand Total")) || (columnname.includes("Store Total")))) {
          if (columnval == "null") {
            columnval = 0;
          }
          var numvalue: number = +columnval; //converting string to number
          distributionTotal = distributionTotal + numvalue;

        }
      }
      //Above for loop doesn't consider the value of last change instead considers the previous value.
      //To  get the correct total we added current value and subtracting the previous value in the following code.
      if (args.previousValue === null) {
        args.previousValue = 0;
      }
      distributionTotal = distributionTotal + args.value - +args.previousValue;

      // ***Important*** Update store total cell value
      this.grid1.setCellValue(args.rowData.WineId, 'Store Total', distributionTotal);

      this.storeTotal = distributionTotal;
    }
  }

RA RakhiS replied to RakhiS February 11, 2021 07:00 AM UTC


This is the same screenshot which I shared before, in this when I enter values using tab in all the shop and when I press enter after putting value in shop3 to come to next row, then it is clearing all my data .

I am using following method to enter and calculation the sum: It is working fine, but the thing is my data is getting clear when I press enter to come next row.
  onsave(args) {
    var columnname; let columnval; var distributionTotal: number = 0;
    var dataLength = JSON.stringify(args.rowData).split(",").length;//converted json string into array and getting its length

    if (args.column.index == dataLength - 1) {
      //this.grid1.refreshColumns();
    }
    else {
      for (var i = 0; i < dataLength; i++) { //assuming that wine name will not have "," 
        columnname = JSON.stringify(args.rowData).split(",")[i].split(":")[0];
        columnval = JSON.stringify(args.rowData).split(",")[i].split(":")[1];

        if (i == dataLength - 1) {
          columnval = columnval.replace("}", "")//inorder to remove last "}" we use this condition
        }
        //it will leave the hardcoded initial 4 columns and consoling others dynamic values
        if (!((columnname.includes("WineId")) || (columnname.includes("Wine Name")) || (columnname.includes("Brand Total")) || (columnname.includes("Store Total")))) {
          if (columnval == "null") {
            columnval = 0;
          }
          var numvalue: number = +columnval; //converting string to number
          distributionTotal = distributionTotal + numvalue;

        }
      }
      //Above for loop doesn't consider the value of last change instead considers the previous value.
      //To  get the correct total we added current value and subtracting the previous value in the following code.
      if (args.previousValue === null) {
        args.previousValue = 0;
      }
      distributionTotal = distributionTotal + args.value - +args.previousValue;

      // ***Important*** Update store total cell value
      this.grid1.setCellValue(args.rowData.WineId, 'Store Total', distributionTotal);

      this.storeTotal = distributionTotal;
    }
  }

Please reply for the same

AG Ajith Govarthan Syncfusion Team February 12, 2021 11:49 AM UTC

Hi RakhiS, 
 
Sorry for the delayed update. 
 
Query: This is the same screenshot which I shared before, in this when I enter values using tab in all the shop and when I press enter after putting value in shop3 to come to next row, then it is clearing all my data . 
 
Based on the attached screenshot we suspect that you have used the Normal edit mode in your grid application and you have also used the setCellValue method which is related to the batch editing feature. So, please share the below details to find the root cause of the issue. 
 
  1. If possible, please share the issue reproducible sample.
 
  1. Share the complete Grid code example with edit mode and event’s bound to the grid application.
 
  1. Share the screenshot/video demonstration of the issue.
 
  1. Share the Syncfusion package version.
 
Regards, 
Ajith G. 


Loader.
Up arrow icon