|
| 1 | +## Description |
| 2 | + |
| 3 | +Infinite scrolling allows the grid to lazy-load rows from the server (or locally) when reaching the scroll bottom (end) position. |
| 4 | +In its simplest form, the more the user scrolls down, the more rows will get loaded and appended to the in-memory dataset. |
| 5 | + |
| 6 | +### Demo |
| 7 | +[JSON Data - Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/infinite-json) / [Demo ViewModel](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/grid-infinite-json.component.ts) |
| 8 | + |
| 9 | +[OData Backend Service - Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/infinite-odata) / [Demo ViewModel](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/grid-infinite-odata.component.ts) |
| 10 | + |
| 11 | +[GraphQL Backend Service - Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/infinite-graphql) / [Demo ViewModel](https://github.com/ghiscoding/angular-slickgrid/blob/master/src/app/examples/grid-infinite-graphql.component.ts) |
| 12 | + |
| 13 | +> ![WARNING] |
| 14 | +> Pagination Grid Preset (`presets.pagination`) is **not** supported with Infinite Scroll |
| 15 | +
|
| 16 | +## Infinite Scroll with JSON data |
| 17 | + |
| 18 | +As describe above, when used with a local JSON dataset, it will add data to the in-memory dataset whenever we scroll to the bottom until we reach the end of the dataset (if ever). |
| 19 | + |
| 20 | +#### Code Sample |
| 21 | +When used with a local JSON dataset, the Infinite Scroll is a feature that must be implemented by yourself. You implement by subscribing to 1 main event (`onScroll`) and if you want to reset the data when Sorting then you'll also need to subscribe to the (`onSort`) event. So the idea is to have simple code in the `onScroll` event to detect when we reach the scroll end and then use the DataView `addItems()` to append data to the existing dataset (in-memory) and that's about it. |
| 22 | + |
| 23 | +##### View |
| 24 | +```html |
| 25 | +<angular-slickgrid |
| 26 | + gridId="grid2" |
| 27 | + [columnDefinitions]="columnDefinitions" |
| 28 | + [gridOptions]="gridOptions" |
| 29 | + [dataset]="dataset" |
| 30 | + (onAngularGridCreated)="angularGridReady($event.detail)" |
| 31 | + (onScroll)="handleOnScroll($event.$detail.args)" |
| 32 | + (onSort)="handleOnSort()"> |
| 33 | +</angular-slickgrid> |
| 34 | +``` |
| 35 | + |
| 36 | +```ts |
| 37 | +export class Example implements OnInit { |
| 38 | + scrollEndCalled = false; |
| 39 | + |
| 40 | + // add onScroll listener which will detect when we reach the scroll end |
| 41 | + // if so, then append items to the dataset |
| 42 | + handleOnScroll(event) { |
| 43 | + const args = event.detail?.args; |
| 44 | + const viewportElm = args.grid.getViewportNode(); |
| 45 | + if ( |
| 46 | + ['mousewheel', 'scroll'].includes(args.triggeredBy || '') |
| 47 | + && !this.scrollEndCalled |
| 48 | + && viewportElm.scrollTop > 0 |
| 49 | + && Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight |
| 50 | + ) { |
| 51 | + // onScroll end reached, add more items |
| 52 | + // for demo purposes, we'll mock next subset of data at last id index + 1 |
| 53 | + const startIdx = this.angularGrid.dataView?.getItemCount() || 0; |
| 54 | + const newItems = this.loadData(startIdx, FETCH_SIZE); |
| 55 | + this.angularGrid.dataView?.addItems(newItems); |
| 56 | + this.scrollEndCalled = false; // |
| 57 | + } |
| 58 | + } |
| 59 | + |
| 60 | + // do we want to reset the dataset when Sorting? |
| 61 | + // if answering Yes then use the code below |
| 62 | + handleOnSort() { |
| 63 | + if (this.shouldResetOnSort) { |
| 64 | + const newData = this.loadData(0, FETCH_SIZE); |
| 65 | + this.angularGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered |
| 66 | + this.angularGrid.dataView?.setItems(newData); |
| 67 | + this.angularGrid.dataView?.reSort(); |
| 68 | + } |
| 69 | + } |
| 70 | +} |
| 71 | +``` |
| 72 | + |
| 73 | +--- |
| 74 | + |
| 75 | +## Infinite Scroll with Backend Services |
| 76 | + |
| 77 | +As describe above, when used with the Backend Service API, it will add data to the in-memory dataset whenever we scroll to the bottom. However there is one thing to note that might surprise you which is that even if Pagination is hidden in the UI, but the fact is that behind the scene that is exactly what it uses (mainly the Pagination Service `.goToNextPage()` to fetch the next set of data). |
| 78 | + |
| 79 | +#### Code Sample |
| 80 | +We'll use the OData Backend Service to demo Infinite Scroll with a Backend Service, however the implementation is similar for any Backend Services. The main difference with the Infinite Scroll implementation is around the `onProcess` and the callback that we use within (which is the `getCustomerCallback` in our use case). This callback will receive a data object that include the `infiniteScrollBottomHit` boolean property, this prop will be `true` only on the 2nd and more passes which will help us make a distinction between the first page load and any other subset of data to append to our in-memory dataset. With this property in mind, we'll assign the entire dataset on 1st pass with `this.dataset = data.value` (when `infiniteScrollBottomHit: false`) but for any other passes, we'll want to use the DataView `addItems()` to append data to the existing dataset (in-memory) and that's about it. |
| 81 | + |
| 82 | +##### View |
| 83 | +```html |
| 84 | +<angular-slickgrid |
| 85 | + gridId="grid2" |
| 86 | + [columnDefinitions]="columnDefinitions" |
| 87 | + [gridOptions]="gridOptions" |
| 88 | + [dataset]="dataset" |
| 89 | + (onAngularGridCreated)="angularGridReady($event.detail)"> |
| 90 | +</angular-slickgrid> |
| 91 | +``` |
| 92 | + |
| 93 | +```ts |
| 94 | +export class Example implements OnInit { |
| 95 | + initializeGrid() { |
| 96 | + this.columnDefinitions = [ /* ... */ ]; |
| 97 | + |
| 98 | + this.gridOptions = { |
| 99 | + presets: { |
| 100 | + // NOTE: pagination preset is NOT supported with infinite scroll |
| 101 | + // filters: [{ columnId: 'gender', searchTerms: ['female'] }] |
| 102 | + }, |
| 103 | + backendServiceApi: { |
| 104 | + service: new GridOdataService(), // or any Backend Service |
| 105 | + options: { |
| 106 | + // enable infinite scroll via Boolean OR via { fetchSize: number } |
| 107 | + infiniteScroll: { fetchSize: 30 }, // or use true, in that case it would use default size of 25 |
| 108 | + |
| 109 | + preProcess: () => { |
| 110 | + this.displaySpinner(true); |
| 111 | + }, |
| 112 | + process: (query) => this.getCustomerApiCall(query), |
| 113 | + postProcess: (response) => { |
| 114 | + this.displaySpinner(false); |
| 115 | + this.getCustomerCallback(response); |
| 116 | + }, |
| 117 | + // we could use local in-memory Filtering (please note that it only filters against what is currently loaded) |
| 118 | + // that is when we want to avoid reloading the entire dataset every time |
| 119 | + // useLocalFiltering: true, |
| 120 | + } as OdataServiceApi, |
| 121 | + }; |
| 122 | + } |
| 123 | + |
| 124 | + // Web API call |
| 125 | + getCustomerApiCall(odataQuery) { |
| 126 | + return this.http.get(`/api/getCustomers?${odataQuery}`); |
| 127 | + } |
| 128 | + |
| 129 | + getCustomerCallback(data: { '@odata.count': number; infiniteScrollBottomHit: boolean; metrics: Metrics; query: string; value: any[]; }) { |
| 130 | + // totalItems property needs to be filled for pagination to work correctly |
| 131 | + const totalItemCount: number = data['@odata.count']; |
| 132 | + this.metrics.totalItemCount = totalItemCount; |
| 133 | + |
| 134 | + // even if we're not showing pagination, it is still used behind the scene to fetch next set of data (next page basically) |
| 135 | + // once pagination totalItems is filled, we can update the dataset |
| 136 | + |
| 137 | + // infinite scroll has an extra data property to determine if we hit an infinite scroll and there's still more data (in that case we need append data) |
| 138 | + // or if we're on first data fetching (no scroll bottom ever occured yet) |
| 139 | + if (!data.infiniteScrollBottomHit) { |
| 140 | + // initial load not scroll hit yet, full dataset assignment |
| 141 | + this.angularGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered |
| 142 | + this.dataset = data.value; |
| 143 | + this.metrics.itemCount = data.value.length; |
| 144 | + } else { |
| 145 | + // scroll hit, for better perf we can simply use the DataView directly for better perf (which is better compare to replacing the entire dataset) |
| 146 | + this.angularGrid.dataView?.addItems(data.value); |
| 147 | + } |
| 148 | + } |
| 149 | +} |
| 150 | +``` |
0 commit comments