Scroll Listbox (or Grid) with MVVM model to bottom

asked 2023-03-21 05:20:36 +0800

holos
41 ● 6

I need to scroll a listbox (or a grid) always to the bottom as it is a live log data output which should always show the most recent entry.

It looks like (example):

  <listbox id="list" hflex="1" model="@load(vm.notifications)"
    emptyMessage="${labels.noNotifications}">
    <listhead>
      <listheader label="${labels.notificationTimestamp}" sort="auto(timestamp)" />
      <listheader label="${labels.id}" sort="auto(id)" />
      <listheader label="${labels.notificationEvent}" sort="auto(event)" />
      <listheader label="${labels.notificationPayload}" />
    </listhead>
    <template name="model">
      <listitem>
        <listcell label="@load(each.timestamp)  @converter('date')" />
        <listcell label="@load(each.event)" />
        <listcell label="@load(each.id)" />
        <listcell label="@load(each.payload)" />
      </listitem>
    </template>
  </listbox>

Now I know that I should be able to scroll to the bottom using

Clients.scrollIntoView(listitem);

But in the ViewModel I got stuck

@Wire
Listbox list;
...

@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
    Selectors.wireComponents(view, this, false);
    /* >>>>>  how to get the component "listitem" for the last row here? <<<<<< */
    Clients.scrollIntoView(listitem);
}

Note: You could argue that there is no list item yet as I am still in after compose.

I also tried to retrieve call the listitem on any event when the list was definitely filled. No success:

list.getItems()

is always empty and

list.getItemAtIndex(0)

is always null!