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

How to use Angular HTTP service for Grid operations

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.



5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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 

AM Ameet 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,



BS Balaji Sekar Syncfusion Team 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.

AM Ameet February 2, 2020 02:52 PM UTC

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



BS Balaji Sekar Syncfusion Team 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.

Live Chat Icon For mobile
Up arrow icon