Grid rowDetailsGenerator in Angular2 app

Hello,

I have just recently found Vaadin elements tried it in my home project Angular 2 app. So far I am impressed how good it performes. As I move forward I need to implement more complex tasks. Now I would like to use row details for diplaying details about item and if posible add some quick edits on it. As I had similary in other implementation just wrote comonent that handles it like <my-component [item] ="item"></my-component>. from now on I have couple questions:

  1. As far as I understand there is no way to pass my component using
    rowDetailsGenerator as it would not be compiled inside Polymer shadow dom. Or is there?
  2. If abow answer is no, I would like to load some content async in details. Can I pass promise or something to rowDetailsGenerator, because some content is base64 images and I would love not to load them for all elements in grid at once.

Would apreciate any help :slight_smile:

Hi, Ricardas!

Not 100% sure, but I would expect Angular to not like if you try to pass an Angular component through the rowDetailsGenerator. As vaadin-grid 1.x isn’t really even implemented with shadow DOM in mind (the origins predate the web components trend), the DOM is going to end up inside the shadow DOM of vaadin-grid, and not be exposed outside of the element.

The second approach seems viable. You should be able to trigger a request inside the rowDetailsGenerator, with a reference to the details element, and just update the contents of that asynchronously. The only issue I foresee is, that you need to set the height of the details element before your callback returns, so that the grid rows are positioned correctly. I suspect it would not catch any size changes after the rowDetailsGenerator returns.