<!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,IE=9" />
    <!--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>Find Task </title>
    <style type="text/css">
        @import "http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css";
        @import "http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/Grid.css";
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        body
        {
            font-size: 0.9em;
            font-family: Geneva, Arial, Helvetica, sans-serif;
        }
        .details
        {
            font-weight: bold;
        }
        #grid
        {
            border: 1px solid #333;
        }
    </style>    <script type="text/javascript">
      djConfig = {
        parseOnLoad: true
      };
    </script>    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>    <script type="text/javascript" language="Javascript">
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("esri.map");
      dojo.require("esri.tasks.find");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      
      var findTask, findParams, map;      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-125.05527265731828,"ymin":38.71305283594477,"xmax":-70.215631187727,"ymax":48.40813044933238,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map",{extent:initExtent})
        var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {
          id: "usa"
        });
        map.addLayer(censusMapLayer);        //create find task with url to map service
        findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");        //create find parameters and define known values
        findParams = new esri.tasks.FindParameters();
        findParams.returnGeometry = true;
             findParams.layerIds = [0, 1, 2];
        findParams.searchFields = ["CITY_NAME", "NAME", "SYSTEM", "STATE_ABBR", "STATE_NAME"];
        dojo.connect(map, 'onLoad', function(theMap) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }
//function switchSysBar(){
//  if (switchPoint.innerText==3){
//   switchPoint.innerText=4
//   document.all("frmTitle").style.display="none"
//  }
//  else{
//   switchPoint.innerText=3
//   document.all("frmTitle").style.display=""
//  }
//      }
      function execute(searchText) {
        //set the search text to find parameters
        var list = new dojox.grid.DataGrid();
        alert(list.toString);
        findParams.searchText = searchText;
        findTask.execute(findParams, showResults);
      }      function showResults(results) {
        //symbology for graphics
        var erSymbol = 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]));
        var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);
        var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
        //find results return an array of findResult.
        map.graphics.clear();
        var dataForGrid = [];
        //Build an array of attribute information and add each found graphic to the map
        dojo.forEach(results, function(result) {
          var graphic = result.feature;
          dataForGrid.push([result.layerName, result.foundFieldName, result.value]);
          switch (graphic.geometry.type) {
          case "point":
            graphic.setSymbol(erSymbol);
            break;
          case "polyline":
            graphic.setSymbol(lineSymbol);
            break;
          case "polygon":
            graphic.setSymbol(polygonSymbol);
            break;
          }
          map.graphics.add(graphic);
        });
        var data = {
          items: dataForGrid
        };
        var store = new dojo.data.ItemFileReadStore({
          data: data
        });
        grid.setStore(store);
      }
      dojo.addOnLoad(init);
    </script></head>
<body class="claro">
    <div dojotype="dijit.layout.BorderContainer" style="width: 100%; height: 100%; margin: 0"
        design="headline" gutters="true ">
        <div class="details" dojotype="dijit.layout.BorderContainer" region="top" style="height: 30px;">
            Find State/City/River:
            <input type="text" id="searchText" value="KS" />
            <input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);" />
        </div>
        <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border: 1px solid #000;">
        </div>
        <div dojotype="dijit.layout.ContentPane" region="left" style="width: 300px;">
            <!--Refer to field by the position id, since the data doesn't have field
    names-->
            <table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid">
                <thead>
                    <tr>
                        <th field="0">
                            Layer Name
                        </th>
                        <th field="1">
                            Field Name
                        </th>
                        <th field="2">
                            Value
                        </th>   
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</body>
</html>