We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular Grid CRUD operations using asp.net core web api methods

Thread ID:





150090 Dec 20,2019 01:58 AM UTC Dec 20,2019 11:35 AM UTC Angular - EJ 2 1
Tags: Grid
Dayakar Reddy
Asked On December 20, 2019 01:58 AM UTC


Can you provide sample example for Angular Grid CRUD operations using asp.net core web api methods?


Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 20, 2019 11:35 AM UTC

Hi Dayakar, 
Greetings from Syncfusion support. 
Query: Can you provide sample example for Angular Grid CRUD operations using asp.net core web api methods? 
We have validated your query and created a sample(Angular Grid CRUD operations using asp.net core web API methods) based on your requirement. Find the below code snippets and sample for your reference. 
[code snippets] 
export class FetchDataComponent { 
    ngOnInit(): void { 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
    this.data = new DataManager({ 
      url: 'api/Orders', 
      adaptor: new WebApiAdaptor 
<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' allowPaging="true" height="320"> 
        <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> 
namespace AngularwithASPCore.Controllers 
    public class OrdersController : Controller 
       // POST: api/Orders 
        public object Post([FromBody]OrdersDetails value) 
            OrdersDetails.GetAllRecords().Insert(0, value); 
            var data = OrdersDetails.GetAllRecords().ToList(); 
            return Json(new { result = data, count = data.Count }); 
        // PUT: api/Orders/5 
        public object Put(int id, [FromBody]OrdersDetails value)   //update operation 
            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 
        public object Delete(int id) 
           OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault()); 
            return Json(id); 

Thavasianand S. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon