Updated demos to cover changes in size and refreshItems

demo/angular-grid.html

@@ -13,7 +13,7 @@
 <img *ng-if="selected" class="user-image" src="{{selected.user.picture.large}}">
 
 <div style="display: none">
-  <select maxlength=5 type="select" (change)="grid.clearCache(); grid.scrollToStart();">
+  <select maxlength=5 type="select" (change)="grid.refreshItems(); grid.scrollToStart();">
     <option value=''></option>
     <option value='male'>Men only</option>
     <option value='female'>Women only</option>

demo/angular2.html

@@ -110,7 +110,7 @@ <h3>Angular2 (alpha44) Integration (Function data source)</h3>
         <img *ng-if="selected" class="user-image" src="{{selected.user.picture.large}}">
 
         <div style="display: none">
-          <select maxlength=5 type="select" (change)="grid.clearCache(); grid.scrollToStart();">
+          <select maxlength=5 type="select" (change)="grid.refreshItems(); grid.scrollToStart();">
             <option value=''></option>
             <option value='male'>Men only</option>
             <option value='female'>Women only</option>

demo/datasources.html

@@ -88,10 +88,12 @@ <h3>Function Data Sources</h3>
           var data = [ [ "Project A", 10000, 0.8 ],
                        [ "Project B", 87654, 0.2 ],
                        [ "Project C", 12999, 0.6 ] ];
+
           grid.items = function(params, callback) {
-            var slice = data.slice(params.index, params.index + params.count);
-            callback(slice, data.length);
+            callback(data.slice(params.index, params.index + params.count));
           };
+          grid.size = data.length;
+
           // end-code
         });
       </code>
@@ -202,9 +204,10 @@ <h3>Asynchronous Data Sources</h3>
           // code
           grid.items = function(params, callback) {
             setTimeout(function() {
-              callback(employees.slice(params.index, params.index + params.count), employees.length);
+              callback(employees.slice(params.index, params.index + params.count));
             }, 400);
           };
+          grid.size = employees.length;
           // end-code
         });
       </code>
@@ -214,10 +217,9 @@ <h3>Asynchronous Data Sources</h3>
   <section>
     <h3>Changing the data</h3>
     <p>In case the source data changes dynamically, <code>vaadin-grid</code> must be notified with
-      <code>clearCache()</code> so it knows to fetch the correct data.
-    <p>Whenever new rows are added or existing ones are removed, new data size (row count) can
-    be passed as the first method parameter to optimize rendering. <code>vaadin-grid</code> assumes the data size
-    unchanged if no arguments are provided.</p>
+    <code>refreshItems()</code> so it knows to fetch updates for the currently cached data.</p>
+    <p>Whenever new rows are added to or existing ones are removed from the end of the data set,
+    <code>refreshItems()</code> can be skipped and <code>grid.size</code> property updated instead.</p>
     <code-example source>
       <vaadin-grid demo hidden>
         <table>
@@ -260,21 +262,90 @@ <h3>Changing the data</h3>
           // Clicking the button changes the data
           addButton('Remove the first row', function() {
             data.splice(0, 1);
-            // Inform <code>vaadin-grid</code> of the changed data
-            grid.clearCache(data.length);
+            // Data size was reduced so size property needs an update
+            grid.size = data.length;
+            // We also need to clear the cached data set as data was removed from the
+            // beginning of the list (causing the remaining rows to shift upwards)
+            grid.refreshItems();
           });
           // end-code
         });
       </code>
     </code-example>
   </section>
 
+  <section>
+    <h3>Changing data source size dynamically</h3>
+    <p>Aside the explicit <code>size</code> property, <code>vaadin-grid</code> can be informed
+    about the data source size trough a callback parameter in data source request. This comes in handy when
+    the size changes frequently or if the total size isn't even known beforehand.</p>
+
+    <p>Infinite scrolling is an example use case where this api might be useful.</p>
+
+    <code-example source>
+      <vaadin-grid demo hidden selection-mode="disabled">
+        <table>
+          <colgroup>
+            <col name="user.name.first">
+            <col name="user.name.last">
+            <col name="user.email" flex>
+          </colgroup>
+          <thead>
+            <tr>
+              <th>First Name</th>
+              <th>Last Name</th>
+              <th>Email</th>
+            </tr>
+          </thead>
+          <tfoot>
+            <tr>
+              <td colspan="2"><td>
+            </tr>
+          </tfoot>
+        </table>
+      </vaadin-grid>
+      <code demo-var="grid">
+        var grid = grid || document.querySelector("vaadin-grid");
+
+        HTMLImports.whenReady(function() {
+          grid.size = 10;
+          grid.scrollToStart();
+          // code
+          grid.items = function(params, callback) {
+            // Fetch the JSON data from a URL
+            var xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function() {
+              if (xhr.readyState == XMLHttpRequest.DONE) {
+                if (xhr.status == 200) {
+                  var json = JSON.parse(xhr.responseText);
+                  var size = grid.size;
+                  if (params.index + params.count == size) {
+                    // Requested for the final batch of data, increase the size
+                    size += 10;
+                  }
+                  callback(json.results, size);
+                  // Update footer label
+                  grid.footer.getCell(0, 0).content = "Current size: " + size;
+                }
+              }
+            }
+            var rowsNeeded = Math.max(params.count, 1);
+            xhr.open("GET", randomUserUrl + "?results=" + rowsNeeded, true);
+            xhr.send();
+          };
+          // end-code
+        });
+      </code>
+    </code-example>
+  </section>
+
   <section>
     <h3>Remote data source</h3>
     <p>Data fetched dynamically from a remote source may be hooked to <code>vaadin-grid</code> with a custom data source
     implementation.</p>
+    <p>Notice that <code>size</code> is declared as an attribute in this example.</p>
     <code-example source>
-      <vaadin-grid demo selection-mode="multi">
+      <vaadin-grid demo selection-mode="multi" size="1000">
         <table>
           <colgroup>
             <col name="index" width="60">
@@ -299,15 +370,14 @@ <h3>Remote data source</h3>
 
         HTMLImports.whenReady(function() {
           // code
-          var itemCount = 1000;
           grid.items = function(params, callback) {
             // Fetch the JSON data from a URL
             var xhr = new XMLHttpRequest();
             xhr.onreadystatechange = function() {
               if (xhr.readyState == XMLHttpRequest.DONE) {
                 if (xhr.status == 200) {
                   var json = JSON.parse(xhr.responseText);
-                  callback(json.results, itemCount);
+                  callback(json.results);
                 }
               }
             }
@@ -335,6 +405,7 @@ <h3>Remote data source</h3>
     </code-example>
   </section>
 
+
 </body>
 
 </html>

demo/details.html

@@ -116,15 +116,15 @@ <h3>Row details</h3>
         var grid = grid || document.querySelector("vaadin-grid");
 
         HTMLImports.whenReady(function() {
-          var dataSourceSize = 1000;
+          grid.size = 1000;
           grid.items = function(params, callback) {
             // Fetch the JSON data from a URL
             var xhr = new XMLHttpRequest();
             xhr.onreadystatechange = function() {
               if (xhr.readyState == XMLHttpRequest.DONE) {
                 if (xhr.status == 200) {
                   var json = JSON.parse(xhr.responseText);
-                  callback(json.results, dataSourceSize);
+                  callback(json.results);
                 }
               }
             }

demo/headers.html

@@ -203,7 +203,7 @@ <h3>Cell content</h3>
         var timer = 0;
         function filter(){
           clearTimeout(timer);
-          timer = setTimeout(function() { grid.clearCache() }, 500);
+          timer = setTimeout(grid.refreshItems.bind(grid), 500);
         }
 
         filterElement.addEventListener("keyup", filter);
@@ -214,7 +214,7 @@ <h3>Cell content</h3>
             var filterValue = filterElement.value.toLowerCase();
             var data = employees.filter(function(val){ return (val.toString().toLowerCase()).indexOf(filterValue) != -1 } );
             var slice = data.slice(params.index, params.index + params.count);
-            callback(slice, data.length == 0 ? 1 : data.length);
+            callback(slice, data.length);
           };
 
           grid.then(function(){

demo/polymer.html

@@ -108,7 +108,7 @@ <h3>Polymer Integration (Function data source)</h3>
     <code-example source>
       <div>
         <template is="dom-bind" class="my-grid-with-ds" demo>
-          <vaadin-grid id="my-grid-with-ds" items="[[items]]" on-selected-items-changed="onSelect">
+          <vaadin-grid id="my-grid-with-ds" items="[[items]]" size="[[size]]" on-selected-items-changed="onSelect">
             <table>
               <colgroup>
                 <col name="user.picture.thumbnail" width="100">
@@ -131,13 +131,24 @@ <h3>Polymer Integration (Function data source)</h3>
           var template = template || document.querySelector('template.my-grid-with-ds');
           var grid = document.querySelector('#my-grid-with-ds');
 
+          template.onSelect = function() {
+            if(grid.selection.selected().length === 0) {
+              template.selected = null;
+            } else {
+              grid.getItem([grid.selection.selected()], function(err, item) {
+                template.selected = item;
+              });
+            }
+          };
+
+          template.size = 100;
           template.items = function(params, callback) {
             var xhr = new XMLHttpRequest();
 
             xhr.onreadystatechange = function() {
               if (xhr.readyState == XMLHttpRequest.DONE ) {
                 if(xhr.status == 200) {
-                  callback(JSON.parse(xhr.responseText).results, 100);
+                  callback(JSON.parse(xhr.responseText).results);
                 }
               }
             };

demo/react.html

@@ -57,6 +57,7 @@ <h3>React Integration (function data source)</h3>
                 if (vGrid.selection) {
                   // Assign the data source
                   vGrid.items = _this.items;
+                  vGrid.size = 1000;
 
                   // Bind selection listener
                   vGrid.addEventListener("selected-items-changed", _this.onRowSelect);
@@ -84,7 +85,7 @@ <h3>React Integration (function data source)</h3>
               xhr.onreadystatechange = function() {
                 if (xhr.readyState == XMLHttpRequest.DONE ) {
                   if(xhr.status == 200){
-                    callback(JSON.parse(xhr.responseText).results, 1000);
+                    callback(JSON.parse(xhr.responseText).results);
                   }
                 }
               };