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
Could you please the documentation link of Infinite Scroll which helps me to better understand what each variable denotes? Thanks
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
Bozhidara,Please reply to my query. Do i need an API which would also call data in chunks? I am unable to understand how infinite scroll works
The remote API needs to support loading data in chunks and your front end should ensure that the API calls pass the expected query/body parameters, so that the API can understand the requests.
My suggestion is to, please, review the discussion so far again, where these questions have already been addressed in detail, as well as the referenced documentation resources, where explanations along with sample code are provided.
Additionally, you are most probably familiar with our documentation, however, just to make sure, I would like to mention that any demo could be opened in StackBlitz via this button:
and all the source-code files could be viewed. The dmeos could be further forked and modified in order for you to easily test the features out.
For instance, the following screenshot shows the same demo running in StackBlitz, and the remote.service.ts file opened, where the remote front-end service implements the calls to the remote API.
Best regards,Bozhidara Pachilova
What is the event to trigger infinite scroll for Infragisitcs version 9.
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.
Hi Bozhidara,the use of startindex and chunk size is causing issue. When i am trying to scroll, it is loading data for each page with each time scroll instead of scrolling end.