nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

dgrid refresh

MichelleRogers1

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

Najděte více příspěvků označených jako

Accepted answers

BenFousek

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.

All comments

MichelleRogers1

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?

Nevermind on the sorting, I just figured it out. I am perplexed as to why the feature layer quits refreshing when I zoom to it though.

MichelleRogers1

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?

BenFousek

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.

MichelleRogers1

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

BenFousek

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.

BenFousek

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.

MichelleRogers1

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/

MichelleRogers1

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

BenFousek

I looked at a couple of my grids and I simply create a new store and set it.

BenFousek

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.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.