AnsweredAssumed Answered

DataGrid with zoom button...button doesn't show and won't zoom

Question asked by mrogers83 on Jan 30, 2014
Latest reply on Feb 5, 2014 by mrogers83
I am new at working with ArcGIS API for JavaScript and have come across the following problem:

I am working with the sample DataGrid with zoom button to get my data to zoom to a specific point, but not only is the data not zooming, the button isn't even showing inside the grid.  Instead it is showing the OBJECTID.  Any suggestions on how to fix this?

Here is part of the  JavaScript code I am working with:

policeUnits2 = new esri.layers.FeatureLayer
("http://GIS10204:6080/arcgis/rest/services/GeoEvent/gx440P/MapServer/0",{
mode:esri.layers.FeatureLayer.MODE_SELECTION,
outFields:["VehicleId", "Velocity", "OBJECTID"]
});
  
//define a selection symbol
var highlightSymbol = new esri.symbol.SimpleFillSymbol().setColor( new dojo.Color([50,205,50,.25]));
policeUnits2.setSelectionSymbol(highlightSymbol);

dojo.connect(policeUnits2,'onLoad',function(layer){
var query = new esri.tasks.Query();
query.where = "1=1";
layer.queryFeatures(query,function(featureSet){
  var items = dojo.map(featureSet.features,function(feature){
   return feature.attributes;
  });
  var data = {
   identifier:"OBJECTID",
   items:items};
  store = new dojo.data.ItemFileReadStore({data:data});
  grid.setStore(store);
  grid.setSortIndex(1,"true"); //sort on VehicleId
});
});
map.addLayer([policeUnits2]);

//modify the grid so only the VehicleId field is sortable
grid.canSort = function(col){ if(Math.abs(col) == 2) { return true; } else { return false; } };
  
function makeZoomButton(id){
var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png'";
zBtn = zBtn + " width='18' height='18'";
zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
return zBtn;
}
function zoomRow(id){
policeUnits2.clearSelection();
var query = new esri.tasks.Query();
query.objectIds = [id];
policeUnits2.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){
  //zoom to the selected feature
  var unitExtent = features[0].geometry.getExtent().expand(1.0);
  map.setExtent(unitExtent);
});
}


This is the html code:
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%">
  <div data-dojo-type="dijit/layout/ContentPane"  id="header" data-dojo-props="region:'top'">City of Naples Police AVL
   <div id="locateContainer">
    <label>Address: </label>
    <input id='addressInput'></input>
   </div>
  </div>
  <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
   <div id="BasemapToggle" ></div>
   <div id="HomeButton"></div>
  </div>
  <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" data-dojo-props="region:'leading'">
   <table data-dojo-type="dojox/grid/DataGrid" jsid="grid" id="grid" selectionMode="none">
    <thead>
     <tr>
      <th field="OBJECTID" formatter="makeZoomButton" width="25px">
      <img alt="+" src="images/zoom.png"/>
      </th>
      <th field="VehicleId" width="100px">Vehicle Id</th>
     </tr>
    </thead>
   </table>
  </div>
        </div>
</body>


Here is a picture of what my viewer looks like
[ATTACH=CONFIG]30965[/ATTACH]

Any help would be very much appreciated!
Michelle

Attachments

Outcomes