Show Find Task results in DataGrid

Discussion created by simon.miles.rbwm on Aug 9, 2010
Latest reply on Aug 12, 2010 by DSwingley-esristaff

Like • Show 0 Likes0
Comment • 5

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/MapServer

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

Outcomes

5 Replies

DSwingley-esristaff

Aug 9, 2010 7:03 PM

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[i].feature.attributes);  //append each attribute list as item in store
          var graphic = results[i].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[i];
          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/

Actions

simon.miles.rbwm Aug 11, 2010 10:35 AM
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?
Like • Show 0 Likes0
Actions
DSwingley-esristaff Aug 11, 2010 12:21 PM
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.
Like • Show 0 Likes0
Actions
simon.miles.rbwm Aug 11, 2010 11:53 PM
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/MapServer");

        //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[i].feature.attributes); //append each attribute list as item in store
                var graphic = results[i].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[i];
//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>
Like • Show 0 Likes0
Actions
DSwingley-esristaff Aug 12, 2010 9:46 AM
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);
```
Like • Show 0 Likes0
Actions

GeoNet

The Esri Community

Show Find Task results in DataGrid

Outcomes

Related Content

Recommended Content