AnsweredAssumed Answered

dGrid click event to highlight feature in featureLayer

Question asked by schlot on Jan 30, 2014
Latest reply on Jan 31, 2014 by schlot
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.

Outcomes