Display Find Task results in Dojo DataGrid programatically

DeanSeales · ‎01-30-2012

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/Enhan...";
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dojox/grid/enhanced/resources/EnhancedGri...";
@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>

JohnGrayson · ‎01-31-2012

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

JssrRR · ‎08-22-2014

Hi John,

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

Thanks

DeanSeales · ‎02-01-2012

John,

thank you very much for your response.

I will look at the enhancedgrid closer.