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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Syncfusion Angular2 DataGrid CRUD sample

Thread ID:

Created:

Updated:

Platform:

Replies:

127647 Nov 30,2016 09:37 AM UTC Dec 21,2016 01:06 PM UTC Angular 3
loading
Tags: ejGrid
Dina Abdelbary
Asked On November 30, 2016 09:37 AM UTC

Hi,

I can not find a sample for implementing CRUD operations in DataGrid using Angular2, with using services.
The documentation is very good using JS, but in Angular it is missed.
Can you send me a sample of what i m looking for?

Thanks



Mani Sankar Durai [Syncfusion]
Replied On December 1, 2016 02:23 PM UTC

Hi Dina, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we have prepared a sample based on your requirement that can be downloaded from the below link. 
In this sample we have performed the CRUD operations in OdataV4Adaptor. 
 
appComponent.html 

<ej-grid #grid  [dataSource]="gridData" [allowScrolling]=true 
                  [allowPaging]="true" 
                  [query] = "queryorder" 
                  [editSettings]= "edit" 
                [toolbarSettings]= "tool" 
                  [selectionType]="multiple"> 
    <e-columns> 
             <e-column field="OrderID" [isPrimaryKey]="true" isIdentity="true" width="75" textAlign="right"></e-column> 
        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column> 
        <e-column field="CustomerID" headerText="CustomerID" width="80"textAlign="right"></e-column> 
        
    </e-columns> 
</ej-grid> 
 
appComponent.ts 
 
    public gridData = ej.DataManager({ 
        url: "http://localhost:49339/Odata", 
        adaptor: new ej.ODataV4Adaptor()    
    }); 
    public queryorder = new ej.Query().from('Orders');  
    public edit = { allowEditing: true, allowAdding: true, allowDeleting: true,editMode: "batch" } 
    public tool =  { showToolbar: true, toolbarItems: ["add","edit","delete","update","cancel"] } 
[OrdersController.cs] 
   
        public IQueryable<Order> Get() 
        { 
            return db.Orders; 
        } 
        // PUT odata/Orders(5) 
        public async Task<Order> Put(int key, Order order) //Edit operation in database 
        { 
             
                     ... 
 
        }  //// POST odata/Orders 
        public async Task<Order> Post(Order order) //Add Operation in database 
        { 
                      ... 
        } 
 
 
        //// DELETE odata/Orders(5) 
        public async Task<IHttpActionResult> Delete([FromODataUri] int key) 
        { 
             
                        ... 
        } 
        
 
We have included angular2 sample also with in the project. 

Note:  First run angular2 sample separately for including packages and then run the project and change the path as (http://localhost:49339/angular2/ejGrid_Vpaging%20-%20Copy/ejGrid_Vpaging/) to run the sample in angular 2 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


arizona
Replied On December 20, 2016 04:48 PM UTC

Hi Dina, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we have prepared a sample based on your requirement that can be downloaded from the below link. 
In this sample we have performed the CRUD operations in OdataV4Adaptor. 
 
appComponent.html 

<ej-grid #grid  [dataSource]="gridData" [allowScrolling]=true 
                  [allowPaging]="true" 
                  [query] = "queryorder" 
                  [editSettings]= "edit" 
                [toolbarSettings]= "tool" 
                  [selectionType]="multiple"> 
    <e-columns> 
             <e-column field="OrderID" [isPrimaryKey]="true" isIdentity="true" width="75" textAlign="right"></e-column> 
        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column> 
        <e-column field="CustomerID" headerText="CustomerID" width="80"textAlign="right"></e-column> 
        
    </e-columns> 
</ej-grid> 
 
appComponent.ts 
 
    public gridData = ej.DataManager({ 
        url: "http://localhost:49339/Odata", 
        adaptor: new ej.ODataV4Adaptor()    
    }); 
    public queryorder = new ej.Query().from('Orders');  
    public edit = { allowEditing: true, allowAdding: true, allowDeleting: true,editMode: "batch" } 
    public tool =  { showToolbar: true, toolbarItems: ["add","edit","delete","update","cancel"] } 
[OrdersController.cs] 
   
        public IQueryable<Order> Get() 
        { 
            return db.Orders; 
        } 
        // PUT odata/Orders(5) 
        public async Task<Order> Put(int key, Order order) //Edit operation in database 
        { 
             
                     ... 
 
        }  //// POST odata/Orders 
        public async Task<Order> Post(Order order) //Add Operation in database 
        { 
                      ... 
        } 
 
 
        //// DELETE odata/Orders(5) 
        public async Task<IHttpActionResult> Delete([FromODataUri] int key) 
        { 
             
                        ... 
        } 
        
 
We have included angular2 sample also with in the project. 

Note:  First run angular2 sample separately for including packages and then run the project and change the path as (http://localhost:49339/angular2/ejGrid_Vpaging%20-%20Copy/ejGrid_Vpaging/) to run the sample in angular 2 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Hi Mani Sankar ,

Read all your Angular2 example and implemented on my local. Sadly it doesnt work with an dummy json-server. I expose it on 3004 port and it has the following structure :
{
  "records": [
{ "OrderID": 1, "CustomerID": 1, "EmployeeID": 1},{ "OrderID": 1, "CustomerID": 1, "EmployeeID": 1},{ "OrderID": 1, "CustomerID": 1, "EmployeeID": 1},{ "OrderID": 1, "CustomerID": 1, "EmployeeID": 1},{ "OrderID": 1, "CustomerID": 1, "EmployeeID": 1}
]
}
Now on the component file I modified only this from your example :

public gridData = ej.DataManager({
    url: "http://localhost:3004/",
adaptor: new ej.ODataV4Adaptor()
});
public queryorder = new ej.Query().from('records');

Sadly it gives me this recurrent error : TypeError: Cannot read property 'length' of undefined

Thanks,

Andy

Mani Sankar Durai [Syncfusion]
Replied On December 21, 2016 01:06 PM UTC

Hi Andy, 

We have analyzed your query but we are quite unclear regarding your information. So before proceeding please share us the following details. 
1.       Share the screenshot/video of the console error by expanding it. 
2.       Share the Essential studio version details that you have used. 
3.       Share the full grid code that you have rendered. 
4.       Share the returned result that shown in Network tab. 
5.       Share the component file. 
6.       Have you faced this issue at the initial rendering or when editing the records in grid? 
7.       Share the controller page that you have passed the data to the grid 
8.       If possible please reproduce the issue in the previous attached sample. 
The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards, 
Manisankar Durai. 


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.

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

;