Hi Vin,
Greetings from Syncfusion support.
The EJ2 Grid supports On-Demand loading using adaptors which helps to improve the performance for large data application. You can use this for achieving lazy loading in the Grid. Based on your requirement we suggest you to use Grid Paging with URL adaptor which allows to load the required amount of data(can be specified using page settings) in page segments in the Grid.
We have prepared a sample based on this for your reference. You can find it below,
Note: This is an Angular with ASP.NET Core sample, so this can be run by opening the project in Visual Studio, restoring the packages and node modules for it and then launching the application.
More details on the Paging and URL adaptor can be checked in the below documentation links,
Alternatively you can also use remote data binding with other available adaptors or custom binding support available with the Grid to achieve your requirement. We have explained this in detail below,
Remote data binding:
The EJ2 Grid supports the following adaptors to communicate with the data source in the back-end – Json, URL, OData, ODataV4, Remote Save, Web API and WebMethod adaptor. Each adaptor uses a different way to send and receive requests and response from remote services. They are explained in the below documentation link which you can check for more details,
You can use the adaptor which best suits your requirement for binding data and performing grid actions(Sort, Page, Filter, etc. ) from the server.
Custom binding:
If you are using the API calls to perform Grid action from the server, then we suggest you to custom binding approach to bind data in the Grid. With this you can bind data from an API call by providing your own custom queries(as required by your API) and handle all the Grid actions(Sort, Page, Filter, etc. ) with it. The Grid’s custom binding approach is explained below,
For 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 data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. 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.
More details on custom binding can be checked in the below help documentation link,
Note: The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property.
Please get back to us if you require any further assistance.
Regards,
Sujith R
