Grid Two Way Data Binding

[Marko]

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]

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.    

    

https://angular-2-training-book.rangle.io/handout/change-detection/change_detection_strategy_onpush.html    

  

https://go.tinymce.com/blog/angular-change-detection-onpush-strategy/   

  

We have prepared a simple sample in the following stacblitz link. 

Link: https://stackblitz.com/edit/angular-rtjatv?file=default.component.ts 

 

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.   

 

Link: https://ej2.syncfusion.com/angular/documentation/grid/edit/#persisting-data-in-server 

 

Regards, 

Thavasianand S. 

[Marko]

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]

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. 

Link: https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#troubleshoot-editing-works-only-for-the-first-row 

Link: https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#editing 

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

Regards, 

Thavasianand S. 

[Marko]

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]

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. 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#updaterow 

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. 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid#selectrow 

Regards, 

Thavasianand S.