rows not showing until i resize page, grid is in a polymer animated page, headers show, when i resize page rows draw
Can you post a test case (Gist or something) so that we can test what goes wrong? Thanks!
Thanks for the reply, this is related to my other post. Basically we have a Dialog or “Wizard” and we show a series of tables that use the Vaadin Grid component. On the initial page the “notifications table”, then a history table, then diff table.
The headers and rows are built dynamically based on a ajax response for the first table. It shows up with all rows but is all smashed up. The history and diff tables columns are static, when switched to they show fine but rows do not show until window is resized.
Here is the gist link, I did not include the code for the history and diff tables: https://gist.github.com/anonymous/50f29b9249bb713ada1c
Thanks for the test case, we’ll take a look and get back to you.
A quick sanity check would be that you check what version of vaadin-elements and vaadin-grid you are using. It seems like you have some old beta version since you’re importing vaadin-components.html, and not vaadin-elements.html.
You can update to the latest grid version, if you are using Bower, by calling “bower install --save vaadin-grid”. It should give you the latest 1.0.0-rc1 version. The latest vaadin-elements version is 0.3.0-beta13 (Bower thinks beta9 is bigger than beta13).
After that, recheck if the issue still remains.
Updated to vaadin-grid#1.0.0-rc1, attached is the screen shot of the Notification table i posted code for in gist. Still having same issues.
No need to install vaadin-elements, it’s just a bundle similar to paper-elements (when we eventually have more elements than the grid).
Looking at the screenshot, it seems like the size calculations are wrong for the row heights. I’ll see if I can debug your Gist.
yeah row heights are off, we tried to not load the grid until the paper-dialog animation finished when shown, that seemed to help a bit, as rows became a little larger… thanks for the help
My first suspicion was related to the grid being initilzed while it’s still hidden (some parent is still display: none; or not attached to the DOM). There are probably some bugs related to that regarding the size calculations.
I tried to follow the code in the Gist, but it’s a little too complex to get to the root cause. And I wasn’t able to run that directly either. A reduced, runnable test case would be the most effective way to identifying the issue.
yeah unfortunately i couldn’t put all our code on gist due to restrictions, i will pull out an example and post
So I pulled out a simple example using a dialog, a simliar data model where columns are built dynamically and found what causes the issue. When using the paper dialog with default entry and exit animations the vaadin-grid renders fine. If I specify the entry animation to be the Polymer “scale-up-animation” the rows become bunched. Here is the gist link to the simplified example you should be able to run. It looks like the height is correct but the 's within the rows are half the size.
Thanks a lot for the reduced test case and explanations in the code comments! Someone from the dev team will take a look quite soon and report back.
Hi Jason!
The row heights are measured only once, right after the Grid is visible and attached to DOM. Like you suspected, the “scale-up-animation” is the problem here. In the example application, row heights get measured in the middle of the animation.
I will create a ticket about the issue to our Github site.
As a workaround, you can need to change the animations to something that don’t use transforms.
I’ve also attached a custom version of the grid that I used to debug the issue. It’s basically the released 1.0.0 version, but I’ve exposed a boolean flag resetSizesFromDomCalled, which allowed me to do this:
_handleDialogAnimationFinish: function () {
if (this.$.gridDialog.opened) {
if (this.columns == null) {
this._getColumns();
} else {
this._getRows();
}
this.$.grid._grid.resetSizesFromDomCalled = false;
this.$.grid._grid.updateSize();
}
}22516.js (277 KB)
thx for the help…one more question… we are trying to replace our datatables web component with the vaadin grid, the only requirement we have not satisfied yet is reorder of columns, do you have example or suggestion on how we could do this?
If you mean drag-and-drop kind of column reordering, that is not available yet unfortunately. The Vaadin Framework Grid has this feature though, and we are migrating features from it in the upcoming minor releases, so user column reordering will most probably be available in also in the near future.
Update: There’s actually a ticket about this already,
https://github.com/vaadin/vaadin-grid/issues/181
. You can subscribe to that to get the latest news.
great thanks