Adding a button to dgrid

[MichelleRogers1]

Hi all. I am trying to add a button to the dgrid so that the user sees a magnifying glass instead of the objectid, since I don't want the end-user to see the objectid. I tried adding the following code:

window.grid = new (declare([Grid, Selection]))({            
// use Infinity so that all data is available in the grid            
 bufferRows: Infinity,            
 columns: {              
  "id": {"label": "ID", "formatter": makeZoomButton},            
  "vehicleId": "Vehicle ID",              
  "velocity": { "label": "Speed (MPH)", "formatter": dojoNum.format },
  "timestamp": {"label": "Last Contact", "formatter": formatTimestamp}
 }      
}, "grid");

function makeZoomButton(e){
 zBtn = "<div data-dojo-type = 'dijit/form/Button'><img src='images/zoom.png'";
 zBtn = zBtn + "width='14' height='14'";
 zBtn = zBtn + "onClick=\"selectUnit('"+e+"')\"></div>";
 return zBtn
}

I already had this existing code for zooming to the feature:

grid.on(".field-id:click", selectUnit);

function selectUnit(e) {            
 // select the feature
 var flzoom = map.getLayer("units");
 var query = new Query();            
 query.objectIds = [parseInt(e.target.innerHTML)];            
 flzoom.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {              
  if ( result.length ) {
   point = result
   // re-center the map to the selected feature                
   window.map.centerAndZoom(result[0].geometry, 100);
   } else {                
   console.log("Feature Layer query returned no features... ", result);              
  }            
 });
}

The existing code works when the id field doesn't have a formatter, but when I insert the formatter, the grid still shows up, but when I try to click on the magnifying glass, it gives this error: SCRIPT5009: 'selectUnit' is undefined

Any help is greatly appreciated, thanks!

Michelle

[KenBuja]

Take a look at this post in GIS.StackExchange. Instead of using the formatter, it uses renderCell to put a button in a cell.

[MichelleRogers1]

Take a look at this post in GIS.StackExchange. Instead of using the formatter, it uses renderCell to put a button in a cell.

I looked at that post, and did what it said, but there is no button showing up at all.  I am new with the ArcGIS API, so any detailed help or examples on how to do this would be appreciated.

Thanks!

[KenBuja · Accepted solution]

I'm still trying to see how to make it work with a Button, but I have gotten it working with an image. I took the dgrid sample and put a image in the ID field. You can see it here. Click on the Zoom image to make it highlight the selected state.

[MichelleRogers1]

I'm still trying to see how to make it work with a Button, but I have gotten it working with an image. I took the dgrid sample and put a image in the ID field. You can see it here. Click on the Zoom image to make it highlight the selected state.

This worked, thanks so much!

[KenBuja]

And here's a version that put a button in the dGrid to zoom.