Angular Grid CRUD

[Maxime PONTREAU]

Hello,

We are actually building our first grid CRUD with Syncfusion.

Unfortunately, we did not found any solution to fit with our needs.

Context :

We have a server side where we want to get multiple object to put in the Syncfusion grid.

We also call our Backend to perform the CRUD operations

We do not want to handle pagination, sorting, filtering etc... on the server side.

In the Grid, we want to be able to add, edit and delete, and also to sort, filter etc...

We found 2 ways to do this in your documentation.

First way by calling our API before initializing the grid view, and give directly the list of objects to the grid.

But with that solution, the CRUD operations are very complicated because we have to use the beginAction method which is not asynchronous.

This synchronous method do not allow us to easily call our backend API for CRUD operations (asynchronous calls) and handle the response with eventually some errors.

Second way is to use Observables as describe in the following link : https://ej2.syncfusion.com/angular/documentation/grid/observables/#perform-crud-operations

This documentation is almost exactly what we need, except that because of the override of dataStateChange, we have to sort and filter by ourselves.

Do you have any sample, where we can use Observables (second way) without handling paging, sorting, filtering on our server-side but keeping those functionalities in the Syncfusion grid ?

In other words, we want to call our backend (asynchronous call), getting ALL objects and put them into the Grid, keeping all Syncfusion cool features like paging, sorting, filtering and using CRUD Observables calls.

[Manivel Sellamuthu]

Hi Maxime, 

Greetings from Syncfusion support. 

We have validated your requirement and we would like to inform you that Observable binding is used for externally handling the grid actions (Out of box). While using observable binding grid will load only the current view records based on the on-demand concept. So in this case it is not feasible to handle the grid actions by default while using the Observables. 

From your requirement, we can understand that you want all Grid Actions in client-side except the CRUD operations, that should be interacted with server-side to persist data. You can use ajax binding to achieve your requirement. Please find the below sample for more information. 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#binding-with-ajax 

The above documentation explains binding data from the API to Grid as local data which handles the Grid actions such as paging, filtering , searching., etc in client side .If the above sample meets your requirement, we can achieve the functionality to perform CRUD actions in server side using actionBegin event of the Grid. Based on the confirmation we will update the sample. 

Regards, 

Manivel