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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

No two way binding of datasource on inline editing grid

Thread ID:

Created:

Updated:

Platform:

Replies:

144934 May 29,2019 10:42 AM UTC May 13,2020 10:40 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Jatin Chawla
Asked On May 29, 2019 10:42 AM UTC

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 [Syncfusion]
Replied On 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-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 


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  

 
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
Replied On May 12, 2020 01:36 PM UTC

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 [Syncfusion]
Replied On 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. 
[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 
    } 



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

Regards, 
Balaji Sekar 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon