wthughes

Select Record in Datagrid and Zoom to Point

Discussion created by wthughes on Aug 16, 2013
Latest reply on Sep 10, 2015 by kwebb24
I modified one of the samples which uses the FindTask and displays the results in a Datagrid. When the Datagrid is click the map zooms to the extent of the selected feature.
I changed the map service from a Tax Parcel (polygon) service to the Cities (point) service.
Everything works except for the zoom to on selecting a record in the Datagrid. I assume the issue has to do with the geometry type.
<!DOCTYPE html><html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--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.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>


    <script>var dojoConfig = { parseOnLoad:true }</script>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("esri.tasks.find");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.Button");
      
      var findTask, findParams;
      var map, center, zoom;
      var grid, store;


      function init() {
        dojo.connect(grid, "onRowClick", onRowClickHandler);


        center = [-83.266, 42.568];
        zoom = 4;
        map = new esri.Map("map", { 
          basemap: "streets",
          center: center,
          zoom: zoom
        });


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


        dojo.connect(map, "onLoad", function() {
          //Create the find parameters
          findParams = new esri.tasks.FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["CITY_NAME","STATE_NAME","POP1990"];
          findParams.outSpatialReference = map.spatialReference;
          console.log("find sr: ", findParams.outSpatialReference);
        });
      }


      function doFind() {
        //Set the search text to the value in the box
        findParams.searchText = dojo.byId("ownerName").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 esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));


        //create array of attributes
        var items = dojo.map(results,function(result){
          var graphic = result.feature;
          graphic.setSymbol(symbol);
          map.graphics.add(graphic);
          return result.feature.attributes;
        });
        
        //Create data object to be used in store
        var data = {
          identifier: "FID",  //This field needs to have unique values
          label: "FID", //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 dojo.data.ItemFileReadStore({ data:data });
        var grid = dijit.byId('grid');
        grid.setStore(store);


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


      //Zoom to the parcel when the user clicks a row
      function onRowClickHandler(evt){
        var clickedTaxLotId = grid.getItem(evt.rowIndex).FID;
        var selectedTaxLot;


        dojo.forEach(map.graphics.graphics,function(graphic){
          if((graphic.attributes) && graphic.attributes.FID === clickedTaxLotId){
            selectedTaxLot = graphic;
            return;
          }
        });
        var taxLotExtent = selectedTaxLot.geometry.getExtent();
        map.setExtent(taxLotExtent);
      }


      dojo.ready(init);
    </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:'top'" style="height:40px;">
      Owner name: <input type="text" id="ownerName" size="60" value="Raleigh" />
      <button data-dojo-type="dijit.form.Button"  data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>
        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="FID">FID</th>
          <th field="CITY_NAME">City</th>
          <th field="STATE_NAME" >State</th>
          <th field="POP1990">Population</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
  </body>
</html>


Outcomes