Hi Team,
I am using Ignite version 9. we are trying to implement Infinite scrolling/ vertical scrolling for our data grids.
From the sample available in Infragistics https://stackblitz.com/edit/igx-grid-sample-version-9?file=src%2Fapp%2Fgrid%2Fgrid-row-editing-sample%2Fremote.service.ts , i have used our api call to remotely access data instead of DATA_URL but it is throwing 404 error.
Please help. Please reply ASAP.
Hi Shobhana,
Thank you for posting to Infragistics Community!
Please keep in mind that version 9.x of Ignite UI for Angular (and also Angular) is expired and no longer eligible for support. It does not receive any new features, nor fixes since a while ago. The currently supported versions of Ignite UI for Angular are 12.3, 13.2 and 14.1. My suggestion is to upgrade your project’s Angular and Ignite UI versions to the latest in order to take advantage of all introduced fixes and enhancements since then. I recommend reviewing our Update guide for a detailed walk-through on upgrading your app.
Additionally, what I can say is that while there seems to be a StackBlitz error with the referenced sample, l determined it runs alright locally and loading the data on demand feature works as expected. In addition, the code is as provided in our documentation demo.
Having this in mind, and provided that the only thing you modified is the DATA_URL variable and the observed result is an HTTP 404 error, I am afraid that this would not really be related to Infragistics components and rather indicates an issue with your server and access to the remote API.
My suggestion is to test your API in isolation and investigate the potential causes of a "Not found" error.
Finally, I would like to mention that once you are able to successfully call your API, you will have to adapt the solution according to the provided data, such as the returned total count of the records, the column names, etc.
Please, keep me posted on your progress.
Best regards, Bozhidara Pachilova Associate Software Developer
Thank You Bozhidara for quick reply. I have tested my api call in isolation, it is working fine but the issue is in
Could you please the documentation link of Infinite Scroll which helps me to better understand what each variable denotes? Thanks
Here is the link to the Angular Grid Remote Data Operations topic in our documentation.
Regarding your comment, please note the type of data source used in our demo. It is an OData source which supports certain queries in a predefined format, such as retrieving the total count of the records, which is precisely what the `${DATA_URL}?$count=true&` query string aims to achieve. This ensures that the count is returned as a field in the result data. In the demo this is used for example like this:
this.totalItems = request.data["@odata.count"];
It is highly likely that the returned data of your own API has different format. As mentioned in my previous reply, the demos provide a general guidance on how to implement load on demand functionality. However, it is up to the developers to adapt the solution as per their APIs. The 404 error is certainly due to the fact that the `${DATA_URL}?$count=true&` endpoint does not exist for your API.
Finally, as per the Remote Virtualization section, please keep in mind that the totalItemCount property of the grid has to be set to, as it allows the grid to size its scrollbar correctly. This means your API should provide the records count, similar to the OData source in the demo.
Best regards, Bozhidara Pachilova
Hi Bozhidara,Thank you for your response. I have one more doubt w.r.t. Infinite Scroll. Do we fetch the entire data load as a cache data from api call or we fetch chunk of data as needed?