Synchronizing map and data grid interaction?

[DavidChrest]

This great article by esri's ArcGIS JS API guru, Kelly Hutchins: Synchronizing map and data grid interaction with the ArcGIS API for JavaScript | ArcGIS Blog, explains how to:

• Hover over map graphics and highlight the associated row.
• Hover over rows in the table and highlight the associated graphic.

Using the dojox DataGrid.

I am using the dgrid/OnDemandGrid and would really love to know how to this exact thing with the dgrid.

Thank you so much.

David

[TracySchloss]

I have a hard time keeping track of the 2.  I lose track of what is getting used in the various tutorials. 

[DavidChrest · Accepted solution]

Thanks to this earlier post https://community.esri.com/thread/92368 from someone who was trying to do exactly what I was going for, I found a nice solution to syncing my dgrid and corresponding data. Code in the above post from Esri's @Johnathan Uihlein was the ticket.

I select a set of points by buffer or drawing tool, results in a dgrid, then want to click a dgrid row and see that point highlighted in my map. Here is the code that makes it work after selection.

gridMydGrid.on(".field-OBJECTID:click", selectPoint);


  function selectPoint(e) {
  // select the feature  
  var fl = map.getLayer("FLName");
  var features = fl.getSelectedFeatures();
  var symbol = fl.getSelectionSymbol();
  var id = parseInt(e.target.innerHTML);


  var selectedGraphic;
  array.forEach(features, function (feature) {
  if (feature.attributes.OBJECTID === id) {
  selectedGraphic = feature;
  }
  feature.setSymbol(symbol);
  });


  var mySymbol = new SimpleMarkerSymbol().setOutline(null).setColor("#0000FE").setSize("20");
  selectedGraphic.setSymbol(mySymbol);


  var mp1A = selectedGraphic.geometry;
  map.centerAndZoom(mp1A, 16);
  }