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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid Two Way Data Binding

Thread ID:

Created:

Updated:

Platform:

Replies:

142695 Feb 15,2019 10:57 AM UTC Feb 25,2019 01:22 PM UTC Angular - EJ 2 5
loading
Tags: Grid
Marko
Asked On February 15, 2019 10:57 AM UTC

Hi,

is there any option to have 2 way data binding in Grid dataSource? I tried with [(dataSource)]='data', but if I changed data item, this was not shown in the grid. Also if I edited something in grid, it did not changed in original object.

Regards,
Marko

Attachment: package_5b9a9989.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 18, 2019 12:17 PM UTC

Hi Marko, 
 
Greetings from Syncfusion. 
 
Query 1: I tried with [(dataSource)]='data', but if I changed data item, this was not shown in the grid. 
 
We have analyzed your query and In Essential JS2, we have used object reference (Inner property changes does not reflect the control) instead of deep watch to prevent the performance issue. Also to overcome the reported problem, we suggest you to use the below solution.   
  
In such cases, we can enforce change detection, similar to the way followed by OnPush Change detection strategy, by changing the reference using the below simple line.     
    
  ...  
updateData():void{    
    this.data[0]['CustomerID'] = "SUPRD";     
    this.data = [...this.data]    
  }    
  ...  
    
Please check below links on more info using OnPush change detection strategy and enforcing change detection with after data change.    
    
  
  
We have prepared a simple sample in the following stacblitz link. 

 
Query 2: If I edit something in grid, it did not changed in original object.  
 
If you want to do CRUD operations in server side also then we need to handle it in server end. We have already discuss about the above mention query in the following documentations.   
 
 
Regards, 
Thavasianand S. 


Marko
Replied On February 20, 2019 12:41 PM UTC

Hi,

I have read the documentation for OnPush and I understand preformance problem if not useing it.
But I have question here. I have background socket, which can get message at any time. Messages are about changed item in grid. So if I would use this.data = [...this.data]   , than I would lose curently editing task etc.
I prepared an example: https://stackblitz.com/edit/angular-rtjatv-39ohun and atteched video. As shown in video, I lose 10257 editing and changes in it when timeout finished, also task 10256 has duplicated and 10248 has gone.
The timeout function simulates recived socket message.

So my question here is, how would be the best to update changed data in grid view at any time and not to effect on edited task and other properties like selected task etc.

Regards,
Marko

Attachment: 20190220_132043_2f70449.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 21, 2019 12:52 PM UTC

Hi Marko, 

Based on your query we suspect that you want to do CRUD operations in Grid. By default, if you are using CRUD operation in Grid then we need to have isPrimaryKey column, which has the unique value. So, we suggest you to set the isPrimaryKey for particular column in Grid. 



Please let us know if you need further assistance on this. 

Regards, 
Thavasianand S. 


Marko
Replied On February 21, 2019 01:30 PM UTC

Hi,

I have checked edit documentation and adding primaryKey solves the problem with jumping tasks, but I still wonder how to update shown data in grid without to effect on selected or edited task.
So as I said, I have async events, which can at any time update some data in my data array. I would like to update the display of that data in grid, without losing selected row or row data, that are just in editing mode. Beacue now, with this.data = [...this.data] I lose selected or edited row.

Is there a way to achieve this?

Regards,
Marko

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 25, 2019 01:22 PM UTC

Hi Marko, 

Query 1: How to update the row without select and not move to edit form. 

We can achieve your requirement by using the updateRow method of Grid. 


Query 2: Selected row is not maintained when we update through this.data =[..this.data] 

We can achieve your requirement by using selectRow method of Grid. We need to get the rowIndex of those Grid before we start update the data through onPush changes and by using the selectRow method we can select the record after the data get refreshed in Grid. 

Refer the help documentation. 


Regards, 
Thavasianand S. 


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

;