Material: virtualRepeat: enhance list and card to support infinite lists.

[austincondiff]

I would really like md-list-grid to work with a dynamic data source on a virtual repeat with infinite scroll. Let me know if further clarification is needed.

[arsonik]

+1

[clarson0]

+1

[ThomasBurleson]

Did you mean md-grid-list or md-list ?

[arsonik]

I'd +1 for md-grid-list !

[ashokyadav006]

+1 with md-grid-list, this feature will solve lots of performance issues.

[henkjurriens]

+1

[rponnuru0518]

+1

On Fri, Feb 12, 2016 at 12:39 PM Henk Jurriens [email protected]
wrote:

+1

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/6774#issuecomment-183444285.

[doroudi]

+1

[raphaelnew]

+1

[JonnyHeavey]

+1

[michaelkrog]

I had this working in 1.1.0-RC4 like this:

<style>
.datatable .align-left figure {
      justify-content: flex-start;
}

.datatable figure span {
  padding: 16px;
}
</style>

<md-grid-list class="datatable" md-cols="4" md-row-height="40px" md-gutter="8px" style="height:30px">
    <md-grid-tile class="align-left">Name</md-grid-tile>
    <md-grid-tile class="align-left">Phone</md-grid-tile>
    <md-grid-tile class="align-left">Email</md-grid-tile>
    <md-grid-tile class="align-left">Address</md-grid-tile>
  </md-grid-list>
  <md-divider></md-divider>
  <md-virtual-repeat-container flex>
      <md-grid-list md-virtual-repeat="contact in ctrl.loader" md-on-demand="true" md-item-size="54" class="datatable" md-cols="4" flex md-row-height="54px" md-gutter="8px" ng-click="ctrl.editContact(contact)" md-ink-ripple>
          <md-grid-tile class="align-left">{{contact.name}}</md-grid-tile>
          <md-grid-tile class="align-left">{{contact.phone}}</md-grid-tile>
          <md-grid-tile class="align-left">{{contact.email}}</md-grid-tile>
          <md-grid-tile class="align-left">{{contact.address}}</md-grid-tile>
          <md-divider></md-divider>
    </md-grid-list>
</md-virtual-repeat-container>

[gkohen]

@michaelkrog, I believe this is not the intended question. @acondiff related to a dynamic list of tiles that could, according to the available width of the container fill the tiles and then go to the next row. What you had presented is essentially, rows of which each row is a record and will only display 4 pieces of information.

[sykorax]

Any update on this? I think @michaelkrog's answer is not the corresponding solution for this topic.

[LeoLozes]

+1 this is necessary for any scenario involving a list of md-cards with a responsive layout. Which I believe will be needed in most applications written with Angular Material.

Should we create a new issue to see if they can consider it? I believe this was closed in the "spring cleaning".

[QuentinLuc]

+1 We also need this!

[magicboy110]

+1

[clshortfuse]

I think Android's ListView implementation is what we should target. Essentially, it's like we have with virtual repeater, but can hold items without preset heights. ListViewItem is overloaded and essentially, we just supply templates. Dynamic height is somewhat tricky, but not too hard to implement.

Basically, we have two components for what Android does in one.

[Splaktar]

There are unfortunately no plans to support dynamically sized items within virtual repeat. It is recommended to find a solution outside of AngularJS Material for this requirement.