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

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

The Infinite scroll demo from our Remote Data Operations topic shows fetching the data on chunks, since its purpose is not to load the entire data initially, an operation that may take quite a while in case of a lengthy data source.

The corresponding event in version 9 is named “onDataPreLoad”. Here is the API link to it. In subsequent versions, the "on.." prefix was omitted form all event names.

Please, keep in mind that version 9 of Ignite UI for Angular is long expired and is no longer eligible for developer support. Neverhtless, you could still check out the APIs for past versions in the referenced API link by selecting the target version from the dropdown:

We generally recommend upgrading to the latest version to be able to take advantage of all introduced components, features and fixes since.

Best regards,
Bozhidara Pachilova