Polymer 1.x: iron-data-table does not load data nor header styles on first render when inside neon-animated-pages

Question

The below screenshot shows how my iron-data-table element looks when it first loads. Notice the data is missing and the headers are not fully formatted (the width seems to be too small to show the column header labels).

However, if I enter a character in the filter fields or click one of the sort buttons, the iron-data-table seems to re-draw itself and it looks fine. The columns and headers render properly and the data populates the table as expected.

This problem started when I ~~added some directories to my file structure~~ nested my iron-data-table inside neon-animated-pages. I double checked and all my imports are loading correctly. But I suspect that, somehow, there is a slight delay in fetching the data and somehow the table might be trying to render before the data arrives and not refreshing after the data arrives.

So I tried to add the following function. But to no avail. There is no render() method for iron-data-table.

<iron-data-table id="grid" ...

....

attached: function() {
  this.async(function() {
    this.$$('#grid').render();
  }.bind(this), 500);
},

What could be causing this behavior? And what should I try next?

Edit

This plunk demonstrates the desired iron-data-table behavior.

This plunk demonstrates my problem behavior. (Not finished yet. Currently in progress.)

The configuration is approximately as follows.

parent-el.html

<neon-animated-pages>
  ...
  <container-el...>...</container-el>
</neon-animated-pages>

container-el.html

<child-el ...>...</child-el>

child-el.html

<iron-data-table ...></iron-data-table>

Edit 2

Based on @SauliTähkäpää's comment, I tried the following fix unsuccessfully.

parent-el.html

<neon-animated-pages id="animator" ...>
  ...
  <container-el...>...</container-el>
</neon-animated-pages>

...

attached: function() {
  this.async(function() {
    this.$.animator.notifyResize();
  }.bind(this), 50);
},

There is no iron-data-table in the PolymerElements catalog. It appears to be someone elses add on, so it might be buggy — akc42, Oct 10 '16 at 05:48
Hi! Can you post more info on how you've configured your table? — Sauli Tähkäpää, Oct 10 '16 at 07:10
@SauliTähkäpää: I am in the process of trying to recreate the problem in a plunk (see above edit). However, I do notice the problem seems to only appear when I try to place it inside a `neon-animated-pages` element. Note there are a couple intervening page wrapper elements in between the `neon-animated-pages` element and the `iron-data-table`. My current guess is that it might have something to do with the `assignParentResizable(parentResizable)` or `notifyResize()` methods of [`neon-animated-pages`](https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages). — Let Me Tink About It, Oct 13 '16 at 06:29
@SauliTähkäpää: When I say *only* in a `neon-animated-pages` element, I mean I tested it inside an `iron-pages` element and it works fine. Is this information and my above description sufficient to point you in a useful direction for an answer or do you need me to try to finish recreating the the problem in a plunk? — Let Me Tink About It, Oct 13 '16 at 06:30
OK, `neon-animated-pages` might be very well the cause here if it does some resize animations or similar, since `` tries to measure the viewport, row etc. heights right about attaching time. If this is the case calling `notifyResize` on the table element should resolve the issue. — Sauli Tähkäpää, Oct 13 '16 at 12:24
@SauliTähkäpää: ... *calling* `notifyResize` *on the table element* ... I'm not sure exactly what you mean? Could you kindly scratch out a few lines of code in an answer down below just to clarify your idea please and thank you? For example, there is no `notifyResize()` method [described here in the iron-data-table api docs](https://saulis.github.io/iron-data-table/). Also, the `neon-animated-pages.notifyResize()` method accepts no arguments (from what I can tell from the docs). Also, will I need to listen for the resize notification and take any action? Please see my attempt above in Edit 2. — Let Me Tink About It, Oct 13 '16 at 13:43
Ah, the function is inherited from iron-resizable-behavior and isnt directly visible in the docs it seems. Just call `this.$$('#grid').notifyResize()` — Sauli Tähkäpää, Oct 13 '16 at 14:26
@SauliTähkäpää: Thanks. Getting closer. `this.$$('#grid').notifyResize()` works when I install a manual button to trigger the call. But not when I bind the `attached()` method. Is there any event I can listen for to automatically trigger the call to `notifyResize()`? So far, I've tried listening for `item-changed` unsuccessfully. — Let Me Tink About It, Oct 13 '16 at 16:16
Correction: It works if I move the `async ... .bind(this), 5000)` delay time to, say, 5000 ms. But that seems sloppy. I would prefer to listen for an event if possible. — Let Me Tink About It, Oct 13 '16 at 16:22

score 1 · Accepted Answer · answered Oct 13 '16 at 17:19

Not that familiar with neon-animated-pages but by looking at the docs, it should call notifyResize() on selected pages as long as they extend iron-resizable-behavior.

So I think your options are either to make sure <container-element> and other elements in the tree are extending iron-resizable-behavior OR override the resizerShouldNotify to notify the grid directly. See more here: https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages#method-resizerShouldNotify

That worked! I chose the first option... extending `IronResizableBehavior` throughout the element chain. Thanks again! You're amazing! — Let Me Tink About It, Oct 13 '16 at 18:33

Let Me Tink About It · Answer 2 · 2016-10-13T20:05:34.620

To explicate for anyone who follows this question later...

Per @SauliTähkäpää's accepted answer, I successfully added the following code to each element in the chain (i.e., beginning with the element containing neon-animated-pages and ending with the element containing iron-data-table — in this example, that would be parent-el, container-el, and child-el).

parent-el.html, container-el.html, child-el.html.

<link rel="import" href="path/to/bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
...
behaviors: [
  Polymer.IronResizableBehavior,
],

Polymer 1.x: iron-data-table does not load data nor header styles on first render when inside neon-animated-pages

Edit

Edit 2

2 Answers2