Select to view content in your preferred language

dgrid refresh

5613
10
Jump to solution
02-12-2014 07:47 AM
MichelleRogers1
Occasional Contributor
I am working with a feature layer that refreshes every 5 seconds.  I would like my dgrid to refresh also, so it is giving the most up-to-date information.  I have tried inserting the code: grid.refresh(0.083); in many places throughout my code, but the grid is not updating at all.  I am using a memory store, could this have something to do with why my grid won't refresh?  The code I am using to populate the grid is as follows:

function populateGrid(Memory) {             [INDENT]var qt = new QueryTask(window.unitsUrl);             var query = new Query();            [/INDENT]  query.where = "1=1";              query.returnGeometry = false;              query.outFields = window.outFields;              qt.execute(query, function(results) {   var data = [];   var data = array.map(results.features, function(feature) {                    return {                       // property names used here match those used when creating the dgrid                       "id": feature.attributes[window.outFields[0]],                       "vehicleId": feature.attributes[window.outFields[1]],                       "velocity": feature.attributes[window.outFields[2]],     "timestamp": feature.attributes[window.outFields[3]]    }                 });   //if (!grid) {    //grid = new Grid({     //columns: {      //"id": "ID",                    //"vehicleId": "Vehicle ID",                    //"velocity": { "label": "Speed (MPH)", "formatter": dojoNum.format },      //"timestamp": "Time Stamp"     //}    //}, "grid");   //}   //grid.refresh(0.083);               var memStore = new Memory({ data: data });                 window.grid.set("store", memStore);  }); }


Also, the code where I am calling that function is as follows:

map.on("load", function( evt ){              // show the border container now that the dijits               // are rendered and the map has loaded              domStyle.set(registry.byId("container").domNode, "visibility", "visible");              populateGrid(Memory); // pass a reference to the MemoryStore constructor         });


Any help in getting this to refresh is greatly appreciated.

Michelle
0 Kudos
1 Solution

Accepted Solutions
BenFousek
Deactivated User
Try this. Comment out the 'populateGrid' function, just listen for 'update-end', and use the layers graphics to get attribute data.

fl.on('update-end', function (r) {   console.log(r); //just a check to see that the event fired    var data = [];   //use the layers graphics instead of making another request   var data = array.map(fl.graphics, function (feature) {     return {       //property names used here match those used when creating the dgrid       "id": feature.attributes[window.outFields[0]],       "vehicleId": feature.attributes[window.outFields[1]],       "velocity": feature.attributes[window.outFields[2]],       "timestamp": feature.attributes[window.outFields[3]]     }   });   var memStore = new Memory({     data: data   });   window.grid.set("store", memStore); });


I'm not positive, but 'update-end' should fire when the layer updates due to its updateInterval being set.

View solution in original post

0 Kudos
10 Replies
BenFousek
Deactivated User
When your new data is returned, create a new store and set the grid's store to the new store.

Or just reuse your store and reset its data. As I recall this should update the grid.
0 Kudos
BenFousek
Deactivated User
I looked at a couple of my grids and I simply create a new store and set it.
0 Kudos
MichelleRogers1
Occasional Contributor
I looked at a couple of my grids and I simply create a new store and set it.


Ben, I am using the GeoEvent Processor to bring data into a Feature Service, so everything continuously updates.  How would I go about setting a new store in this instance?

Michelle
0 Kudos
MichelleRogers1
Occasional Contributor
I created a jsfiddle so that you can see my entire code.  The result window is showing nothing, but it does work when I have it on my screen.

Here is the jsfiddle link:
http://jsfiddle.net/mrogers83/EHk78/
0 Kudos
BenFousek
Deactivated User
The gird is independent of the layer updating. You need to use an event to listen for the update of the feature layer and update the grid. Not knowing exactly how your app is setup, but assuming your layer is called "layer":

layer.on('update', function () {
  var qt = new QueryTask(window.unitsUrl);
  var query = new Query();
  query.where = "1=1";
  query.returnGeometry = false;
  query.outFields = window.outFields;
  qt.execute(query, function (results) {
    var data = [];
    var data = array.map(results.features, function (feature) {
      return {
        // property names used here match those used when creating the dgrid                  
        "id": feature.attributes[window.outFields[0]],
        "vehicleId": feature.attributes[window.outFields[1]],
        "velocity": feature.attributes[window.outFields[2]],
        "timestamp": feature.attributes[window.outFields[3]]
      }
    });
  });
  window.grid.setStore(new Memory({
    data: data
  }));
});


Just a simple example, but hopefully gets you going in the right direction.
0 Kudos
BenFousek
Deactivated User
Okay the fiddle helps:
function populateGrid(Memory) {
  //populate grid code here

  //now listen for the feature layer update
  fl.on('update', function () {
    var qt = new QueryTask(window.unitsUrl);
    var query = new Query();
    query.where = "1=1";
    query.returnGeometry = false;
    query.outFields = window.outFields;
    qt.execute(query, function (results) {
      var data = [];
      var data = array.map(results.features, function (feature) {
        return {
          // property names used here match those used when creating the dgrid                  
          "id": feature.attributes[window.outFields[0]],
          "vehicleId": feature.attributes[window.outFields[1]],
          "velocity": feature.attributes[window.outFields[2]],
          "timestamp": feature.attributes[window.outFields[3]]
        }
      });
    });
    window.grid.setStore(new Memory({
      data: data
    }));
  });
}


Something else you might look into is the feature layer's 'update-end' event and use the features of the feature layer directly to avoid extra requests to the server.
0 Kudos
MichelleRogers1
Occasional Contributor
Okay the fiddle helps:
function populateGrid(Memory) {
  //populate grid code here

  //now listen for the feature layer update
  fl.on('update', function () {
    var qt = new QueryTask(window.unitsUrl);
    var query = new Query();
    query.where = "1=1";
    query.returnGeometry = false;
    query.outFields = window.outFields;
    qt.execute(query, function (results) {
      var data = [];
      var data = array.map(results.features, function (feature) {
        return {
          // property names used here match those used when creating the dgrid                  
          "id": feature.attributes[window.outFields[0]],
          "vehicleId": feature.attributes[window.outFields[1]],
          "velocity": feature.attributes[window.outFields[2]],
          "timestamp": feature.attributes[window.outFields[3]]
        }
      });
    });
    window.grid.setStore(new Memory({
      data: data
    }));
  });
}


Something else you might look into is the feature layer's 'update-end' event and use the features of the feature layer directly to avoid extra requests to the server.



I tried what you suggested, and the grid is still not updating.  Here is the code:
function populateGrid(Memory) {
 //populate grid code here
 var qt = new QueryTask(window.unitsUrl);            
 var query = new Query();            
 query.where = "1=1";            
 query.returnGeometry = false;            
 query.outFields = window.outFields;            
 qt.execute(query, function(results) {
  var data = [];
  var data = array.map(results.features, function(feature) {                
   return {                  
    // property names used here match those used when creating the dgrid                  
    "id": feature.attributes[window.outFields[0]],                  
    "vehicleId": feature.attributes[window.outFields[1]],                  
    "velocity": feature.attributes[window.outFields[2]],
    "timestamp": feature.attributes[window.outFields[3]]
   }              
  });
           
  var memStore = new Memory({ data: data });              
  window.grid.set("store", memStore);
 });
       
 //now listen for the feature layer update
 fl.on('update', function(){
  var qt = new QueryTask(window.unitsUrl);
  var query = new Query();
  query.where = "1=1";
  query.returnGeometry = false;
  query.outFields = window.outFields;
  qt.execute(query, function(results) {
   var data = [];
   var data = array.map(results.features, function(feature) {
    return {
     //property names used here match those used when creating the dgrid
     "id": feature.attributes[window.outFields[0]],                  
     "vehicleId": feature.attributes[window.outFields[1]],                  
     "velocity": feature.attributes[window.outFields[2]],
     "timestamp": feature.attributes[window.outFields[3]]
    }
   });
  });
  var memStore = new Memory({ data: data });              
  window.grid.set("store", memStore);
 });
}


I have been battling with this refresh issue for about a week now, and can't seem to make anything work.  I am fairly new to coding, and very new to esri coding, so any help given is very much appreciated.

Michelle
0 Kudos
BenFousek
Deactivated User
Try this. Comment out the 'populateGrid' function, just listen for 'update-end', and use the layers graphics to get attribute data.

fl.on('update-end', function (r) {   console.log(r); //just a check to see that the event fired    var data = [];   //use the layers graphics instead of making another request   var data = array.map(fl.graphics, function (feature) {     return {       //property names used here match those used when creating the dgrid       "id": feature.attributes[window.outFields[0]],       "vehicleId": feature.attributes[window.outFields[1]],       "velocity": feature.attributes[window.outFields[2]],       "timestamp": feature.attributes[window.outFields[3]]     }   });   var memStore = new Memory({     data: data   });   window.grid.set("store", memStore); });


I'm not positive, but 'update-end' should fire when the layer updates due to its updateInterval being set.
0 Kudos
MichelleRogers1
Occasional Contributor
Try this. Comment out the 'populateGrid' function, just listen for 'update-end', and use the layers graphics to get attribute data.

fl.on('update-end', function (r) {
  console.log(r); //just a check to see that the event fired

  var data = [];
  //use the layers graphics instead of making another request
  var data = array.map(fl.graphics, function (feature) {
    return {
      //property names used here match those used when creating the dgrid
      "id": feature.attributes[window.outFields[0]],
      "vehicleId": feature.attributes[window.outFields[1]],
      "velocity": feature.attributes[window.outFields[2]],
      "timestamp": feature.attributes[window.outFields[3]]
    }
  });
  var memStore = new Memory({
    data: data
  });
  window.grid.set("store", memStore);
});


I'm not positive, but 'update-end' should fire when the layer updates due to its updateInterval being set.


That was the ticket!  My grid is finally refreshing, thanks!  I did end up having to still call the request because when I zoomed in to one point, the grid only had the one point in it.  By making another request with the Query and QueryTask, I was able to zoom, but still have all vehicles on the list.

Do you know if there's a way to sort the grid on one field?
Also, when I zoom, the feature layer stops refreshing, but the grid still does.  Is there something in my code that is causing the feature layer to stop refreshing when it zooms?
0 Kudos