Firing an infoWindow from a data grid list

3620
16
09-11-2012 08:40 AM
MartynSmith
New Contributor
I'm trying to duplicate the functionality you see when click a graphic on the map opening up an infoWindow anchored at a graphic.

For example, a set of points are displayed on the map and an infoWindow has been configured for these and works correctly when a point on the map is clicked.  But I'm also displaying a text list of the names of these same points in a dojo datagrid in a left pane.  I'd like to fire up the same infoWindow action when a user clicks a row in the data grid corresponding to a point.

I've looked in the API reference, and I see there is an infoWindow.show() , but that would require re-creating the popups that are already tied to the graphics layer, which is NOT what I want to do.

I'm looking for a method that triggers the same action as clicking a point on the map. Seems like it should be something simple that I am missing.

Thanks for any help!
0 Kudos
16 Replies
KeithGanzenmuller
Occasional Contributor II
Hey Martyn, you have any luck solving this issue?
0 Kudos
SteveCole
Frequent Contributor
Being the weekend, I don't have my code in front of me but in one of the apps I've been developing, I've added a dojo.connect listener event tied to the row click event of a dataGrid I have in my app (it zooms to the extent of the feature listed in the dataGrid). I suppose you get get the FID of the feature, query it using queryTask, and then manually trigger the infoWindow, passing the feature returned by the queryTask to the infoWindow.

I'm just thinking out loud, though. 😄
0 Kudos
PramodHarithsa1
Occasional Contributor II
I have done similar stuff in my app.

on click of Grid you can call the function which fires on click with few modifications.
function onRowClickHandler(evt) {
              var ClickedId = grid.getItem(evt.rowIndex).ASSETID;
              var selectedId=0;
              //var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
              dojo.forEach(advancedMapObj._layers.SearchResultLayer.graphics, function (graphic) {
                  if ((graphic.attributes) && graphic.attributes.ASSETID === ClickedId) {
                      selectedId = graphic;
                      return;
                  }
              });
              if(selectedId)
               {
              var selectedExtent = selectedId.geometry.getExtent();
              //selectedId.setSymbol(symbol);
              //map.graphics.add(selectedId);
              map.setExtent(selectedExtent);
//I wrote this part of code so as to get a point on the polyline i was interested in
 var length = graphic.geometry.paths[0].length;
                   if (length % 2 != 0)
                       length = length - 1;
                   var pointxy = graphic.geometry.paths[0][(length / 2)];
                  Infopoint = new esri.geometry.Point(pointxy[0], pointxy[1], new esri.SpatialReference({ wkid: 102100 }));
//and after setting the info template
map.infoWindow.show(Infopoint,basicMapObj.getInfoWindowAnchor(Infopoint));

               }
              else
               {
               alert("Assets not mapped properly");
               }
               

          }
                   
0 Kudos
SteveCole
Frequent Contributor
Just to add to Pramod's code, you just need to add a dojo.connect() listener in your map's init() function similar to this:

 // Listener event to retrieve the recordID of the record in the datagrid that the user clicked on
 dojo.connect(dijit.byId("grid"), 'onRowClick', function(e) {
  var rowdata = grid.getItem(e.rowIndex);
  var theId = rowdata.OBJECTID;

  theFeatureLayer.clearSelection();
  var query = new esri.tasks.Query();
  query.objectIds = [theId];
  theFeatureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,onRowClickHandler);
 });
0 Kudos
PramodHarithsa1
Occasional Contributor II
I had a strange behaviour of popup in my app for a similar kind of approach.
On click of grid the popup appears for the first time and when i click on next grid it only zooms to that level but without popup.
a click again on the same grid, gets the popup back or even the zoom out of map helps. Not sure why this stuff happens!

Trying to replicate the same, couldn't find much luck
Here's the fiddle.
search for Owner name Katz

to see such a behaviour first click on row
192717701 Sidney F Katz Null 1966 1379 Stuyvessant Rd and then on
190745300 Samuel Katz   Null 1982 3377 Indian Summer Dr


Not sure why this happens with only these two pairs but i have this prob with every row in my app.

Whats making this happen?
0 Kudos
DerekMiller
New Contributor III
I had a strange behaviour of popup in my app for a similar kind of approach.
On click of grid the popup appears for the first time and when i click on next grid it only zooms to that level but without popup.
a click again on the same grid, gets the popup back or even the zoom out of map helps. Not sure why this stuff happens!

Trying to replicate the same, couldn't find much luck
Here's the fiddle.
search for Owner name Katz

to see such a behaviour first click on row
192717701 Sidney F Katz Null 1966 1379 Stuyvessant Rd and then on
190745300 Samuel Katz   Null 1982 3377 Indian Summer Dr


Not sure why this happens with only these two pairs but i have this prob with every row in my app.

Whats making this happen?


Ever find a solution to this, Pramod? I'm experiencing very similar behavior, and would like to sort it out, clearly. Also having issues selecting the grid when a user clicks a feature on the map, but that's an issue for a separate post.

You can view what's going on in my app here: map

Hopefully we can get them both to function properly!

Thanks.

- D
0 Kudos
GordonBooth
New Contributor III
Pramod and Derek: I too I'm having similar problems - with On click of a row in the datagrid the popup appears for the first time perfectly placed to the right and centered. (Note: If at this point I zoom in/out and then click another row in the datagrid it will work perfectly again.) However if I don't change the zoom level and I click another row in the datagrid it zooms to that level but popup is only partially in the view. I've attached my code and some screen shots. One of the problems I had earlier was the zoom. I'm using base maps and map layers all projected in Web Mercator (102100) and I'm zooming to a point. If you're doing this you need to set extent by adding to & subtracting from the point geometry.
I'd welcome some help - thanks.

 //Select an offender in the data grid
        function onRowClickHandler(evt) {
            var clickedOffender = grid.getItem(evt.rowIndex).OBJECTID;
            var selectedAddress;
            for (var i = 0, il = map.graphics.graphics.length; i < il; i++) {
                var currentGraphic = map.graphics.graphics;
                //assign selection to a graphic
                if (currentGraphic.attributes.OBJECTID == clickedOffender) {
                    selectedAddress = currentGraphic;
                    break;
                }
            }

            //automatically show popup
            map.infoWindow.setContent(selectedAddress.getContent());
            map.infoWindow.setTitle(selectedAddress.getTitle());
            map.infoWindow.show(selectedAddress.geometry, new esri.SpatialReference({ wkid: 102100 }));
            //set the point extent and spatial reference, to zoom in
            //requires a value (250 or 500 work well) for adding or subtracting from xmax,xmin,ymax,ymin
            var factor = 250;
            extent = new esri.geometry.Extent(
            selectedAddress.geometry.x - factor,
            selectedAddress.geometry.y - factor,
            selectedAddress.geometry.x + factor,
            selectedAddress.geometry.y + factor,
            new esri.SpatialReference({ wkid: 102100 }));
            map.setExtent(extent);
        }


        dojo.addOnLoad(init);
  
 
0 Kudos
DerekMiller
New Contributor III
Pramod and Derek: I too I'm having similar problems - with On click of a row in the datagrid the popup appears for the first time perfectly placed to the right and centered. (Note: If at this point I zoom in/out and then click another row in the datagrid it will work perfectly again.) However if I don't change the zoom level and I click another row in the datagrid it zooms to that level but popup is only partially in the view. I've attached my code and some screen shots. One of the problems I had earlier was the zoom. I'm using base maps and map layers all projected in Web Mercator (102100) and I'm zooming to a point. If you're doing this you need to set extent by adding to & subtracting from the point geometry.
I'd welcome some help - thanks.


I've had similar issues with popups in the past when embedding applications in an existing page. I found this bug notice while looking into the issue. Not sure if this might have anything to do with your issues:

http://forums.arcgis.com/threads/55515-Popup-is-not-displayed-correctly-when-map-is-absolute-positio...

Thoughts?

Hope you can get it figured out. Happy to help if I can.

- d
0 Kudos
GordonBooth
New Contributor III
Derek:
I do have it working. My work around was to create a counter and determine if it was even or odd. Depending on the result the factor added/subtracted from the extent alternates between two values. It's not very pretty so maybe someone out there can suggest some changes to make it a little more elegant. Thanks for your help.

//row click counter
            x = x + 1;
            //known bug in popup window, my workaround is to alternate the factor variable
            var factor;
            if (x % 2 === 0) {
                factor = 1000
            }
            else {
                factor = 1500
            }

            //set the point extent and spatial reference, to center & zoom in
            //factor must be no greater than 1500 so clusters are singles
             extent = new esri.geometry.Extent(
             selectedAddress.x - factor,
             selectedAddress.y - factor,
             selectedAddress.x + factor,
             selectedAddress.y + factor,
             new esri.SpatialReference({ wkid: 102100 }));
            map.setExtent(extent);
0 Kudos