Fill grid data from API

[Farid Murshudov]

Hi
I am using syncfusion latest version with angular v18. I have service and also method to fetch data from API. I want to fill grid data via this method. Not OData or another tools

// show spinner this.taskActionGroupService

        .getActionGroups(

            this.filter.name,

            this.filter.code,

            this.filter.description,

            undefined,

            // get skip count from grid and pass it here,

// get skip count from grid and pass it here

        ).pipe(finalize(() => {

            // hide spinner

        }))

        .subscribe((resultData: PagedResult) => {

            // fill grid data and set paginator

        });

class  PagedResult has 2 fields: items and totalCount. And here is my grid inside HTML file

<ejs-grid #grid [allowPaging]='true' [loadingIndicator]='loadingIndicator'>

                            <e-columns>

                                <e-column field='name' headerText='Name'></e-column>

                                <e-column field='code' headerText='Code'></e-column>

                            </e-columns>

  </ejs-grid>

[Rajapandi Ravi]

Hi Farid,

Greetings from Syncfusion support

To fill Grid data using a method to fetch data from an API in Angular without using OData or other tools and if you like to bind the data as Local data binding and handle all the Grid actions locally, you can utilize the fetch API to retrieve data from your server and bind it to the Syncfusion Grid. Here is a step-by-step guide:

1. HTML Setup: Include the Syncfusion Grid in your HTML with necessary configurations.

App.component.html

 

<button ejs-button (click)="click()">Bind Data via Fetch</button>

 

<ejs-grid #grid [allowPaging]='true' [loadingIndicator]='loadingIndicator'>

                            <e-columns>

                                <e-column field='name' headerText='Name'></e-column>

                                <e-column field='code' headerText='Code'></e-column>

                            </e-columns>

  </ejs-grid>

 

2. Fetch Data from API: Use the fetch API to get data from your server and bind it to the Grid's dataSource property.

App.component.ts

 

click() { //button click event

  const fetch = new Fetch("https://localhost:****/home/getdata", 'post'); // Use your server's host number instead of ****

  fetch.send();

  fetch.onsuccess = (data: string) => {

    this.grid.datasource = JSON.parse(data);

  };

}

 

Documentation: https://helpej2.syncfusion.com/angular/documentation/grid/data-binding/local-data#binding-data-and-performing-crud-actions-via-fetch-request

If you like to handle all Grid action in your custom service, we suggest you use custom-binding feature to bind the data to the Grid. Using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the dataSource in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering. So, using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties.

Note: ‘dataStateChange’ event is not triggered at the Grid initial render. If you are using a remote service, you need to call your remote service by manually with a pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings, you need to send the default value 12 ) in ngOnInIt. Please return the result like as “{result: […], count: …}” format
to Grid. Please refer the below documentation for more information.

Documentation: https://helpej2.syncfusion.com/angular/documentation/grid/data-binding/remote-data#binding-observable-data-using-async-pipe

Regards,

Rajapandi R