No two way binding of datasource on inline editing grid

[Jatin Chawla]

Hi Team

I am using inline editing on grid and whenever I have to update the values of cell we have to refresh the grid.

For example - 

In the example below we have inline editing grid and whenever we change Quantity or Rate we have to update the cell TotalPrice which is calculation of Quantity*Rate but for this we have to fire an event "cellSaved' and update the cell value on component side and refresh the grid 

PROBLEM - whenever we change Quantity and hit "tab" the events get fired and the tabbing on Rate cell not works as the grid refreshed.Secondly i want there should be 2 way binding in this so that the we dont have to fire method everytime.PLEASE LOOK INTO THIS

               <e-column field='Quantity' headerText='Qty' textAlign='right' width=40>

</e-column>

<e-column field='Rate' format='C2' headerText='Rate' textAlign='right' width=80>

</e-column>

<e-column field='TotalPrice' format='C2' headerText='Total Price' textAlign='right' width=80>

</e-column>

[Thavasianand Sankaranarayanan]

Hi Jatin,  

Thanks for contacting Syncfusion support  

Query1: “we change Quantity or Rate we have to update the cell TotalPrice which is calculation of Quantity*Rate” 

 

From your query we understand that you need to update the value of one column while changing the another column while using inline editing. We suggest you achieve your requirement using ValueAccessor property of ejs grid. Using ValueAccessor column we can display the values based on other columns. So while editing also once the records are saved, value will be updated based on changed value. 

Refer the below code example 

   <button ejs-button (click)='handleClick($event)'>Clear Data</button> 

    <ejs-grid [dataSource]='data' (cellSave)="onsave($event)" [editSettings]='editSettings' [toolbar]='toolbar' [height]='150'> 

                <e-columns> 

                    <e-column field='OrderID' headerText='ID' isPrimaryKey='true' width=150></e-column> 

                    <e-column field='FoodName' headerText='Food Name' width=150></e-column> 

                    <e-column field='Protein' headerText='Protein' textAlign='Right' width=120></e-column> 

                    <e-column field='Fat' headerText='Fat' textAlign='Right' width=80></e-column> 

                    <e-column field='Carbohydrate' headerText='Carbohydrate' textAlign='Right' width=120></e-column> 

                    <e-column headerText='Calories Intake' textAlign='Right' [valueAccessor]='totalCalories' width=150></e-column> 

                </e-columns> 

            </ejs-grid> 

……………………………………. 

  public totalCalories = (field: string, data: { Protein: number, Fat: number, Carbohydrate: number }, column: Object): number => { 

        return data.Protein * 4 + data.Fat * 4 + data.Carbohydrate * 9; 

    } 

Note: while editing, value of the CaloriesIntake column will updated based on modified values.  

Refer our UG documentation for your reference 

https://ej2.syncfusion.com/angular/documentation/grid/columns/#valueaccessor  

Query2: “i want there should be 2 way binding in this so that the we dont have to fire method everytime” 

By default, dataSource property of the Grid is two way binding. Refer the below cod example. 

  public data: Object[]; 

    public editSettings: Object; 

   public toolbar: string[]; 

   public pageSettings: Object; 

   ngOnInit(): void { 

      this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

       this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

       

      //Grid dataSource. 

       this.data = [ 

        { OrderID: 10248, FoodName: 'VINET', Protein: 1, Fat:20,Carbohydrate: 33.38,ShipName:'Alfreds Futterkiste',ShipCountry:'Brazil'}, 

        { OrderID: 10249, FoodName: 'TOMSP', Protein: 2, Fat:15,Carbohydrate: 11.61,ShipName:'Ana Trujillo Emparedados y helados',ShipCountry:'France'}, 

        

         

      ];; 

       this.pageSettings = { pageCount: 5 }; 

   } 

    …………………………………. 

   handleClick(){ 

     this.data = []; // remove the dataSource on button click, it will be refelected in grid. not need to refredh the Grid. 

   } 

By changing the value of this.data, Grid dataSource will be modified, no need to refersh the Grid externally.  

 

For your convenience we have prepared a sample with both the query solution and sample can be referred below  

Sample: https://stackblitz.com/edit/angular-tba1mt-xyx5dt?file=app.component.html  

 

If above solution does not resolve your query, please get back to us with more details about your requirement.   

Regards, 

Thavasianand S. 

[Mahendra Nath Jha]

Hi, 

I am facing the same problem...

In the handle click you have written

this.data = [];

no doubt, it works.

But what about, if I write something like below

this.data[0]["OrderID"] = 10250;

it does not refresh the grid...

[Balaji Sekar]

Hi Jatin, 

We have validate your query with provided the information. You have change a value in “this.data” array. This is because the “this.data[0]["OrderID"]” way directly mutates an element of the list. “handleClick” method cannot detect this, as its input reference “this.data” did not change. Since we suggest you to creates a copy of the “this.data” list, and then adds an item to the copy and finally replaces the this.data member variable with the copied list. This triggers change detection because the component detects a reference change in its input: it received a new list! 

Please refer the below code example and sample for more information. 

[app.component.ts] 

  handleClick(){       

      var tdata = this.data.slice(0) // create a new list  

      tdata[0]["OrderID"]=101; // Apply the changes in clone array list 

      this.data = tdata; // Replace this.data value by tdata 

    } 

Sample link: https://stackblitz.com/edit/angular-tba1mt-27qcpf 

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

Regards, 

Balaji Sekar