Hi guys, I went about this slightly differently, but I'm happy with it and thought I'd share a full working example for others.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic layer template with datagrid test</title>
<link href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/grid/resources/Grid.css"/>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/" type="text/javascript"></script>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script type="text/javascript">
//Ken Burcham - from many examples - 3/20/13
//CTUIR - GIS
dojo.require("dojo.parser");
dojo.require("esri.dijit.Popup");
dojo.require("esri.map");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
var map;
function init() {
//define custom popup options
var popupOptions =
{
markerSymbol: new esri.symbol.SimpleMarkerSymbol("circle", 32, null, new dojo.Color([0, 0, 0, 0.25])),
marginLeft: "20",
marginTop: "20"
};
//create a popup to replace the map's info window
var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));
//define a popup template
var popupTemplate = new esri.dijit.PopupTemplate({
title: "Study Site: {StudySiteID}",
fieldInfos: [
{ fieldName: "Description", visible: true, label: "Description" },
{ fieldName: "Latitude", visible: true, label: "Latitude" },
{ fieldName: "Longitude", visible: true, label: "Longitude" },
{ fieldName: "RiverName", visible: true, label: "River" }
], showAttachments: true
});
map = new esri.Map("map", {
sliderOrientation: "horizontal",
center: [-118.45, 45.56],
zoom: 10,
infoWindow: popup
});
//define my basemap
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
map.addLayer(basemap);
//define our overlay layer of the reservation
var boundary = new esri.layers.ArcGISDynamicMapServiceLayer("http://restdata.umatilla.nsn.us/arcgis/rest/services/TribalLands/MapServer");
map.addLayer(boundary);
//define the feature layer which will be our water temp study sites
// api reference: http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/featurelayer.html
var featureLayer =
new esri.layers.FeatureLayer("http://restdata.umatilla.nsn.us/arcgis/rest/services/StudySites/MapServer/0",
{
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, //using this mode starts off showing all of the points
infoTemplate: popupTemplate,
outFields: ["StudySiteID", "Latitude", "Longitude", "Description", "RiverName"]
});
//clicking on the map should show the infowindow for that point
dojo.connect(featureLayer, "onClick", function (evt) {
map.infoWindow.setFeatures([evt.graphic]);
});
//populate our datagrid with all of the studysite data
dojo.connect(featureLayer, 'onLoad', function (layer) {
var query = new esri.tasks.Query();
query.where = "1=1";
layer.queryFeatures(query, function (featureSet) {
var items = dojo.map(featureSet.features, function (feature) {
return feature.attributes;
});
var data = {
identifier:"StudySiteID",
items: items
};
store = new dojo.data.ItemFileReadStore({ data:data });
try
{
var layout = [[
{ 'name': 'Study Site ID', 'field': 'StudySiteID', 'width': '100px' },
{ 'name': 'River Name', 'field': 'RiverName', 'width': '140px' },
{ 'name': 'Description', 'field': 'Description', 'width': '660px' }
]];
var grid = new dojox.grid.DataGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px'
});
grid.placeAt("data"); //this is the div below that we want to fill
grid.startup();
//connect to the onRowClick event - clicking a row should show the studysite in the map
grid.onRowClick = function (e) { zoomRow(e.grid.getItem(e.rowIndex).StudySiteID); };
}
catch (err) {
console.dir(err);
}
});
});
map.addLayer(featureLayer);
//set our infowindow dimensions
dojo.connect(map, "onLoad", function (map) {
map.infoWindow.resize(270, 180);
});
//zoom in the map to this point (called when someone clicks a datagrid row)
//param: id = StudySiteID
function zoomRow(id) {
try
{
var query = new esri.tasks.Query();
query.objectIds = [id];
featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_ADD, function (features) {
//zoom to the selected feature and show the infowindow
map.infoWindow.setContent(features[0].getContent());
map.infoWindow.setTitle(features[0].getTitle());
map.infoWindow.show(features[0].geometry);
//map.infoWindow.resize(270, 180); //not necessary
});
} catch (err) {
console.dir(err);
}
}
var scalebar = new esri.dijit.Scalebar({
map: map,
attachTo: "top-left"
});
}
dojo.addOnLoad(init);
</script>
<style>
html,body,#mapDiv,.map.container
{
padding:0;
margin:0;
height:100%;
}
</style>
</head>
<body class="claro">
<div id="map" style="width:100%; height:80%; border:1px solid #000;"></div>
<div id="data" style="width:100%; height:20%"></div>
</body>
</html>