vaadin-grid 'Ready' function but grid is not ready yet

Flow
1

I am working with vaadin-grid element but I am facing a problem.

At the moment I have an element which includes also a vaadin-grid and I try to access the grid after the element is ready in the following way:

Polymer({ is: 'my-element', ready: function() { // access my grid var grid_by_id = this.$.mygrid; // return null var grid_by_selector = document.querySelector('#mygrid'); // return null } }) And this is my DOM

<dom-module id="my-element">
     <template>

          <vaadin-grid id="mygrid">
          </vaadin-grid>

     </template>
</dom-module>

But if I try to access in the same way the grid, after “a while, like few seconds later” the code works. So it looks to me that when Polymer fire the event “ready” inside the element my grid is not ready yet … Any idea how I can fix this?

This is a problem because I need to know when the DOM element “grid” is ready so I can start to play with it. What is supposed to be the right way?

2

If I use the following code:

[code]
attached: function() {
this.async(function() {
console.log(‘attached fired’);
console.log('attached > ’ + this.$.myGrid);
});
},

ready: function (args) {
console.log(‘ready fired’);
console.log('ready > ’ + this.$.myGrid);
}
[/code]I get the following output from Google Chrome Console:

ready fired ready > undefined attached fired attached > undefined But if I search for this.$.myGrid later with a Button event or anything else, the grid is there. So it is really a problem of initialization of the vaadin-grid element.

3

Now, this is getting really interesting.
If I want to get the grid ready, the only thing that works is this one:

        ready: function (args) {
            window.addEventListener('WebComponentsReady', function(e) {
                console.log('ready > ' + document.querySelector('#gridSocial'));
            });
        },

In this case, it works. Why?

4

myelement.$.mygrid should always return non null, could you post your template code ?

5

I found the problem @Manuel Carrasco.

If I put the grid inside a new tag that is using is=“dom-bind” or is=“dom-if” and I put a if clause, the grid is not rendered correctly and it doesn’t work as expected.

Example, if I have the following code:

<template is="dom-if" if="{{my_condition}}">
   <vaadin-grid id="my_grid"></vaadin-grid>
</template>

And the template condition returns false at page load, the grid is never initialized properly, even after the template become visible.