topic Dojo Data Grid Zoom To. in ArcGIS JavaScript Maps SDK Questions

Dojo Data Grid Zoom To.

deleted-user-yA_w_FC9FKe5 — Sat, 11 Dec 2021 17:50:46 GMT

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);   

  }

Re: Dojo Data Grid Zoom To.

deleted-user-yA_w_FC9FKe5 — Sat, 11 Dec 2021 17:50:49 GMT

Here is all of the code in case that helps make things clearer.


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Display Find Task results in Dojo DataGrid</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
 
 <style type="text/css">
.dojoxGrid table {
   margin: 0;
}
.dojoxGrid th, tr {
   font-size: 8pt;
}
</style>
 
    <script>
//Button for buffer (already in project)
   dojo.require("dojo.domReady!");  
      dojo.require("esri.map");   
   dojo.require("esri.layers.FeatureLayer");



      require([
        "esri/map",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
  "esri/layers/FeatureLayer",
          
        "dojo/_base/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",
          
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FeatureLayer,
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
      ) {      
        var findTask, findParams;
        var map, center, zoom;
        var grid, store;
        
        parser.parse();        
        
        registry.byId("search").on("click", doFind);
        
        center = [-98.258, 38.236];
        zoom = 4;
        map = new esri.Map("map", {
          basemap: "streets",
          center: center,
          zoom: zoom
        });

//var flMCY_Stores = new FeatureLayer("My Services", {
//          opacity:.01,
//          outFields: ["STORENAME" , "STOREID"]
//        });
//map.addLayer(flMCY_Stores); 

        //Create Find Task using the URL of the map service to search
//        findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");

        findTask = new FindTask("myservices");


        map.on("load", function () {
          //Create the find parameters
          findParams = new FindParameters();
          findParams.returnGeometry = true;
//          findParams.layerIds = [0];
//          findParams.searchFields = ["OWNERNME1", "OWNERNME2"];
          findParams.layerIds = [1];
          findParams.searchFields = ["STORENAME"];
          findParams.outSpatialReference = map.spatialReference;
          console.log("find sr: ", findParams.outSpatialReference);
        });                  
        
        function doFind() {
          //Set the search text to the value in the box
          //findParams.searchText = dom.byId("ownerName").value;
    findParams.searchText = dom.byId("txtStoreName").value;
          findTask.execute(findParams, showResults);
        }

        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])
///--------------------------------------          
    );


          //create array of attributes
          var items = arrayUtils.map(results, function (result) {
            var graphic = result.feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);
            return result.feature.attributes;
          });

          var data = {
            identifier : "STOREID", //This field needs to have unique values
            label : "STOREID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
            items : items
          };

          //Create data store and bind to grid.
          store = new ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");
          grid.setStore(store);
    grid.setSortIndex(3,"true");           
    grid.on("rowclick", onRowClickHandler);


          //Zoom back to the initial map extent
          map.centerAndZoom(center, zoom);
        }

//    function onRowClickHandler(evt) {
//     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);
//             }




  
  
     });



    function makeZoomButton(id){
        var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='assets/images/i_zoomin.png'";
        zBtn = zBtn + " width='18' height='18'";
        zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
        return zBtn;
      }

      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);   

  }


    </script>
  </head>
  <body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="height:40px;">
      <p>Store name:       
          <input type="text" id="txtStoreName" size="100px" value="Square" />
      </p>
      <p>  </p>
      <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       
      </button>
    </div>
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
     <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>
  </div>
  </body>
</html>

Re: Dojo Data Grid Zoom To.

JakeSkinner — Sat, 11 Dec 2021 17:50:52 GMT

Hi Michael,

You will need to change the grid.on("rowclick", onRowClickHandler) to grid.on("rowclick", zoomRow). Also, for the zoomRow function variable, set this to 'evt'. I couldn't figure out how to show the zoom-in icon, but here is an example that works with a sample service. It will zoom to the point feature when a row is clicked.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Display Find Task results in Dojo DataGrid</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script src="http://js.arcgis.com/3.8/"></script>
 
 <style type="text/css">
.dojoxGrid table {
   margin: 0;
}
.dojoxGrid th, tr {
   font-size: 8pt;
}
</style>
 
<script>
      require([
        "esri/map",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/layers/FeatureLayer",
          
        "dojo/_base/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",
          
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FeatureLayer,
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
      ) {      
        var findTask, findParams;
        var map, center, zoom;
        var grid, store;
        
        parser.parse();        
        
        registry.byId("search").on("click", doFind);
        
        center = [-98.258, 38.236];
        zoom = 4;
        map = new esri.Map("map", {
          basemap: "streets",
          center: center,
          zoom: zoom
        });

      var flMCY_Stores = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0", {
          outFields: ["*"]
      });
    
      map.addLayer(flMCY_Stores); 
      
      findTask = new FindTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");


      map.on("load", function () {
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["AREANAME"];
          findParams.outSpatialReference = map.spatialReference;
        });                  
        
        function doFind() {
          findParams.searchText = dom.byId("txtStoreName").value;
          findTask.execute(findParams, showResults);
        }

        function showResults(results) {
          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])          
          );

          var items = arrayUtils.map(results, function (result) {
            var graphic = result.feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);
            return result.feature.attributes;
          });

          var data = {
            identifier : "OBJECTID",
            label : "OBJECTID",
            items : items
          };

          store = new ItemFileReadStore({
            data : data
          });         
          
          var grid = registry.byId("grid");
          grid.setStore(store);
      
          grid.setSortIndex(3,"true");           
          grid.on("rowclick", zoomRow);

          map.centerAndZoom(center, zoom);
        }        
                   
       
      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(evt){   
          var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).OBJECTID;                
          var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
            return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedTaxLotId);
          });

          var center2 = [selectedTaxLot[0].geometry.getLongitude(), selectedTaxLot[0].geometry.getLatitude()];
          var zoom2 = 15;
          map.centerAndZoom(center2, zoom2);    

      }                        
   });
</script>
  </head>
  <body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="height:40px;">
      <p>Store name:       
          <input type="text" id="txtStoreName" size="100px" value="Dothan" />
      </p>
      <p>  </p>
      <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search       
      </button>
    </div>
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
     <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
              <th field="OBJECTID" formatter='makeZoomButton' width="40px">
                <img alt="+" src="images/zoom.png"  width="18" height="18"/>
              </th>
          <th field="OBJECTID" width="50px">ID</th>
          <th field="CLASS" width="70px">Store No</th>          
          <th field="AREANAME" width="150px">Store Name</th>
          <th field="CAPITAL"  width="250px">Address</th>
          <th field="POP2000" width="50px">Sales</th>
          <th field="ST" width="50">GSF</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
  </body>
</html>