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

How to use Angular HTTP service for Grid operations

Thread ID:





150245 Dec 27,2019 11:23 PM UTC Feb 3,2020 11:13 AM UTC Angular - EJ 2 5
Tags: Grid
Asked On December 27, 2019 11:23 PM UTC

I have seen in the demo that you are using Data Adaptors for CRUD operations but on one of our projects we have Angular services created that communicates with REST API. How do we use those services with the grid.

Also, the REST API returns the entire count of records but also returns the page data only. How do we display the total count and then when the user clicks on next page pass the skip and take information to the service.

Any help is greatly appreciated.



Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 30, 2019 11:49 AM UTC

Hi Ameet,  
Greetings from Syncfusion.  
Syncfusion Angular Grid is providing an option for the Observable binding which helps to handle the records or CRUD actions on our wish. Refer to the following Help Document.  
Seeni Sakthi Kumar S 

Replied On January 28, 2020 10:20 PM UTC

Does this work on reactive forms on Data Grid. My requirement is to use the reactive form. For some reason it never calls the datasourcechanged event. Do you have any sample that works?

Thank You,



Balaji Sekar [Syncfusion]
Replied On January 29, 2020 11:33 AM UTC

Hi Ameet, 
Greetings from syncfusion grid 
Query#: My requirement is to use the reactive form. For some reason it never calls the datasourcechanged event. Do you have any sample that works? 
Based on your requirement we have prepared a sample with reactive form. The dataSourceChanged event gets triggered and works fine from our end. Please refer the below code example and sample for more information. Please refer the below details about the Grid add action code example with Observable. 
The following codesnippets are based on the grid row Add action. 
While adding a row, at first actionBegin event gets triggerd. In that event we have called the createFormGroup() method with arguments rowdata. 

actionBegin(args: SaveEventArgs): void { 
        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
            this.submitClicked = false; 
            this.orderForm = this.createFormGroup(args.rowData); 
        if (args.requestType === 'save') { 
            this.submitClicked = true; 
            if (this.orderForm.valid) { 
                args.data = this.orderForm.value; 
            } else { 
                args.cancel = true; 

In this createFormGroup() method we are create the form group with using default value of inputs. 

createFormGroup(data: IOrderModel): FormGroup { 
        return new FormGroup({ 
            id: new FormControl(data.id, Validators.required), 
            name: new FormControl(data.name, Validators.required) 

After entering the value and saving the form, now the datasourcechanged gets triggered. In that event we have called the addRecord() method which was defined in the crudService. 

public dataSourceChanged(state: DataSourceChangedEventArgs): void { 
        if (state.action === 'add') { 
            this.crudService.addRecord(state).subscribe(() => {this.grid.notify('recordAdded', state);    state.endEdit()}); 
        } else if (state.action === 'edit') { 
            this.crudService.updateRecord(state).subscribe(() => state.endEdit()); 
        } else if (state.requestType === 'delete') { 
            this.crudService.deleteRecord(state).subscribe(() => { 

/** POST: add a new record  to the server using the observable concept */ 
  addRecord(state: DataSourceChangedEventArgs): Observable<Customer> { 
    return this.http.post<Customer>(this.customersUrl, state.data, httpOptions); 
Now the dataStateChange event gets triggered. Here we have called the execute method to achieve this. Please refer the workflow of the execute method one by one. 

public dataStateChange(state: DataStateChangeEventArgs): void { 

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

/** GET all data from the server */ 
  getAllData(): Observable<any[]> { 
    return this.http.get<Customer[]>(this.customersUrl) 
      .map((response: any) => (<any>{ 
        result: response, 
        count: response.length 
      .map((data: any) => data); 
Balaji Sekar.

Replied On February 2, 2020 02:52 PM UTC

This works. Though how do I sort on the column that I clicked on.



Balaji Sekar [Syncfusion]
Replied On February 3, 2020 11:13 AM UTC

Hi Ameet, 
We are happy to hear that your issue has been resolved. 
Query#: how do I sort on the column that I clicked on 
The Grid component has support to sort data bound columns in ascending or descending order. This can be achieved by setting allowSorting property as true. Please refer the below API for more information. 
You can also sort more than one column in a Grid. To sort multiple columns, press and hold the CTRL key and click the column header. The sorting order will be displayed in the header while performing multi-column sorting. This can be achieved by setting allowMultiSorting property as true. Then the allowSorting must be true while enabling multi-column sort. Set allowMultiSorting property as false to disable multi-column sorting. Please refer the below API for more information. 
Balaji Sekar.


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