topic Re: Adding a button to dgrid in ArcGIS JavaScript Maps SDK Questions

Adding a button to dgrid

MichelleRogers1 — Sun, 12 Dec 2021 16:21:34 GMT

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

Re: Adding a button to dgrid

KenBuja — Tue, 18 Feb 2014 15:29:37 GMT

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

Re: Adding a button to dgrid

MichelleRogers1 — Tue, 18 Feb 2014 15:57:47 GMT

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!

Re: Adding a button to dgrid

KenBuja — Tue, 18 Feb 2014 17:24:59 GMT

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.

Re: Adding a button to dgrid

MichelleRogers1 — Tue, 18 Feb 2014 17:53:14 GMT

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!

Re: Adding a button to dgrid

KenBuja — Tue, 18 Feb 2014 18:40:15 GMT

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