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.

TracySchloss

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