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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to perform CRUD with Entity Framework in Angular Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

147516 Sep 13,2019 01:40 PM UTC Sep 18,2019 09:24 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Esborn
Asked On September 13, 2019 01:40 PM UTC

Hi,

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

Thanks,
Esborn

Pavithra Subramaniyam [Syncfusion]
Replied On September 17, 2019 06:08 AM UTC

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); 
        } 
 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S.  


Esborn
Replied On September 17, 2019 08:50 AM UTC

 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




kindly advice on this

Regards,
Esborn

Pavithra Subramaniyam [Syncfusion]
Replied On September 18, 2019 09:24 AM UTC

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
 
 
Regards, 
Pavithra S. 


CONFIRMATION

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