1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Editable Grid in EssentialJS 1 & 2 using Angular 2+ and bound to ASP.Net Core Rest service

Editable Grid in EssentialJS 1 & 2 using Angular 2+ and bound to ASP.Net Core Rest service

Hi,

I am trying to create an editable grid (with Add/Edit/Delete) using Angular 2+ bound to an ASP.Net WEB API Core Rest service with a SQL Server backend. I have done a search on the forum and the latest I could find is that at - https://www.syncfusion.com/forums/127647/syncfusion-angular2-datagrid-crud-sample which was almost a year ago.

Can you point me to more recent samples for ESJ 1& 2?

Thanks for your help
Muyiwa




1 Reply
PS Pavithra Subramaniyam Syncfusion Team November 21, 2017 12:43 PM UTC

Hi Olu, 

Thanks for contacting Syncfusion Support. 

We have analyzed query and prepared samples based on your requirement in both EJ1 and EJ2. 

EJ1:  

In this sample, we have integrated the Angular app and ASP.NET core project with web API service. Also, we have performed the CRUD operation. In this sample, we have bound the Grid datasource using webApi adaptor. Please refer to the following code example and Help documentation for more information,  
<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true"[toolbarSettings]="toolbarItems" [editSettings]="editSettings">  
        <e-columns>  
            <e-column field="OrderID" [isPrimaryKey]="true" headerText="OrderID"></e-column>  
            . .  .  
        </e-columns>  
    </ej-grid>  
   
Note: We have performed a CRUD operation based on isPrimarykey value. So, we suggest you to refer the  isPrimaryKey property as true for unique id column. Please refer to the following Help documentation,  

[ts file]  
export class HomeComponent {  
    public gridData:any;  
    public editSettings:any;  
    public toolbarItems:any;  
    constructor() {  
          
        this.gridData = new ej.DataManager({  
            url: "api/Orders",  
            adaptor: "WebApiAdaptor"  
        });  
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};  
        this.toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete","update", "cancel"] };  
    }  
}  
  
[webApi controller]  
  
[HttpGet]  
        public object Get()  
        {  
            var skip = Convert.ToInt32(Request.Query["$skip"]);  
            var top = Convert.ToInt32(Request.Query["$top"]);  
              
            return new { Items = order.Skip(skip).Take(top).ToList(), Count = order.Count };  
        }  
  
[HttpPost]  
        public void Post([FromBody]Orders value)  
        {  
            order.Insert(0, value);  
        }  
  
        // PUT api/values/5  
        [HttpPut]  
        public void Put([FromBody]Orders value)  
        {  
            var record = order.FirstOrDefault(x => x.OrderID == value.OrderID);  
            if (record != null)  
            {  
                record.OrderID = value.OrderID;  
                . . .   
  
            }  
        }  
  
        // DELETE api/values/5  
        [HttpDelete("{id}")]  
        public void Delete(int id)  
        {  
            var itemToRemove = order.Single(r => r.OrderID == id);  
            order.Remove(itemToRemove);  
        }  

Refer to the following Help documentation for Step by Step procedure to integrate the Angular app with ASP.NET core project,  

EJ2: 

In this sample, we have bound the Grid datasource using URL adaptor. Please refer to the following code example and Help documentation for more information,  
[app.component.ts] 
import { Component, OnInit } from '@angular/core'; 
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data'; 
 
@Component({ 
            . . . 
   template: `<ej-grid #grid [dataSource]='data' [editSettings]='editSettings' [allowPaging]='true' [toolbar]='toolbar'> 
                <e-columns> 
                    . . . 
                    . . .   
                </e-columns> 
                </ej-grid>` 
}) 
export class AppComponent implements OnInit { 
 
    public data: DataManager; 
   . . . 
    ngOnInit(): void { 
        this.data = new DataManager({ 
            url: "/Home/DataSource", 
            updateUrl: "Home/Update", 
            insertUrl: "Home/Insert", 
            removeUrl: "/Home/Delete", 
            adaptor: new UrlAdaptor 
        }); 
      . . . 
   } 
} 

[Homecontoller.cs] 

 
    public class HomeController : Controller 
    { 
        public ActionResult DataSource() 
        { 
            var DataSource = OrderRepository.GetAllRecords(); 
            DataResult result = new DataResult(); 
            result.result = DataSource.ToList(); 
            result.count = result.result.Count; 
            return Json(result, JsonRequestBehavior.AllowGet); 
        } 
        
        public ActionResult Update(EditableOrder value) 
        { 
            OrderRepository.Update(value); 
            var data = OrderRepository.GetAllRecords(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 
        public ActionResult Insert(EditableOrder value) 
        { 
            OrderRepository.Add(value); 
            var data = OrderRepository.GetAllRecords(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 
        public ActionResult Delete(int key) 
        { 
            var data = OrderRepository.GetAllRecords(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 
        
        public class DataResult 
        { 
            public List<EditableOrder> result { get; set; } 
            public int count { get; set; } 
        } 
    } 
} 

Please refer the following document link to Persist data in server. 

Regards, 
Pavithra S. 



Loader.
Up arrow icon