Show Find Task results in DataGrid

simonmiles · ‎08-09-2010

I'm trying to learn through playing with the esri samples, I want to change the below sample, which is concerned with the dojo.datagrid and the find.task tool.

http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jssamples_start.htm

I want to be able to change the find.task from the existing mapservice to

http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...

and find US states via the STATE_NAME field from service 2. However I�??m find this a little challenging, I think that where I�??m going wrong is around the area of the TLID part of the original code and replacing it with FID.

Again, I�??ve also been playing around with changing the find.task to look to CITY_NAME of service 0. This is a point layer and although I have changed the code to reflect that its a point dataset (esri.symbol.SimpleMarkerSymbol), still no luck.

Any help would be great.

Thanks

Si

derekswingley1 · ‎08-09-2010

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Display Find Task results in Dojo DataGrid</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dojox/grid/resources/tundraGrid.css">

    <script type="text/javascript">
      djConfig = {
        parseOnLoad:true
      }
    </script>

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("esri.tasks.find");

      var findTask, findParams;
      var map, startExtent;
      var grid, store;

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

        //Create map and add the ArcGIS Online imagery layer
        startExtent = new esri.geometry.Extent(-122.9, 45.3, -122.4, 45.7, new esri.SpatialReference({wkid:4326}));
        map = new esri.Map("map", { extent: startExtent });
        var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
        map.addLayer(streetMapLayer);

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

        //Create the find parameters
        findParams = new esri.tasks.FindParameters();
        findParams.returnGeometry = true;
        findParams.layerIds = [2];
        findParams.searchFields = ["STATE_NAME"];
      }

      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.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,0]), 2), new dojo.Color([0,0,0,0]));

        //Create items array to be added to store's data
        var items = []; //all items to be stored in data store
        for (var i=0, il=results.length; i<il; i++) {
          items.push(results.feature.attributes);  //append each attribute list as item in store
          var graphic = results.feature;
          graphic.setSymbol(symbol);
          map.graphics.add(graphic);
        }

        //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 });
        grid.setStore(store);
        grid.setQuery({ 'FID': '*' });

        //Zoom back to the initial map extent
        map.setExtent(startExtent);

      }

      //Zoom to the parcel when the user clicks a row
      function onRowClickHandler(evt){
        var clickedTaxLotId = grid.getItem(evt.rowIndex).FID;
        var selectedTaxLot;
        for (var i=0, il=map.graphics.graphics.length; i<il; i++) {
          var currentGraphic = map.graphics.graphics;
          if ((currentGraphic.attributes) && currentGraphic.attributes.FID == clickedTaxLotId){
            selectedTaxLot = currentGraphic;
            break;
          }
        }
        var taxLotExtent = selectedTaxLot.geometry.getExtent();
        map.setExtent(taxLotExtent, true);
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Owner name: <input type="text" id="ownerName" size="60" value="Indiana" />
    <input type="button" value="Search" onclick="doFind();" /><br />
    <br />
    <div id="map" style="width:600px; height:300px; border:1px solid #000;"></div>
     <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowsPerPage="5" rowSelector="20px" style="height:300px; width:600px">
      <thead>
        <tr>
          <th field="FID">Feature ID</th>
          <th field="STATE_NAME">State Name</th>
          <th field="MALES">Males</th>
          <th field="FEMALES">Females</th>
        </tr>
      </thead>
    </table>
  </body>
</html>

I didn't change much besides the map service used by the find task. You were on the right track for replacing "TLID" with "FID."

Edit: If you're just starting out, go with version 2 of the API: http://help.arcgis.com/en/webapi/javascript/arcgis/

simonmiles · ‎08-11-2010

Thanks for this - i see the error or my ways.

How would you change this sample to search on the CITY_NAME service. Is it as simple as changing the var symbol to a marker, as well as the fields?

derekswingley1 · ‎08-11-2010

Yep. You'd also want to modify the onRowClickHandler() function as it expects a polygon and not a point. You could just have the map pan to your city point or you could build an extent from the city point.

simonmiles · ‎08-11-2010

Thanks again, I've got it to work to a point (excuse pun!) but for some reason i cant get it to zoom to the City.

The eventual aim is to replace the city search with an address search. Playing with the samples in this way has been really useful to me and has given me lots of food for thought.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Display Find Task results in Dojo DataGrid</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dojox/grid/resources/tundraGrid.css">

    <script type="text/javascript">
      djConfig = {
        parseOnLoad:true
      }
    </script>

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("esri.tasks.find");

      var findTask, findParams;
      var map, startExtent;
      var grid, store;

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

        //Create map and add the ArcGIS Online imagery layer
        startExtent = new esri.geometry.Extent(-122.9, 45.3, -122.4, 45.7, new esri.SpatialReference({wkid:4326}));
        map = new esri.Map("map", { extent: startExtent });
        var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
        map.addLayer(streetMapLayer);

        //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/Map...");

        //Create the find parameters
        findParams = new esri.tasks.FindParameters();
        findParams.returnGeometry = true;
        findParams.layerIds = [0];
        findParams.searchFields = ["CITY_NAME"];
      }

      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_DIAMOND, 10,
                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([0, 0, 0]), 1),
                new dojo.Color([255, 255, 0, 1]));

            //feature.setSymbol(symbol);

        //Create items array to be added to store's data
            var items = []; //all items to be stored in data store
            for (var i = 0, il = results.length; i < il; i++) {
                items.push(results.feature.attributes); //append each attribute list as item in store
                var graphic = results.feature;

                //variable for the point extent
                var pt = graphic.geometry;

                graphic.setSymbol(symbol);
                map.graphics.add(graphic);

            }

        //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 });
        grid.setStore(store);
        grid.setQuery({ 'FID': '*' });

        //Zoom back to the initial map extent
        map.setExtent(startExtent);

      }

//Zoom to the parcel when the user clicks a row
      function onRowClickHandler(evt){
        var clickedTaxLotId = grid.getItem(evt.rowIndex).FID;
        var selectedTaxLot;
        for (var i=0, il=map.graphics.graphics.length; i<il; i++) {
          var currentGraphic = map.graphics.graphics;
//variable for the point extent
                //var pt = graphic.geometry;
          if ((currentGraphic.attributes) && currentGraphic.attributes.FID == clickedTaxLotId){
            selectedTaxLot = currentGraphic;
            break;

                     }
}
        var taxLotExtent = selectedTaxLot.geometry.getExtent();
        map.setExtent(taxLotExtent, true);
      }

      dojo.addOnLoad(init);
    </script>
</head>
<body class="tundra">
    Owner name: <input type="text" id="ownerName" size="60" value="Indiana" />
    <input type="button" value="Search" onclick="doFind();" /><br />
    <br />
    <div id="map" style="width:600px; height:300px; border:1px solid #000;"></div>
     <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowsPerPage="5" rowSelector="20px" style="height:300px; width:600px">
      <thead>
        <tr>
          <th field="FID">Feature ID</th>
          <th field="CITY_NAME">City Name</th>
          <th field="MALES">Males</th>
          <th field="FEMALES">Females</th>
        </tr>
      </thead>
    </table>
</body>
</html>

derekswingley1 · ‎08-12-2010

Since you're now dealing with points, the simplest/quickest fix would be to use map.centerAt(mapPoint) instead of trying to zoom to an extent. Instead of:

map.setExtent(taxLotExtent, true);

Try:

map.centerAt(selectedTaxLot.geometry);