How to perform CRUD with Entity Framework in Angular Grid

[Esborn]

Hi,

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

Thanks,

Esborn

[Pavithra Subramaniyam]

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. 

 

 

[component.html] 

<ejs-grid #grid [dataSource]='data' allowPaging='true' [editSettings]='pageSettings'> 

        <e-columns> 

            <e-column field='OrderID'  isPrimaryKey='true'  headerText='Order ID' width='120' textAlign='Right'></e-column> 

            .    .    . 

        </e-columns> 

    </ejs-grid> 

 

[component.ts] 

@Component({ 

    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 }); 

    } 

} 

 

[controller.cs] 

//Provide grid datasource 

        public ActionResult GetOrderData() 

        { 

            .    .   . 

            return Json(new { result = result, count = result.Count },JsonRequestBehavior.AllowGet); 

        } 

        public ActionResult PerformInsert([FromBody]CRUDModel<OrdersDetails> 

param) 

        {         //Perform insertion 

                 .   .   . 

            return Json(param.value); 

        } 

         

        public ActionResult PerformUpdate([FromBody]CRUDModel<OrdersDetails> 

param) 

        { 

           //Perform update 

            .   .  . 

            return Json(param.value);        } 

         

        public ActionResult PerformDelete([FromBody]CRUDModel<OrdersDetails> 

param) 

        { 

           //Perform delete 

            .    .   . 

            return Json(param.Key); 

        } 

 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#persisting-data-in-server  

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S.  

[Esborn]

 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";

@Injectable({

  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