Grid- Find task based on Radio Button Selection

CraigLinn · ‎01-05-2015

I am looking for the best way to run a find task based on a radio button selection and export that to a grid. Thus I simply choose the correct radio button I want to use and search layer and populate results. Thanks,

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Display Find Task results in Dojo DataGrid</title>

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

</style>

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 = [-83.266, 42.568];

zoom = 11;

map = new esri.Map("map", {

basemap: "streets",

center: center,

zoom: zoom

});

//Create Find Task using the URL of the map service to search

findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");

findTask = new FindTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0");

map.on("load", function () {

//Create the find parameters

findParams = new FindParameters();

findParams.returnGeometry = true;

findParams.layerIds = [0];

findParams.searchFields = ["OWNERNME1", "OWNERNME2"];

findParams.outSpatialReference = map.spatialReference;

console.log("find sr: ", findParams.outSpatialReference);

});

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 SimpleFillSymbol(

SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),

new Color([98, 194, 204, 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 : "PARCELID", //This field needs to have unique values

label : "PARCELID", //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");

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

function onRowClickHandler(evt) {

var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID;

var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {

return ((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId);

});

if ( selectedTaxLot.length ) {

map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);

}

});

</script>

</head>

Owner name: <input type="text" id="ownerName" size="60" value="Katz" />

<button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search

</button>

<input type="radio" id="radLayer1" name="rbLayer" value="rbLayerONE" checked>Layer 1

<input type="radio" id="radLayer2" name="rbLayer" value="rbLayerTWO" checked>Layer 2

</div>

<thead>

<tr>

<th field="PARCELID">Parcel ID</th>

<th field="OWNERNME1" >Owner 1</th>

<th field="OWNERNME2">Owner 2</th>

<th field="RESYRBLT ">Year Built</th>

<th field="SITEADDRESS" width="100%">Address</th>

</tr>

</thead>

</table>

</div>

</body>

</html>

JakeSkinner · ‎01-06-2015

One way you could do this is use two different Grids in an accordion container. To use two different services, you will just need to place the FindTask within each function (i.e. in this example, findState and findCity).

Edit fiddle - JSFiddle

View solution in original post

JakeSkinner · ‎01-06-2015

Hi Craig,

You can do this by adding the findParams.layerIds to the doFind function. Ex:

function doFind() {
  if(registry.byId("radLayer1").checked){
    findParams.layerIds = [1];
  }
  else if(registry.byId("radLayer2").checked){
    findParams.layerIds = [4];
  }
  
  findParams.searchText = dom.byId("ownerName").value;
  findTask.execute(findParams, showResults);
}

Here is a JS Fiddle of a working example.

CraigLinn · ‎01-06-2015

Thanks for your support! That does help. I should have been more detailed in my question. I have different rest services associated with each radio button. I would have a different table and search variable for each rest service. I was thinking about creating multiple find task with multiple table divs and with the radio button selected toggle all tables except that one, the same goes for search bar. What are your thoughts on that?

<!DOCTYPE html>

<html>

<head>

<title> - jsFiddle demo</title>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

</style>

window.onload=function(){

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/form/RadioButton",

"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 = [-85.7667, 38.2500];

zoom = 11;

map = new esri.Map("map", {

basemap: "streets",

center: center,

zoom: zoom

});

//Create Find Task using the URL of the map service to search

findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/...");

findTask2 = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer"); //0

//findTask2 Fields ObjectID State_FIPS TRACT BLOCK

map.on("load", function () {

//Create the find parameters

findParams = new FindParameters();

findParams.returnGeometry = true;

findParams.searchFields = ["NAME"];

findParams.outSpatialReference = map.spatialReference;

});

function doFind() {

if(registry.byId("radLayer1").checked){

findParams.layerIds = [1];

}

// else if(registry.byId("radLayer2").checked){

// findParams.layerIds = [3];

// }

findParams.searchText = dom.byId("ownerName").value;

findTask.execute(findParams, showResults);

}

function showResults(results) {

map.graphics.clear();

var symbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),

new Color([98, 194, 204, 0.5])

);

var items = arrayUtils.map(results, function (result) {

var graphic = result.feature;

graphic.setSymbol(symbol);

map.graphics.add(graphic);

return result.feature.attributes;

});

var data = {

identifier : "OBJECTID", //This field needs to have unique values

label : "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.

items : items

};

store = new ItemFileReadStore({

data : data

});

var grid = registry.byId("grid");

grid.setStore(store);

grid.on("rowclick", onRowClickHandler);

map.centerAndZoom(center, zoom);

}

function onRowClickHandler(evt) {

var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).OBJECTID;

var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {

return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedTaxLotId);

});

if ( selectedTaxLot.length ) {

var centerClickRow = [selectedTaxLot[0].geometry.getLongitude(), selectedTaxLot[0].geometry.getLatitude()];

var zoomClickRow = 14;

map.centerAndZoom(centerClickRow, zoomClickRow);

// map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);

}

});

}//]]>

</script>

</head>

<body>

ID: <input type="text" id="ownerName" size="60" value="a" />

<button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search

</button>

<input type="radio" name="rbLayer" value="rbLayerONE" checked="checked" id="radLayer1" data-dojo-type="dijit/form/RadioButton">Fire Stations

<input type="radio" name="rbLayer" value="rbLayerTWO" id="radLayer2" data-dojo-type="dijit/form/RadioButton"> Layer 2

</div>

<thead>

<tr>

<th field="ADDRESS"width="30%">Address</th>

</tr>

</thead>

</table>

</div>

</body>

</html>

JakeSkinner · ‎01-06-2015

One way you could do this is use two different Grids in an accordion container. To use two different services, you will just need to place the FindTask within each function (i.e. in this example, findState and findCity).

Edit fiddle - JSFiddle