Execute code after Grid renders rows from DataProvider?

Is it possible to establish a callback for when Grid rows are rendered on the client? My goal is to scroll to the bottom after the data is loaded.

I don’t think there is a direct callback for such, but you could try it with some custom Javascript that reacts on attribute changes on the Grid like the addition and removal of the “loading” attribute as indication that it finished loading

Darn

Was hoping there was something easy I missed. Basically, I’ll have to execute table.scrollTop = table.scrollHeight on the client.

https://cdn.vaadin.com/vaadin-web-components/23.3.7/#/elements/vaadin-grid you can find all public JS APIs here

Thanks. I am aware of this.

Why is the server side Grid:: scrollToEnd method not enough?

If I am going to observe mutations on the client-side, I might as well perform the scroll on the client-side. Otherwise, I would just do an RPC request to the server just to do a UIDL back to the client with Grid#scrollToEnd(). The latter seems inefficient. However, it might be best to ensure server synchronization.

Don’t worry so much about pre optimizing such use-cases before you hit a wall :sweat_smile: this would cause you so much headache and stuff to maintain

Can you think of a way to observe mutations to vaadin-grid without extending the class?

I’m not a JS expert, but I would guess using MutationObserver and selecting the Grid by id or something else and filter the mutations for attributes could work

Haven’t used Polymer in a while and I forgot that notify: true properties emit an event on change. So, I tried:

grid.getElement().addEventListener("loading-changed", event -> {
  if(!event.getEventData().getBoolean("event.detail.value")) {
    grid.scrollToEnd();
  }
}).addEventData("event.detail.value");