title: How to update paginated dgrid periodically
body: <p>I am trying to display and refresh periodically some server data using dgrid and derivative of Request dstore. The data are paginated and needs to be updated periodically. As a first naive approach I tried to call Dgrid.refresh() with setInterval. However, that results in complete rebuilding of grid rows which visually creates flickering effect. Using Trackable to the store does not help. Can anyone advise me how to refresh rows in the dgrid which would only update changed rows?</p>
  
  <p>Here is my code reproducing the issue:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;DGrid flickering on slow updates&lt;/title&gt;
          &lt;style&gt;
              @import "./dojo-release-1.11.1/dojo/resources/dojo.css";
              @import "./dojo-release-1.11.1/dijit/themes/claro/claro.css";
              @import "./META-INF/resources/webjars/dgrid/1.0.0/css/dgrid.css";
              @import "./META-INF/resources/webjars/dgrid/1.0.0/css/skins/claro.css";
  
              html, body {
                  padding: 10px;
                  width: 100%;
                  height: 100%;
              }
          &lt;/style&gt;
          &lt;script&gt;
              var dojoConfig = {
              async:true,
              baseUrl: "./",
              packages:[
                         { name:"dojo", location:"dojo-release-1.11.1/dojo" },
                         { name:"dijit", location:"dojo-release-1.11.1/dijit" },
                         { name:"dgrid", location:"META-INF/resources/webjars/dgrid/1.0.0" },
                         { name:"dstore", location:"META-INF/resources/webjars/dstore/1.1.1" }
                       ]
              };
          &lt;/script&gt;
          &lt;script src="dojo-release-1.11.1/dojo/dojo.js"&gt;&lt;/script&gt;
          &lt;script&gt;
      require(["dojo/parser",
           "dojo/dom",
           "dojo/_base/declare",
           "dstore/Store",
           "dstore/Trackable",
           "dstore/Cache",
           "dstore/Memory",
           "dstore/QueryResults",
           "dojo/Deferred",
           "dgrid/Grid",
           "dgrid/Keyboard",
           "dgrid/Selection",
           "dgrid/extensions/Pagination",
           "dojo/domReady!"],
          function(parser, dom, declare, Store, Trackable, Cache, Memory, QueryResults, Deferred, Grid, Keyboard, Selection, Pagination)
          {
              parser.parse();
              console.log("Parsed");
              var makeSlowRequest =   
                  function(kwArgs)
                  {
                      var responseDeferred = new Deferred();
                      var responsePromise = responseDeferred.promise;
                      // resolve promise in 2 seconds to simulate slow network connection
                      setTimeout(function () 
                                 {
                                      console.log("Generating response");
                                      var data = {items: [], total: 100};
                                      kwArgs = kwArgs || {start:0, end:100};
                                      for(var i = kwArgs.start; i &lt; kwArgs.end; i++)
                                      {
                                           data.items.push({id: "id-" + i,
                                                            name: "test-" + i, 
                                                            value: Math.floor((Math.random() * 10) + kwArgs.start)
                                                           });
                                      }
                                      responseDeferred.resolve(data);
                                  }, 2000);
                       return new QueryResults(responsePromise.then(function (data) { return data.items; }),
                                               { totalLength: responsePromise.then(function (data) { return data.total;}) });
  
                  };
  
              var SlowStore = declare("SlowStore",
                                      [Store, Trackable], 
                                      { fetch: function (kwArgs) { return makeSlowRequest(kwArgs); },
                                        fetchRange: function (kwArgs) { return makeSlowRequest(kwArgs); }
                                      });
  
  
              var store = new SlowStore();
              var TestGrid = declare([Grid, Keyboard, Selection, Pagination]);
              var grid =  new TestGrid({
                                          collection: store,
                                          columns: {name: "Name", value: "Value"},
                                          rowsPerPage: 10,
                                          selectionMode: 'single',
                                          cellNavigation: false,
                                          className: 'dgrid-autoheight',
                                          pageSizeOptions: [10, 20],
                                          adjustLastColumn: true
                                      }, dom.byId("grid"));
  
              grid.startup();
  
  
              // update grid every 5 seconds
              var timer = setInterval(function(){console.log("Refreshing grid"); grid.refresh();}, 5000);
  
          });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body class="claro"&gt;
          &lt;div id="grid"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am guessing that instead of calling refresh I need get the request range from the dgrid (possibly using aspect on gotoPage) and call store.fetchRange(), iterate over the results, compare each item with previous results and invoke store.update or store.add or store.delete. I suppose that would give me what I want but before taking this approach I wondering if there is an easier way to refresh dgrid with updated data. Using Cache store does not work as it expects to fetch all the data from the server:</p>
  
  <pre><code>var store = Cache.create(new SlowStore(), {
                cachingStore: new (Memory.createSubclass(Trackable))()
              });
  </code></pre>