ho0mwp

Dojo Data Grid Zoom To.

Discussion created by ho0mwp on Apr 22, 2014
Latest reply on Apr 23, 2014 by jskinner-esristaff
So I am trying to combine a couple of samples together.  The first thing I did was used this example to create a search on my point feature layer.  It took some modification because the sample was on polygons and I am using points.  So I had to use a SimpleMarkerSymbol.  So basically the lines that are commented out were the ones updated. 

http://developers.arcgis.com/javascript/samples/find_map_datagrid/

        function showResults(results) {
          //This function works with an array of FindResult that the task returns
          map.graphics.clear();
    var symbol = new SimpleMarkerSymbol(
      SimpleMarkerSymbol.STYLE_CIRCLE, 
      12, 
      new SimpleLineSymbol(
     SimpleLineSymbol.STYLE_NULL, 
     new Color([0, 0, 0, 0.9]), 
     1
      ),
      new Color([0, 0, 0, 0.5])
//----  Use this code if polygons ----///    
//          var symbol = new SimpleFillSymbol(
//            SimpleFillSymbol.STYLE_SOLID, 
//            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2), 
//            new Color([98, 194, 204, 0.5])
///--------------------------------------          
    );



I like zooming in using a button rather than zooming in on the row like this example.. 
http://developers.arcgis.com/javascript/samples/fl_zoomgrid/

However, I cannot get it to work. 
The grid:
     <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
              <th field="STOREID" formatter="makeZoomButton" width="40px">
                <img alt="+" src="assets/images/i_zoomin.png"  width="18" height="18"/>
              </th>
          <th field="STOREID" width="50px">ID</th>
          <th field="STORENO" width="70px">Store No</th>          
          <th field="STORENAME" width="150px">Store Name</th>
          <th field="ADDRESS"  width="250px">Address</th>
          <th field="SALES" width="50px">Sales</th>
          <th field="GSF" width="50">GSF</th>
        </tr>
      </thead>
    </table>
    </div>


Here is the functions that it is calling.  makeZoomButton seems to be working okay but the zoomRow continues to get an Line: 190
Error: 'evt' is undefined.

        function zoomRow(id){
   
     var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).STOREID;                
     var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
      return ((graphic.attributes) && graphic.attributes.STOREID === clickedTaxLotId);
     });
     //CREATE THE POINT WITH THE SELECTED ROW
     var center2 = [selectedTaxLot[0].geometry.getLongitude(), selectedTaxLot[0].geometry.getLatitude()];
     //ZOOM LEVEL
     var zoom2 = 15;
     //CENTER AND ZOOM
     map.centerAndZoom(center2, zoom2);   

  }  

Outcomes