vaading-grid, subgrid in Details view

Flow
1

Hi, I am working with vaading-grid together with Polymer 1.3.
At the moment I created a grid that, when selected, shows a subgrid inside a paper-card.

My template is setup in the following way (
I just follow the example on Vaading website
):

[code]






Available Installations

                    <vaadin-grid>
                        <table>
                            <colgroup>
                                <col name="startDate">
                                <col name="endDate">
                                <col name="active">
                                <col name="users" />
                            </colgroup>
                            <thead>
                                <tr><th>Start Date</th><th>End Date</th><th>Active</th><th>Nr. Users</th></tr>
                            </thead>
                        </table>
                    </vaadin-grid>
                </paper-card>
            </div>

        </template>
    </div>

[/code]I load my template as following:

[code]
// details generator
grid.rowDetailsGenerator = function (rowIndex) {
var details = document.createElement(‘div’);
grid.getItem(rowIndex, function (error, item) {
if (!error) {
var templateWrapper = document.getElementById(‘templateWrapper’);
var template = templateWrapper.querySelector(‘template’);
details.innerHTML = templateWrapper.querySelector(‘.licenseDetails’).outerHTML;
}
});

        return details;
    };

[/code]The problem is that the grid is not rendered. I can see it inside the HTML but it is not visible, somehow even if I set the height hardcoded I can’t see anything. Why?

This is the working example:

2

What it looks very strange is how the internal DOM of the Details is rendered.
Somehow the entire Shadow DOM is not processed as it is supposed to be, even by re-creating your sample locally.

Is there any alternative way to create a subgrid?

3

Hi!

I created a quick Codepen that shows the same issue:
http://codepen.io/anon/pen/MyGzyp

I don’t think there’s another way to create sub-grid. Not really sure what goes wrong in the initialization of the sub-grid, but something we should take a look at.

4

I created a new issue in GitHub which you can follow. Can’t promise when we’ll take a closer look, though :confused:


https://github.com/vaadin/vaadin-grid/issues/353

5

Hi Jouni, thank you for your reply.
It happens with any component, like any component/element inside the details somehow is not properly rendered, only plain HTML works. I am not sure if it’s a problem with the iframe of the table or what.

Appreciate the effort, hopefully the team will have time to look into this, because vaangrid is quite a good product.

6

Hi,

I think I have almost the same issue even if it’s not exacly the same use case.

I want to put a clickable paper-button inside a row detail.
The paper-button is visible but the click does not work.

I created a codepen to reproduce this issue (only works in chrome I don’t know why…):

http://codepen.io/frezelth/pen/LNrGPv

I’ve put another button outside of the grid and that one works.

It would be very nice to be able to include polymer elements in the row details!

Thanks!

Thomas

7

I’m guessing that the templating gets in your way here, not hooking up to the right listener.

When creating details rows, I personally like to create a custom element for the row itself as I think that it makes things clearer. I can listen to/handle events interal to the details row element right in the element, or then fire events if I want to propagate the event further up.

Here’s an example of what I mean from the most recent Elementary School episode: https://github.com/vaadin/elementary-school-009 (video here https://www.youtube.com/watch?v=MAyszSRzcDg)

8

Exactly, if you look at the DOM generated in the Shadow DOM, the vaadin grid is using an iframe. Probably the content provided inside the details element, is later rendered inside the same iframe, so it does not have access to the shadow DOM used by Polymer. That’s my feeling but I am waiting for an alternative solution. I will try your idea of having a separate template element for the details.