We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

No two way binding of datasource on inline editing grid

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 field='Rate' format='C2' headerText='Rate' textAlign='right' width=80>
<e-column field='TotalPrice' format='C2' headerText='Total Price' textAlign='right' width=80>

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team May 30, 2019 11:01 AM UTC

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

  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 

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 }; 
     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  

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

Thavasianand S. 

MN Mahendra Nath Jha May 12, 2020 01:36 PM UTC

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

BS Balaji Sekar Syncfusion Team May 13, 2020 10:40 AM UTC

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

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

Balaji Sekar 

Live Chat Icon For mobile
Up arrow icon