map.setExtent(taxLotExtent, true);
map.centerAt(selectedTaxLot.geometry);
<!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>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.