Merge pull request #1239 from vaadin/fix-init-performance

Don't render empty rows if columns haven't yet initialized

demo/grid-pagination-demos.html

@@ -23,10 +23,6 @@ <h3>Pagination</h3>
         <dom-module id="x-pagination">
           <template preserve-content>
             <style>
-              vaadin-grid {
-                height: auto;
-              }
-
               #pages {
                 display: flex;
                 flex-wrap: wrap;
@@ -59,7 +55,7 @@ <h3>Pagination</h3>
             </style>
             <x-array-data-provider items="{{items}}"></x-array-data-provider>
 
-            <vaadin-grid id="grid" page-size="10">
+            <vaadin-grid id="grid" page-size="10" height-by-rows>
 
               <vaadin-grid-column>
                 <template class="header">First Name</template>

src/vaadin-grid-data-provider-mixin.html

@@ -269,7 +269,7 @@
     }
 
     _canPopulate() {
-      return this._hasData;
+      return this._hasData && this._columnTree;
     }
 
     _loadPage(page, cache) {

src/vaadin-grid-dynamic-columns-mixin.html

@@ -83,6 +83,8 @@
           this._debouncerCheckImports,
           Polymer.Async.timeOut.after(2000),
           this._checkImports.bind(this));
+
+        this._ensureFirstPageLoaded();
       });
     }
 

test/array-data-provider.html

@@ -95,6 +95,7 @@
         grid = fixture('default');
         grid.items = [];
         grid.items = [0];
+        flushGrid(grid);
         expect(getRows(grid.$.items)).to.have.length(1);
       });
 

test/basic.html

@@ -71,7 +71,7 @@
 
       it('Should change the opacity of cell content in loading rows from 1 to 0 and back', () => {
         const firstRow = grid.shadowRoot.querySelector('#items [part~="row"]');
-        const cellContent = grid.querySelector('vaadin-grid-cell-content');
+        const cellContent = getBodyCellContent(grid, 0, 0);
 
         expect(window.getComputedStyle(cellContent).opacity).to.eql('1');
 

test/data-provider.html

@@ -124,6 +124,13 @@
         flushGrid(grid);
       });
 
+      it('should not render rows before columns are defined', () => {
+        container = fixture('table');
+        grid = container.$.grid;
+        container.dataProvider = sinon.spy(infiniteDataProvider);
+        expect(grid.$.items.childElementCount).to.equal(0);
+      });
+
       it('should call dataprovider for first page', done => {
         container.dataProvider.reset();
         grid.pageSize = 100;

test/outer-scroller.html

@@ -321,9 +321,7 @@
 
         grid = fixture('scrollable-content');
 
-        if (Polymer.Element) {
-          flushColumns(grid);
-        }
+        flushGrid(grid);
 
         grid.dataProvider = infiniteDataProvider;
         Polymer.dom.flush();

test/row-details.html

@@ -117,7 +117,7 @@
 
           grid = fixture('default');
           grid.dataProvider = infiniteDataProvider;
-          Polymer.dom.flush();
+          flushGrid(grid);
           bodyRows = getRows(grid.$.items);
           animationFrameFlush(() => done());
         });

test/templates.html

@@ -312,7 +312,7 @@
           div = bind.$.div;
           grid = bind.$.grid;
           flushGrid(bind.$.grid);
-          input = grid.querySelector('input');
+          input = getBodyCellContent(grid, 0, 0).querySelector('input');
         });
 
         it('should notify items array path', () => {