Two-Way Databinding

[Hannes Hasenauer]

Hello,

I am an Angular beginner, coming from WPF / Xamarin and I am trying to figure out how to correctly do the databinding with the syncfusion controls.
I have already implemented my own DataServices, which provide my data and handle CRUD operations. I am using the Azure Mobile Services as my backend, so I do not have a fully functional ODATA Service.
After loading my Data from my backend, the binding to the datasource of my grid is working as expected, but I have no idea how to handle inserts and updates.
All the documentation I have read was about the datamanager who completely manages the connection to the backend.
But I do not want to replace my current Dataservices with the DataManager.
I was thinking about something like a CommandBinding to the update or insert button within the grid or am I completely wrong with this approach?
My dataservices are implemented similar to the Angular Hero Tutorial: https://angular.io/tutorial/toh-pt4

What would be the correct way to handle this problem?

[Sathyanarayanamoorthy Eswararao]

Hi Hannes, 

We have analyzed your query and we suspect that you want to perform insert and update operations in your own DataServices. This can be achieved in the actionbegin event of the grid. 

Refer the code example below. 

 

 

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" (actionBegin)="onActionBegin($event >

    <e-columns> 

        <e-column field="Verified" type="checkbox" width="50"></e-column> 

        <e-column field="OrderID"  headerText="OrderID" [isPrimaryKey]="true" width="75" textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column> 

        <e-column field="EmployeeID" headerText="EmployeeID"  width="75" textAlign="left"></e-column> 

        <e-column field="Freight" width="75" format="{0:C2}" textAlign="right"></e-column> 

        <e-column field="OrderDate" headerText="OrderDate" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column> 

        <e-column field="ShipCity" headerText="ShipCity"   width="110"></e-column> 

    </e-columns> 

</ej-grid> 

 

 

 

 

 

<script> 

onActionBegin(e: any){ e.cancel=true;//perform the insert and update operations on your own databases.//call the endedit method to save the records.}

</script> 

 

Refer the following help documentation for actionbegin event and endedit method. 

https://help.syncfusion.com/api/angular/ejgrid#methods:endedit 

https://help.syncfusion.com/api/angular/ejgrid#events:actionbegin 

Regards, 

Sathyanarayanamoorthy