Display Find Task results in Dojo DataGrid programatically

DeanSeales — Mon, 30 Jan 2012 19:41:33 GMT

Hello, I have been able to display find task results in enhancedgrid programatically.

However, the onRowClickHandler() refuses to work.

Furthermore, I would like to be able to use a combobox to select individual findTasks.

I would very much prefer utilize the sample which returns results from multiple services but this sample does not allow onRowClickHandler() either.

Any assistance would be greatly appreciated.

<!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" />

<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" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css">

<script type="text/javascript">
dojoConfig = {
parseOnLoad: true
}
</script>
<style>

@import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dojo/resources/dojo.css";
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#grid {
width: 25em;
height: 100%;
}
</style>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.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");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");

dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");

dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.MenuSeparator");

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({ "xmin": -9267533.641224435, "ymin": 5225262.235659762, "xmax": -9243914.599484349, "ymax": 5232026.912662991, "spatialReference": { "wkid": 102100} });
map = new esri.Map("map", { extent: startExtent });

var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/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/TaxParcel/TaxParcelQuery/MapServer/");

//Create the find parameters
findParams = new esri.tasks.FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["OWNERNME1", "OWNERNME2"];
findParams.outSpatialReference = map.spatialReference;

dojo.connect(map, 'onLoad', function (theMap) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});
}

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_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98, 194, 204]), 2), new dojo.Color([98, 194, 204, 0.5]));

//create array of attributes
var items = dojo.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 dojo.data.ItemFileReadStore({ data: data });
/*set up layout*/
var parcellayout = [
{ 'name': 'Parcel ID', 'field': 'PARCELID', 'width': '9em'},
{ 'name': 'Owner Name', 'field': 'OWNERNME1', 'width': '14em'},
// { 'name': 'Year Built', 'field': 'RESYRBLT', 'width': '50px' },
// { 'name': 'Site Adress', 'field': 'SITEADDRESS', 'width': '200px' }
];
/*create a new grid:*/
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: parcellayout,
rowSelector: '1px',
plugins: {
pagination: {
pageSizes: ["5", "10", "All"],
description: true,
sizeSwitch: false,
pageStepper: true,
gotoButton: false,
/*page step to be displayed*/
maxPageStep: 3,
/*position of the pagination bar*/
position: "bottom"
}
}

},
document.createElement('div'));

/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);

/*Call startup() to render the grid*/
grid.startup();

grid.setStore(store);

//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).PARCELID;
var selectedTaxLot;

dojo.forEach(map.graphics.graphics, function (graphic) {
if ((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId) {
selectedTaxLot = graphic;
return;
}
});
var taxLotExtent = selectedTaxLot.geometry.getExtent();
map.setExtent(taxLotExtent);
}

dojo.addOnLoad(init);

</script>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%;height:100%;margin:0;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:40px;">

<select id=select dojoType="dijit.form.ComboBox" autoComplete="true">
<option>Select Layer</option>
<option>Parcel</option>
<option>Road Log</option>
<option>Violation</option>
</select>

<input type="text" id="ownerName" size="60" value="Katz" />
<button data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>
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:'left'" style="width:25em;">

<div id="gridDiv"></div>


</div>
</div>
</body>
</html>

Re: Display Find Task results in Dojo DataGrid programatically

JohnGrayson — Tue, 31 Jan 2012 15:26:26 GMT

Try using the dojox.grid.enhanced.plugins.Selector (link) as you can connect to selection related events (link).

Re: Display Find Task results in Dojo DataGrid programatically

DeanSeales — Wed, 01 Feb 2012 14:31:01 GMT

John,

thank you very much for your response.

I will look at the enhancedgrid closer.

Re: Display Find Task results in Dojo DataGrid programatically

JssrRR — Fri, 22 Aug 2014 19:16:42 GMT

Hi John,

The links that you have in here your response do not work, could please hyperlink them.

Thanks

topic Display Find Task results in Dojo DataGrid programatically in ArcGIS JavaScript Maps SDK Questions

Display Find Task results in Dojo DataGrid programatically

Re: Display Find Task results in Dojo DataGrid programatically

Re: Display Find Task results in Dojo DataGrid programatically

Re: Display Find Task results in Dojo DataGrid programatically