CRUD operations using OData
3 Replies
Hi Muthu,
Thanks for your patience.
Based on your query, we would like to inform you know that by default in EJ2 grid, to bind OData v4 service, we suggest you to use the ODataV4Adaptor in the Grid and by default(pre-defined) HTTP methods will be called for ODataV4 requests for the Grid actions. The Get request will be sent for getting initial data and while Grid actions like, searching, filtering, etc. are performed and Post, Patch and Delete requests will be sent for add, update and delete CRUD operations respectively. These are the default ODataV4 methods called for each operation and it cannot be modified. Please refer the below screenshot and code example for more information,
Thanks for your patience.
Based on your query, we would like to inform you know that by default in EJ2 grid, to bind OData v4 service, we suggest you to use the ODataV4Adaptor in the Grid and by default(pre-defined) HTTP methods will be called for ODataV4 requests for the Grid actions. The Get request will be sent for getting initial data and while Grid actions like, searching, filtering, etc. are performed and Post, Patch and Delete requests will be sent for add, update and delete CRUD operations respectively. These are the default ODataV4 methods called for each operation and it cannot be modified. Please refer the below screenshot and code example for more information,
For using OdataV4Adaptor, The response returned from OData service must be in the below format from which the count and data is assigned to the Grid to bind data.
For paging:
The Grid will request the server with the skip and top values which is based on the current page. While moving to the Each page the Grid will request to server with the appropriate details.
For Editing:
The Grid will sent the Patch request to the server with the primaryKey value.
For Adding:
The Grid will sent the Post request to the server.
For Deleting:
The Grid will sent the Delete request to the server with the primaryKey value.
Code Snippet:
|
[app.component.html-page]
<ejs-grid #grid [dataSource]='data' height="320" [editSettings]='editSettings' [toolbar]='toolbar' > <e-columns>
<e-column field='OrderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column>
<e-column field='CustomerID' headerText='Customer Name' width='150'></e-column>
<e-column field='ShipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column>
</e-columns>
</ejs-grid> |
|
[app.component.ts-page]
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data'; import { GridComponent } from '@syncfusion/ej2-ng-grids';
@Component({
selector: 'fetchdata',
templateUrl: './fetchdata.component.html',
})
export class FetchDataComponent {
public data: any;
@ViewChild('grid')
public grid: GridComponent;
public editSettings: Object;
public toolbar: string[];
ngOnInit(): void {
this.data = new DataManager({
url: 'http://localhost:49442/Orders',
adaptor: new ODataV4Adaptor,
crossDomain: true
});
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Top' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
}
} |
|
[controller- page]
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using System.ComponentModel.DataAnnotations;
using System.Net;
using System.Net.Http;
using System.Web.OData;
namespace AngularwithASPCore.Controllers
{
[Produces("application/json")]
[Route("api/Orders")]
public class OrdersController : ODataController
{
public static List<Orders> order = new List<Orders>();
// GET: api/Orders
[HttpGet]
[EnableQuery]
public IQueryable<Orders> Get()
{
if (order.Count == 0)
BindDataSource();
return order.AsQueryable();
}
public Orders Patch([FromODataUri]int key, [System.Web.Http.FromBody]Delta<Orders> patch)
{
Orders data = order.Where(p => p.OrderID == key).FirstOrDefault();
patch.Patch(data);
return data;
}
public HttpResponseMessage Post(Orders value)
{
order.Add(value);
return Request.CreateResponse(HttpStatusCode.OK, value);
}
public HttpResponseMessage Delete([FromODataUri]int key)
{
Orders data = order.Where(p => p.OrderID == key).FirstOrDefault();
if (data != null)
{
order.Remove(data);
}
else
{
Request.CreateResponse(HttpStatusCode.NotFound);
}
return Request.CreateResponse(HttpStatusCode.OK, "Removed");
}
private void BindDataSource()
{
int code = 10000;
for (int i = 1; i < 10; i++)
{
order.Add(new Orders(code + 1, "ALFKI", i + 1, 2.3 * i, "Berlin"));
order.Add(new Orders(code + 2, "ANATR", i + 2, 3.3 * i, "Madrid"));
order.Add(new Orders(code + 3, "ANTON", i + 3, 4.3 * i, "Cholchester"));
order.Add(new Orders(code + 4, "BLONP", i + 4, 5.3 * i, "Marseille"));
order.Add(new Orders(code + 5, "BOLID", i + 5, 6.3 * i, "Tsawassen"));
code += 5;
}
}
public class Orders
{
public Orders()
{
}
public Orders(long OrderId, string CustomerId, int EmployeeId, double Freight, string ShipCity)
{
this.OrderID = OrderId;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.ShipCity = ShipCity;
}
[Key]
public long OrderID { get; set; }
public string CustomerID { get; set; }
public int EmployeeID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
}
}
} |
More details on this can be checked in the below documentation link,
Documentation Link: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#binding-with-odata-v4-services
Please get back to us if you need further assistance.
Regards,
Praveenkumar G
SIGN IN To post a reply.
