dGrid click event to highlight feature in featureLayer

[TracySchloss]

I have a dGrid that is populated based on the current map extent.  I have a listener on the map for extent-change that changes the contents of the grid based on what's currently showing on the map.  The elements I'm working with are in a featureLayer.

    riverLayer = new FeatureLayer(pathName+"/arcgis/rest/services/fishAdvisoryRiver/MapServer/0",         {mode: FeatureLayer.MODE_SNAPSHOT,         id: "riverLayer",         outFields: ["*"],         infoTemplate: infoTemplate     });       app.map.addLayers([riverLayer]);      app.map.on("extent-change", function (currentMap) {       currentExtent = app.map.extent;       updateGrid();      });   function updateGrid () {      var query = new Query();      query.geometry = currentExtent;      query.outFields = ["OBJECTID", "NAME", "LABELFIELD"];      query.outSpatialReference = spatialReference;      var queryTask = new QueryTask(riverLayer.url);      queryTask.on ('error', queryErrorHandler);      queryTask.execute(query, updateGridHandler);   }   function queryErrorHandler(err) {       console.log ("error in queryTask is " + err.error);   }           function updateGridHandler (featureSet) {     var data = [];      if (grid) {         grid.refresh();      }     data = arrayUtil.map(featureSet.features, function (feature) {     return {         'id': feature.attributes.OBJECTID,         'name': feature.attributes.NAME,          'label': feature.attributes.LABELFIELD                             };        });     grid = new Grid({         renderRow: renderRowFunction,         showHeader: false         }, "grid");              grid.renderArray(data);     grid.sort('name');          grid.on('.dgrid-row:click',function(event){         var row = grid.row(event);         var featureLayer = app.map.getLayer("riverLayer");         var gridQuery = new Query();                                                   gridQuery.objectIds = [row.data.id];         featureLayer.on('error', function(err){           console.log ("error in gridClick is " + err.error);         });         featureLayer.on('selection-complete', function (results) {            if ( results.length > 0 ) {             var feature = results[0];             feature.setInfoTemplate(infoTemplate);             app.map.centerAndZoom(results[0].geometry,14);               var resultGeometry = results[0].geometry;              app.map.infoWindow.setFeatures(results);           app.map.infoWindow.show(resultGeometry);                       }        });         featureLayer.selectFeatures(gridQuery);                      }); }  function renderRowFunction (obj,options) {   var template = '<div class="title">${0}</div><div class="subtitle"><div class="details">${1}</div>';     return dojo.create("div",{        innerHTML : dojo.string.substitute(template,[obj.name,obj.label])       }); }    

The extent-change listener works great, it only lists what's on the map.  The problem is with the row click on the grid.  It doesn't do anything at all when I click.   I use this same code in another project, the only difference is the features are points, as opposed to lines. 

Originally I had the grid.on 'click' without the 'selection-complete' syntax.  I thought maybe that the querying of a line took so much longer, I was getting hung up here.  The lines do have a lot of vertices, but there's less than 50 lines in the whole layer, so it's not like it's bogging down.  I can see that the objectID is found from the data in the grid row, and it's a valid objectID. 

// ORIGINAL GRID CLICK CODE     grid.on('.dgrid-row:click',function(event){         var row = grid.row(event);         var featureLayer = app.map.getLayer("riverLayer");         var gridQuery = new Query();                                                   gridQuery.objectIds = [row.data.id];         featureLayer.selectFeatures(gridQuery, esri.layers.FeatureLayer.SELECTION_NEW, function(results) {           if ( results.length > 0 ) {             var feature = results[0];             feature.setInfoTemplate(infoTemplate);             app.map.centerAndZoom(results[0].geometry,14);               var resultGeometry = results[0].geometry;              app.map.infoWindow.setFeatures(results);          app.map.infoWindow.show(resultGeometry);                       }          });                  });

I'm at a loss why this worked just fine in my other point layer, but doesn't work with my lines.  I get no error, it just doesn't do anything.  I must have something out of sequence, I would expect to at least get an error  from my errorHandlers.

[JohnathanBarclay]

Map.centerAndZoom() only accepts point geometry. For lines use:

app.map.setExtent(results[0].geometry.getExtent(),true);

[TracySchloss]

You're absolutely right about that and I've fixed it.  Unfortunately that didn't totally take care of my problem.   Your reply made me realize I also need to look up the syntax for placing the infoWindow.  I'm going to have to figure out a point along the polyline to be the location where it's placed.  I thought I could find some examples of that very quickly, but so far I've not figured it out.

I've commented out those lines, and I see that I am getting results.   

      grid.on('.dgrid-row:click',function(event){
        var row = grid.row(event);
        var featureLayer = app.map.getLayer("riverLayer");
        var gridQuery = new Query();                                          
        gridQuery.objectIds = [row.data.id];
        featureLayer.on('error', function(err){
          console.log ("error in gridClick is " + err.error);
        });
        featureLayer.on('selection-complete', function (results) {
           if ( results.features.length > 0 ) {
            var feature = results.features[0];
            feature.setInfoTemplate(infoTemplate);
         app.map.setExtent(feature.geometry.getExtent());
 
            var resultGeometry = feature.geometry; 
       //     app.map.infoWindow.setFeatures(results);
       //   app.map.infoWindow.show(resultGeometry);            
          } 
      });
        featureLayer.selectFeatures(gridQuery);                 
    });
}

At least now I know what lines to focus on.

[JohnathanBarclay]

You could place the infoWindow on the polylines first point like so:

var point = new Point(results[0].geometry.paths[0][0],results[0].geometry.spatialReference);
app.map.infoWindow.show(point);

[TracySchloss · Accepted solution]

These are really long lines, like the Mississippi River running the whole length of the state, so the first vertex isn't going to look right.  Instead I figured out what the center vertex was and used that.  Thanks for your assistance, you got me going in the right direction.

    grid.on('.dgrid-row:click',function(event){         var row = grid.row(event);         var featureLayer = app.map.getLayer("riverLayer");                var gridQuery = new Query();                                                   gridQuery.objectIds = [row.data.id];         featureLayer.on('error', function(err){           console.log ("error in gridClick is " + err.error);         });         featureLayer.on('selection-complete', function (results) {           if ( results.features.length > 0 ) {                       var feature = results.features[0];             app.map.setExtent(feature.geometry.getExtent());             feature.setInfoTemplate(infoTemplate);                         var vertices = feature.geometry.paths[0].length;             var centerPtLoc = Number.round(vertices/2, 0); //center vertex             var centerPt = feature.geometry.getPoint(0,centerPtLoc);             app.map.infoWindow.setFeatures(results.features);             app.map.infoWindow.show(centerPt);                       }        });         featureLayer.selectFeatures(gridQuery);                      }); }