Solved! Go to Solution.
findParams.searchText = dom.byId("ownerName").value;
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 0, 0.9]), 1), new Color([0, 0, 0, 0.5]) );
function onRowClickHandler(evt) { var clickedOrgName = evt.grid.getItem(evt.rowIndex).org_name; var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function(graphic) { return ((graphic.attributes) && graphic.attributes.org_name === clickedOrgName); }); if (selectedOrgName.length) { var center2 = [selectedOrgName[0].geometry.getLongitude(), selectedOrgName[0].geometry.getLatitude()]; var zoom2 = 15; map.centerAndZoom(center2, zoom2); } }
<thead> <tr> <th field="Name">Name</th> <th field="City" >City</th> <th field="Contact">Contact</th> <th field="Products">Products</th> <th field="Products Used" width="100%">Products Used</th> </tr> </thead>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--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.9/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script> require([ "esri/map", "esri/tasks/FindTask", "esri/tasks/FindParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "dojo/dom", "dijit/registry", "dojo/_base/array", "dojo/_base/connect", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", "dijit/form/Button", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser) { var findTask, findParams; var map, center, zoom; var grid, store; parser.parse(); registry.byId("search").on("click", doFind); center = [-69, 45.5]; zoom = 7; map = new esri.Map("map", { basemap : "topo", center : center, zoom : zoom }); //Create Find Task using the URL of the map service to search findTask = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer"); map.on("load", function() { //Create the find parameters findParams = new FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [0]; findParams.searchFields = ["org_name", "city_town", "Used_comb"]; findParams.outSpatialReference = map.spatialReference; }); function doFind() { //Set the search text to the value in the box findParams.searchText = dom.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 SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 0, 0.9]), 1), new Color([0, 0, 0, 0.5]) ); //create array of attributes var items = arrayUtils.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 : "Name", //This field needs to have unique values label : "Name", //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 ItemFileReadStore({ data : data }); var grid = registry.byId("grid"); console.log(store); grid.setStore(store); grid.on("rowclick", onRowClickHandler); //Zoom back to the initial map extent map.centerAndZoom(center, zoom); } //Zoom to the parcel when the user clicks a row - changed clickedTaxLotID to clickedOrgName - changed selectedTaxLot to selectedOrgName function onRowClickHandler(evt) { var clickedOrgName = evt.grid.getItem(evt.rowIndex).org_name; var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function(graphic) { return ((graphic.attributes) && graphic.attributes.org_name === clickedOrgName); }); if (selectedOrgName.length) { var center2 = [selectedOrgName[0].geometry.getLongitude(), selectedOrgName[0].geometry.getLatitude()]; var zoom2 = 15; map.centerAndZoom(center2, zoom2); } } }); </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="Northern Girl" /> <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" > 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="Name">Name</th> <th field="City" >City</th> <th field="Contact">Contact</th> <th field="Products">Products</th> <th field="Products Used" width="100%">Products Used</th> </tr> </thead> </table> </div> </div> </body> </html>
tags using the# symbol above.
findParams.searchText = dom.byId("ownerName").value;
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 0, 0.9]), 1), new Color([0, 0, 0, 0.5]) );
function onRowClickHandler(evt) { var clickedOrgName = evt.grid.getItem(evt.rowIndex).org_name; var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function(graphic) { return ((graphic.attributes) && graphic.attributes.org_name === clickedOrgName); }); if (selectedOrgName.length) { var center2 = [selectedOrgName[0].geometry.getLongitude(), selectedOrgName[0].geometry.getLatitude()]; var zoom2 = 15; map.centerAndZoom(center2, zoom2); } }
<thead> <tr> <th field="Name">Name</th> <th field="City" >City</th> <th field="Contact">Contact</th> <th field="Products">Products</th> <th field="Products Used" width="100%">Products Used</th> </tr> </thead>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--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.9/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script> require([ "esri/map", "esri/tasks/FindTask", "esri/tasks/FindParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "dojo/dom", "dijit/registry", "dojo/_base/array", "dojo/_base/connect", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", "dijit/form/Button", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser) { var findTask, findParams; var map, center, zoom; var grid, store; parser.parse(); registry.byId("search").on("click", doFind); center = [-69, 45.5]; zoom = 7; map = new esri.Map("map", { basemap : "topo", center : center, zoom : zoom }); //Create Find Task using the URL of the map service to search findTask = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer"); map.on("load", function() { //Create the find parameters findParams = new FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [0]; findParams.searchFields = ["org_name", "city_town", "Used_comb"]; findParams.outSpatialReference = map.spatialReference; }); function doFind() { //Set the search text to the value in the box findParams.searchText = dom.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 SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 0, 0.9]), 1), new Color([0, 0, 0, 0.5]) ); //create array of attributes var items = arrayUtils.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 : "Name", //This field needs to have unique values label : "Name", //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 ItemFileReadStore({ data : data }); var grid = registry.byId("grid"); console.log(store); grid.setStore(store); grid.on("rowclick", onRowClickHandler); //Zoom back to the initial map extent map.centerAndZoom(center, zoom); } //Zoom to the parcel when the user clicks a row - changed clickedTaxLotID to clickedOrgName - changed selectedTaxLot to selectedOrgName function onRowClickHandler(evt) { var clickedOrgName = evt.grid.getItem(evt.rowIndex).org_name; var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function(graphic) { return ((graphic.attributes) && graphic.attributes.org_name === clickedOrgName); }); if (selectedOrgName.length) { var center2 = [selectedOrgName[0].geometry.getLongitude(), selectedOrgName[0].geometry.getLatitude()]; var zoom2 = 15; map.centerAndZoom(center2, zoom2); } } }); </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="Northern Girl" /> <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" > 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="Name">Name</th> <th field="City" >City</th> <th field="Contact">Contact</th> <th field="Products">Products</th> <th field="Products Used" width="100%">Products Used</th> </tr> </thead> </table> </div> </div> </body> </html>
tags using the# symbol above.
tags from now on.
var featureLayer = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer/0",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var query = new Query(); query.where = "1=1"; featureLayer.queryFeatures(query, function(featureSet) { nameList = []; dojo.map(featureSet.features, function(feature) { nameList.push(feature.attributes.org_name); }); arrayUtils.forEach(nameList, function(feature){ registry.byId("ownerName").get('store').add({ name: feature}); }) });
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--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.9/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script> require([ "esri/map", "esri/layers/FeatureLayer", "esri/tasks/FindTask", "esri/tasks/FindParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "esri/tasks/query", "dojo/dom", "dijit/registry", "dojo/_base/array", "dojo/_base/connect", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", "dijit/form/Button", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox", "dojo/domReady!" ], function( Map, FeatureLayer, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, on, Query, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser) { var findTask, findParams; var map, center, zoom; var grid, store; parser.parse(); registry.byId("search").on("click", doFind); center = [-69, 45.5]; zoom = 7; map = new esri.Map("map", { basemap : "topo", center : center, zoom : zoom }); var featureLayer = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer/0",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var query = new Query(); query.where = "1=1"; featureLayer.queryFeatures(query, function(featureSet) { nameList = []; dojo.map(featureSet.features, function(feature) { nameList.push(feature.attributes.org_name); }); arrayUtils.forEach(nameList, function(feature){ registry.byId("ownerName").get('store').add({ name: feature}); }) }); //Create Find Task using the URL of the map service to search findTask = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer"); map.on("load", function() { //Create the find parameters findParams = new FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [0]; findParams.searchFields = ["org_name", "city_town", "Used_comb"]; findParams.outSpatialReference = map.spatialReference; }); function doFind() { //Set the search text to the value in the box findParams.searchText = dom.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 SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 0, 0.9]), 1), new Color([0, 0, 0, 0.5]) ); //create array of attributes var items = arrayUtils.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 : "Name", //This field needs to have unique values label : "Name", //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 ItemFileReadStore({ data : data }); var grid = registry.byId("grid"); console.log(store); grid.setStore(store); grid.on("rowclick", onRowClickHandler); //Zoom back to the initial map extent map.centerAndZoom(center, zoom); } //Zoom to the parcel when the user clicks a row - changed clickedTaxLotID to clickedOrgName - changed selectedTaxLot to selectedOrgName function onRowClickHandler(evt) { var clickedOrgName = evt.grid.getItem(evt.rowIndex).org_name; var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function(graphic) { return ((graphic.attributes) && graphic.attributes.org_name === clickedOrgName); }); if (selectedOrgName.length) { var center2 = [selectedOrgName[0].geometry.getLongitude(), selectedOrgName[0].geometry.getLatitude()]; var zoom2 = 15; map.centerAndZoom(center2, zoom2); } } }); </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="Northern Girl" />--> <select id="ownerName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;" value="Select an Owner"></select> <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" > 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="Name">Name</th> <th field="City" >City</th> <th field="Contact">Contact</th> <th field="Products">Products</th> <th field="Products Used" width="100%">Products Used</th> </tr> </thead> </table> </div> </div> </body> </html>