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

Grid Two Way Data Binding

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

5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team February 18, 2019 04:17 AM

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. 



MA Marko February 20, 2019 04:41 AM

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


TS Thavasianand Sankaranarayanan Syncfusion Team February 21, 2019 04:52 AM

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. 



MA Marko February 21, 2019 05:30 AM

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


TS Thavasianand Sankaranarayanan Syncfusion Team February 25, 2019 05:22 AM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon