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.

As already mentioned in the previous replies, the demos in our Grid Remote Data Operations topic provide a general guidance on how to implement load on demand functionality. They use a sample public OData source which supports certain queries in a predefined format.

As to what concerns your API, in order to achieve load on demand, it has to support fetching portions of data, based on the information that the API call carries, either as query parameters (as in our demos), or in the request body. In case you have already gone through our samples, you have probably got familiar with the approach taken there and the constructed queries.

Additionally, by inspecting the “Network” tab of the Dev Tools you could study the request URLs issued by the demos, for instance:

As you can see, the sample API’s endpoint URL is https://services.odata.org/V4/Northwind/Northwind.svc

And then the query part of the URL is:

Products?$count=true&$skip=17&$top=10

Where “Products” is the name of the target table/specific data source;

?$count=true means we also like to get the total number of records (this was already explained above);

&$skip=17 means to not fetch the first 17 records, as we have scrolled the grid a bit, and we are fetching a further portion of data;

&$top=10 means to fetch only the 10 top records. In indexes terms, this would fetch records 18 to 28 from the data source.

So, your project’s API has to support similar concepts in order to be able to fetch data in chunks. It does not have to be in the same format and entirely depends on the technologies you are using and the specific application needs. Please, keep in mind that how your API is configured is out of the scope of Infragistics Support, though.

As mentioned, the Remote Data demos show examples on how the IgxGrid’s own properties and events can be leveraged to achieve remote operations functionality in conjunction with an API service that is configured to support this.

I hope these clarifications help.

Best regards,
Bozhidara Pachilova

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