Aggregate In Editable Grid

Question

Dear Team1. You have given example of How to make a Grid column always editable. I want one feature in this example that is    Aggregate and Custom Aggregate. This Aggregate value should be change of every editable column value change by user. I have three editable column I want when user press Arrow Keys like (Up, Down ,Right and Left) the focus of editable column should be work according of these keys.I am mentioning below link of your example.https://ej2.syncfusion.com/angular/documentation/grid/editing/edit/#how-to-make-a-grid-column-always-editable 2. Editable grid Normal Mode ​we want Aggregate. This 
Aggregate value should be work when I change value in editable column.RegardsNagendra Gupta

Joseph Christ Nithin Issack · Answer

Hi Nagendra,  Greetings from Syncfusion
support.  Based on your query,
you want to refresh the aggregates based on the values changed in the column.
Your requirement can be achieved by using the `grid.aggregateModule.refresh()`
method.   Please refer the below
code example.

created(args) {
      this.grid.element.addEventListener(
        'keyup',
        function (e) {
          // Bind the keyup event for the grid.
          if ((e.target as any).classList.contains('custemp')) {
            // Based on this condition, you can find whether the target is an input element or not.
            var row = parentsUntil(e.target as any, 'e-row');
            var rowIndex = (row as any).rowIndex; // Get the row index.
            var uid = row.getAttribute('data-uid');
            var rowData = this.grid.getRowObjectFromUID(uid).data; // Get the row data.
            (rowData as any).Freight = (e.target as any).value; // Update the new value for the corresponding column.
            this.grid.updateRow(rowIndex, rowData); // Update the modified value in the row data.
            this.grid.aggregateModule.refresh();
          }
        }.bind(this)
      );
    }

Sample: https://stackblitz.com/edit/angular-6zpp2r?file=app.component.html,app.component.tsPlease get back to us for further details.Regards,Joseph I

If this post is helpful, please consider Accepting it as the solution so that
other members can locate it more quickly.

Nagendra Gupta · Answer

Hi 
Joseph Christ Nithin Issack,Thanks for your quick reply. This given solution is working for me. I have a another requirement in same example which you given me.If I change the value of editable column that is reflect another column value as per formula in a same row.Example :- If I have three columns.              
Rate (Non Editable)

Qty (​Editable)​Amount (Non Editable)100550020061200Aggregates ($Sum)111700When I change the value of Qty then Amount value change according to formula. Formula is Rate * Qty = Amount.

RegardsNagendra Gupta

Nithya Sivaprakasam · Answer

Hi Nagendra,Thanks for your update.Query:” If I change the value of editable column that is
reflect another column value as per formula in a same row.”Based on your requirement, we have prepared a sample for the
query when changing the value of the editable column that should be reflected
in another column.Kindly check the below sample to meet your requirement.Sample code:

App.component.ts
   
    created(args) {
      this.grid.element.addEventListener(
        'change',
        function (e) {
          // Bind the keyup event for the grid.
          if ((e.target
  as any).classList.contains('custemp')) {
           
  // Based on this condition, you can find whether the target is an input
  element or not.
            var
  row = parentsUntil(e.target as any, 'e-row');
            var
  rowIndex = (row as any).rowIndex; // Get the row
  index.
            var
  uid = row.getAttribute('data-uid');
            var
  rowData = this.grid.getRowObjectFromUID(uid).data; //
  Get the row data.
           
  (rowData as any).amount = (e.target as any).value; //
  Update the new value for the corresponding column.
   
            (rowData as any).amountInEuro
  =
             
  (rowData as any).amount * (rowData as any).fxRate;

this.grid.updateRow(rowIndex, rowData); // Update
  the modified value in the row data.
   
            this.grid.aggregateModule.refresh();
          }
          this.grid.refresh();
        }.bind(this)
      );
    }

Sample link: https://stackblitz.com/edit/angular-6zpp2r-sqfxtq?file=app.component.html,app.component.tsPlease get back to us if you need further assistance on
this.Regards,Nithya Sivaprakasam.If this post is helpful, please consider accepting it as the solution so
that other members can locate it more quickly.

Nagendra Gupta · Answer

Hi 
Nithya Sivaprakasam,Thanks for update.As per your previous example my requirement is full fill. But focus is outing from editable column. In your example you are refreshing the hole grid after any change in editable column.My requirement is focus sustain in the editable column in which I had changed the value in last. Other way we can say that only formula column value should be change without grid refresh.RegardsNagendra Gupta

Nithya Sivaprakasam · Answer

Hi Nagendra,Currently,
we are checking this query “If I change the value of editable column that is
reflect another column value as per formula in a same row and maintain focus on
the last edit column” and we will update further details on or before September
16th 2022.Until
the we appreciate your patience.Regards,Nithya Sivaprakasam.

Nithya Sivaprakasam · Answer

Hi Nagendra,We need time to prepare sample for this query “If I change the value of editable column that is reflect another column value as per formula in a same row and maintain focus on the last edit column” and we will update further details on or before September 20th 2022.Until then we appreciate your patience.Regards,Nithya Sivaprakasam.

Nagendra Gupta · Answer

Hi 
Nithya Sivaprakasam,I am waiting for your reply.RegardsNagendra Gupta

Joseph Christ Nithin Issack · Answer

Hi Nagendra,   Sorry for the inconvenience caused.   Based on your query, you want the focus to
remain in the input element, when you enter any value to the grid. Your
requirement can be achieved by using the input event of the input
element and focus is maintained by using the element.focus() method.Please refer the below code example.

public onInput(args) {
      var rowData = this.grid.getRowInfo(args.target).rowData;
      (rowData as any).amount = args.target.valueAsNumber; // Update the new value for the corresponding column.
      (rowData as any).amountInEuro =
        (rowData as any).amount * (rowData as any).fxRate;
      var primary = (rowData as any).entityName;
      this.grid.setRowData(primary, rowData); // Update the modified value in the row data.
      this.grid.refresh();
      setTimeout(() => {
        document.getElementById(primary).focus();
      }, 50);
    }

Sample: https://stackblitz.com/edit/angular-6zpp2r-63znkc?file=app.component.html,app.component.tsPlease get back to us for further details.Regards,Joseph I.

Rate (Non Editable)	Qty (Editable)	Amount (Non Editable)
100	5	500
200	6	1200
Aggregates ($Sum)	11	1700