Using virtualScroll with different arrays and ion-item-group

Ionic Framework ionic-v3
1

Is there any way to use virtual scroll in this particular situation:

   <ion-list>
<ion-item-group *ngFor="let group of catalog.groups">
  <ion-item-divider sticky>
   {{group.name}}
  </ion-item-divider>
<ion-item-sliding class="pos-table-item" *ngFor="let product of group.products">
  <button ion-item>
{{product.name}}
[...]

I am puzzled at this point have tried multiple combinations. The documentation is using *virtualHeader=“let header” inside the ion-item-divider but in this case I am using ion-item-group together with it that picks data from a different array.

2 Likes
2

@ashtrayguy Did you find an answer for your question? I’m facing a similar situation

3

Same here. Nobody found a solution?

4

I’m also looking for a way to do this.
There’s no example on the ionic docs ionic docs.

Does somebody has the solution for this?

5

Apparently there’s no solution for this. The docs doesn’t contemplate a solution either.

If you use a flat hierarchy like the example below it works but you loose the ability of using sticky dividers. Not to mention that you gotta have a flat Array of objects so say goodbye to multi-level Array of Objects. That’s a bummer :S

<ion-list [virtualScroll]="items" [headerFn]="myHeaderFn">
  <ion-item-divider sticky *virtualHeader="let header">Header:</ion-item-divider>
  <ion-item *virtualItem="let item">
    <h2>{{item.title}}</h2>
    <p>{{item.body}}</p>
  </ion-item>
</ion-list>
6

Does this still stand? is there still no way to use Virtual Scroll with multi-dimensional arrays?

7

I still haven’t found a way to do this to this day. I’d love if somebody could look deeper into this particular case as it is a helpful structure.

8

I still have no solution for this.

There’s nothing on ionic documentation nor anyone has gotten to a solution with sticky dividers with success.

I’ve already tweeted @joshuamorony, one of the best developers on ionic, and got no answer so :face_with_raised_eyebrow:

I managed to get it to work but without sticky headers. Even tried third party approaches like clusterize to get it to work but nothing.

I’m actually considering to leave ionic behind for some other because of this. It just makes no sense.

9

Yeah, the dividers / grouped list alone should be a built-in component…

I’ve reached out to Josh (no response yet) and the Ionic team, and the most recent advice I received is that there isn’t an easy way to do it and that I should try Infinite List instead, which I’m now doing.

11

Several years late but just done something similar - you should be able to achieve it using headerFn and *virtualHeader

  1. Flatten your data, but order it so it respects the logical groupings
  2. In template:
 <ion-virtual-scroll
    [items]="catalogs"
    [headerFn]="getHeader">
     <ion-item-divider *virtualHeader="let header">{{header}}</ion-item-divider>
     <ion-item *virtualItem="let catalog">
     ...
  1. In ts file:
getHeader(
    catalog,
    index,
    catalogs
  ) {
    if (index === 0 || catalog.group !== catalogs[index - 1].group) {
      return catalog.group;
    } else {
      return null;
    }
  }