Web Components Grid Remote Data Operations

    By default, the IgcGridComponent uses its own logic for performing data operations.

    You can perform these tasks remotely and feed the resulting data to the IgcGridComponent by taking advantage of certain inputs and events, which are exposed by the IgcGridComponent.

    Infinite Scroll

    A popular design for scenarios requiring fetching data by chunks from an end-point is the so-called infinite scroll. For data grids, it is characterized by continuous increase of the loaded data triggered by the end-user scrolling all the way to the bottom. The next paragraphs explain how you can use the available API to easily achieve infinite scrolling in IgcGridComponent.

    To implement infinite scroll, you have to fetch the data in chunks. The data that is already fetched should be stored locally and you have to determine the length of a chunk and how many chunks there are. You also have to keep a track of the last visible data row index in the grid. In this way, using the StartIndex and ChunkSize properties, you can determine if the user scrolls up and you have to show them already fetched data or scrolls down and you have to fetch more data from the end-point.

    The first thing to do is fetch the first chunk of the data. Setting the totalItemCount property is important, as it allows the grid to size its scrollbar correctly.

    Additionally, you have to subscribe to the DataPreLoad output, so that you can provide the data needed by the grid when it tries to display a different chunk, rather than the currently loaded one. In the event handler, you have to determine whether to fetch new data or return data, that's already cached locally.

    Infinite Scroll Demo

    EXAMPLE
    NwindData.ts
    NwindService.ts
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Remote Paging

    The paging feature can operate with remote data. In order to demonstrate this let's first declare our service that will be responsible for data fetching. We will need the count of all data items in order to calculate the page count. This logic will be added to our service.

    export class RemotePagingService {
        public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
        constructor() {}
    
        public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
            return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
            .then((result) => result.json())
            .catch((error) => console.error(error.message));
        }
        
        private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
            let qS = "";
            if (baseUrl) {
                    qS += `${baseUrl}`;
            }
    
            // Add pageIndex and size to the query string if they are defined
            if (pageIndex !== undefined) {
                qS += `?pageIndex=${pageIndex}`;
                if (pageSize !== undefined) {
                    qS += `&size=${pageSize}`;
                }
            } else if (pageSize !== undefined) {
                qS += `?perPage=${pageSize}`;
            }
    
            return `${qS}`;
        }
    }
    ts

    After declaring the service, we need to create a component, which will be responsible for the IgcGridComponent construction and data subscription.

    First we need to bind to the relevant events so when we change pages and the amount of records shown per page, the remote service will fetch the correct amount of data

      constructor() {
          this.grid = document.getElementById('grid') as IgcGridComponent;
          this.pager = document.getElementById('paginator') as IgcPaginatorComponent;
          
          this._bind = () => {
            window.addEventListener("load", () => {
              this.loadData(this.page,this.perPage);
            });
    
            this.pager.addEventListener("perPageChange", ((args: CustomEvent<any>) => {
              this.perPage = args.detail;
              this.loadData(this.page, this.perPage);
            }) as EventListener);
    
            this.pager.addEventListener("pageChange", ((args: CustomEvent<any>) => {
              this.page = args.detail;
              this.loadData(this.page, this.perPage);
            }) as EventListener);
          }
    
          this._bind();
      }
    ts

    We also need to set the method for loading data and update the UI accordingly:

      private loadData(pageIndex?: number, pageSize?: number): void {
        this.grid.isLoading = true;
        
        RemotePagingService.getDataWithPaging(pageIndex,pageSize)
        .then((response: CustomersWithPageResponseModel) => {
          this.totalRecordsCount = response.totalRecordsCount;
          this.pager.perPage = pageSize;
          this.pager.totalRecords = this.totalRecordsCount;
          this.page = response.pageNumber;
          this.data = response.items;
          this.grid.isLoading = false;
          this.updateUI(); // Update the UI after receiving data
        })
        .catch((error) => {
          console.error(error.message);
          // Stop loading even if error occurs. Prevents endless loading
          this.grid.isLoading = false;
          this.updateUI();
        })
      }
    
        private updateUI(): void {
        if (this.grid && this.data) { // Check if grid and data are available
            this.grid.data = this.data;
        }
      }
    ts

    For further reference, please check the demo bellow:

    Grid Remote Paging Demo

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    Ignite UI for Web Components | CTA Banner

    Known Issues and Limitations

    • When the grid has no PrimaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:
    • Row Selection
    • Row Expand/collapse
    • Row Editing
    • Row Pinning

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.