Synchronizing map and data grid interaction?

DavidChrest · ‎10-01-2015

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

DavidChrest · ‎10-27-2015

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);
  }

View solution in original post

KenBuja · ‎10-01-2015

There's a sample that shows how to do some of this: dgrid | ArcGIS API for JavaScript

It doesn't include highlighting a feature when you mouse over the grid, but that's easy to add. The dGrid has mouse utilities you can use to control what happens when you mouse over or out of a header, cell, or row.

TracySchloss · ‎10-01-2015

I have had some problems with getting the row to highlight in the grid. Depending on the number of records you have, you may or may not be able to scroll to or highlight the corresponding row. It has to do with the fact that all the data isn't truly pushed to the display until you use the scrollbar to see additional records in your grid.

DavidChrest · ‎10-06-2015

Yes, I found that example but it is very simplified and does not work in my situation.

Here is what I do: I draw a polygon around FeatureLayer points, they get selected, their symbol changes (they are not graphics), and records appear in my dGrid. Now I want to click a record in my dGrid table and have that corresponding point highlighted. Can't seem to find how to do this.

TracySchloss · ‎10-05-2015

Here is an example of what I'm talking about. The grid in the sidebar is tied to the map extent. When the map is zoomed out, the grid isn't able to find the element in the list. If you zoom in tighter, then the element is found and the grid scrolls to it. I haven't found a workaround for that yet.

JS Bin - Collaborative JavaScript Debugging

KenBuja · ‎10-05-2015

Tracy, have you look at incorporating this into your script? Rendering All Store Data at Once - dgrid Tutorial

TracySchloss · ‎10-05-2015

I did, but I'll look at it again. I tried several things at the time I first wrote this sample and nothing worked well once I had a larger data set. It does specifically say it doesn't work for a large data set (whatever 'large' is). This data set has a few hundred records, so it's not crazy huge. I'm using OnDemandGrid, not dGrid, so I'm not sure this example works the same way.

KenBuja · ‎10-05-2015

Use of the OnDemandGrid is why it doesn't load all the data at once.

OnDemandList extends List to provide on-demand lazy loading of data as the user scrolls through the list. (OnDemandGrid is simply the composition of Grid and OnDemandList)

DavidChrest · ‎10-14-2015

All the data gets loaded in you include idProperty: "OBJECTID" in the code below.

//Pass the data to the grid
  var memStoreTS = new Memory({
  data: dataTS,
  idProperty: "OBJECTID"
  });
  gridStations.set("store", memStoreTS);

TracySchloss · ‎10-14-2015

I believe if you had a field called "id", you wouldn't have to specify an idProperty, it would find it by default. Since we typically have OBJECTID as the unique ID number, it has to be explicitly defined as the idProperty.