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

How to perform CRUD with Entity Framework in Angular Grid


Do you have a sample code of how a i perform CRUD operations in angular grid using Entity Framework?


3 Replies

PS Pavithra Subramaniyam Syncfusion Team September 17, 2019 01:08 AM

Hi Esborn, 
Thanks for contacting Syncfusion Support. 
You can perform the server side CRUD operations with Entity Framework by using DataManager and Adaptor. Please refer to the below code example and Documentation link for more information. 
<ejs-grid #grid [dataSource]='data' allowPaging='true' [editSettings]='pageSettings'> 
            <e-column field='OrderID'  isPrimaryKey='true'  headerText='Order ID' width='120' textAlign='Right'></e-column> 
            .    .    . 
    selector: 'ej2-griddatabind', 
    templateUrl: 'remote-data.html' 
export class DataBindingComponent implements OnInit { 
    .  .  . 
    ngOnInit(): void { 
        this.data = new DataManager({ url: 'Home/GetOrderData', updateUrl: 'Home/PerformUpdate’, removeUrl: 'Home/PerformDelete’, insertUrl: 'Home/PerformInsert',  adaptor: new UrlAdaptor }); 
//Provide grid datasource 
        public ActionResult GetOrderData() 
            .    .   . 
            return Json(new { result = result, count = result.Count },JsonRequestBehavior.AllowGet); 
        public ActionResult PerformInsert([FromBody]CRUDModel<OrdersDetails> 
        {         //Perform insertion 
                 .   .   . 
            return Json(param.value); 
        public ActionResult PerformUpdate([FromBody]CRUDModel<OrdersDetails> 
           //Perform update 
            .   .  . 
            return Json(param.value);        } 
        public ActionResult PerformDelete([FromBody]CRUDModel<OrdersDetails> 
           //Perform delete 
            .    .   . 
            return Json(param.Key); 
Please get back to us if you need any further assistance on this. 
Pavithra S.  

ES Esborn September 17, 2019 03:50 AM

 Thanks you Pavithra,

i have tried using Observable

see my code below, when i call the remote WebApi, it returns the error that follows

import { Injectable } from '@angular/core';
import { Subject, Observable } from "rxjs";
import { DataStateChangeEventArgs } from "@syncfusion/ej2-angular-grids";
import { HttpClient } from '@angular/common/http';
import { EmployeeTranstionModel } from './employee-transtion-model';
import { map  } from "rxjs/operators";

  providedIn: 'root'
export class EmployeeTransationStoreService extends Subject<DataStateChangeEventArgs>{
apiurl ='http://localhost:64728/api/EmployeeTransactions1';
//apiurl ='app/employeeTranstations'
  constructor(private http: HttpClient) { super();}

public execute(state: any): void {
  this.getEmployeeTracations(state).subscribe(x => super.next(x as DataStateChangeEventArgs));

  getEmployeeTracations(state?:any): Observable<any[]> {
    return this.http.get<EmployeeTranstionModel[]>(this.apiurl).pipe(
      map((response: any)=> (<any>{
        result: state.take > 0 ? response.slice(0,state.take) : response,
        count: response.length

the error on the browser 

the webapi returns data as below

sample code of the webApi

kindly advice on this


PS Pavithra Subramaniyam Syncfusion Team September 18, 2019 04:24 AM

Hi Esborn, 

Thanks for your update. 

We have validated the provided information and you are getting 404 not found issue which might be occurred(not from our side) for the below reasons so please check and refer below reference link that might be helpful to resolve the problem. 

  1. Change the order of the configuration registered in Global.aspx

  1. Ensure the HTTP root configuration and the default parameters are optional or not
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon