Can DataManager handle REST API CRUD (GET, POST, PUT, DELETE)?

[Charles]

Hello,

Is it possible to use DataManager to interact with a standard REST API? For example, a typical REST API backend would respond to HTTP GET, POST, PUT, and DELETE, such as these examples:

export const getAllUsers = () => {
    return http.get("/users");
};
export const getUser = (id) => {
    return http.get(/users/${id} );
};
export const createUser = (data) => {
    return http.post("/users", data);
};
export const updateUsers = (id, data) => {
    return http.put(/users/${id} , data);
};
export const removeUser = (id) => {
    return http.delete(/users/${id} );
};

However, when I use DataManager with UrlAdaptor or WebMethodAdaptor, the front-end always sends a POST request with parameters, instead of using GET, POST, PUT, and DELETE.

Instead of GET, the front-end sends:

POST { "requiresCounts": true, "skip": 0, "take": 12 }

Instead of POST, with only the JSON record to insert, the front-end sends JSON with action "insert":

{ "value": { "user_name": "David", "user_number": 11, }, "action": "insert" }

Instead of PUT, the front-end sends JSON with action "update":

​​POST { 
"value": { "id": 15, "user_name": "David", "location_id": 2, }, "action": "update", "keyColumn": "id", "key": 15 }

Is it possible for DataManager or one of the Adaptors to send the usual GET, POST, PUT, and DELETE?

If it is not possible, are the JSON parameters send by UrlAdaptor documented? For instance, it seems there are many parameters (requireCounts, skip, take, action, insert, update, where, sorted, group, search, key, value, isComplex, condition, predicates, and so on), but I only find these by trial and error watching the HTTP requests. If the JSON commands are documented, I can implement the API on the server to work with the existing UrlAdaptor.

Thank you for any guidance.

[Rajapandi Ravi]

Hi Charles,

Greetings from Syncfusion support

Query#: Is it possible for DataManager or one of the Adaptors to send the usual GET, POST, PUT, and DELETE?

By Default, Datamanager sends GET request to server side to fetch the Grid data with WebAPI adaptor and the CRUD operations are done by sending POST,PUT, DELETE requests to the server.

In WebApiAdaptor, we need to handle the Grid actions such as filtering, paging, sorting in server side by manually. By default, grid sends request to the server for all the grid actions like Paging, Sorting, Filtering, searching etc., in the controller side you can perform this operation with the correspond queries and return the data with Items & Count value pair which will be bound to the grid.

Please refer to the below code example and screenshots for more information. 

While adding a record

While deleting

While updating:

Based on the request we need to handle perform the CRUD operations in the datasource and return the data.

[index.chtml]

<ejs-grid id="Grid" width="auto" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 

    <e-data-manager url='api/Orders/' adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager> 

     .  .  . 

</ejs-grid> 

[controller.cs]

namespace EJ2Grid.Controllers

{

    [Produces("application/json")]

    [Route("api/Order")]

    public class OrderController : Controller

    {

        // GET: api/Orders

        [HttpGet]

 

        public object Get()

        {

            var queryString = Request.Query;

 

            int skip = Convert.ToInt32(queryString["$skip"]);

            int take = Convert.ToInt32(queryString["$top"]);

            var data = OrdersDetails.GetAllRecords().ToList();

            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; //return the result in Items and Count format

 

        }

 

        // POST: api/Orders

        [HttpPost]

// for insert action

        public object Post([FromBody]OrdersDetails value)

        {

            OrdersDetails.GetAllRecords().Insert(0, value);

            return value;

        }

 

 

 

        // PUT: api/Orders/5

        [HttpPut]

// for update action

        public object Put(int id, [FromBody]OrdersDetails value)

        {

            var ord = value;

            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault();

            val.OrderID = ord.OrderID;

            val.EmployeeID = ord.EmployeeID;

            val.CustomerID = ord.CustomerID;

            val.Freight = ord.Freight;

            val.OrderDate = ord.OrderDate;

            val.ShipCity = ord.ShipCity;

            return value;

        }

 

        // DELETE: api/ApiWithActions/5

        [HttpDelete("{id:int}")]

        [Route("Orders/{id:int}")]

// for delete action

        public object Delete(int id)

        {

            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault());

            return Json(id);

        }

 

        public class Data

        {

 

            public bool requiresCounts { get; set; }

            public int skip { get; set; }

            public int take { get; set; }

        }

    }

}

Documentation: https://ej2.syncfusion.com/documentation/grid/data-binding/remote-data/#web-api-adaptor

Regards,

Rajapandi R