i realise this has been closed for a while but in my questing for an answer i couldn't really find one so i've added my solution here. Below is my sample of the select by data grid using the new dgrid method.you will need to add your own URLS and Fields. Note this is for a point feature. To use polygon use - result[0].geometry.getExtent().getCenter() in function selectState.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map with a Dojo dGrid</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/dgrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/skins/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
height: 100%;
visibility: hidden;
}
#bottomPane { height: 200px; }
#grid { height: 100%; }
.dgrid { border: none; }
.field-id { cursor: pointer; }
</style>
<script src="http://js.arcgis.com/3.7/"></script>
<script>
// load dgrid, esri and dojo modules
// create the grid and the map
// then parse the dijit layout dijits
require([
"dojo/ready",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/dom-style",
"dijit/registry",
"esri/map",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/tasks/QueryTask",
"esri/tasks/query",
"dojo/_base/declare",
"dojo/number",
"dojo/on",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
], function (
ready,
Grid,
Selection,
Memory,
array,
domStyle,
registry,
Map,
FeatureLayer,
SimpleFillSymbol,
QueryTask,
Query,
declare,
dojoNum,
on,
parser
) {
ready(function () {
parser.parse();
// create the dgrid
window.grid = new (declare([Grid, Selection]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
columns: {
"id": "OBJECTID",
"Project_Nu": "Project Number",
//"median": { "label": "Median Net Worth", "formatter": dojoNum.format },
//"over1m": { "label": "Households Net Worth > $1M", "formatter": dojoNum.format }
}
}, "grid");
// add a click listener on the ID column
grid.on(".field-id:click", selectState);
window.map = new Map("map", {
basemap: "gray",
center: [-101.426, 42.972],
zoom: 4
});
window.statesUrl = "ADDMYOWNGISURLHERE!/MapServer/0";
window.outFields = ["OBJECTID", "Project_Nu", "MEDNW_CY", "NW1M_CY"];
var fl = new FeatureLayer(window.statesUrl, {
id: "states",
mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
outFields: window.outFields
});
fl.on("load", function () {
fl.maxScale = 0; // show the states layer at all scales
fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
});
fl.on("click", selectGrid);
// change cursor to indicate features are click-able
fl.on("mouse-over", function () {
map.setMapCursor("pointer");
});
fl.on("mouse-out", function () {
map.setMapCursor("default");
});
map.addLayer(fl);
map.on("load", function (evt) {
// show the border container now that the dijits
// are rendered and the map has loaded
domStyle.set(registry.byId("container").domNode, "visibility", "visible");
populateGrid(Memory); // pass a reference to the MemoryStore constructor
});
function populateGrid(Memory) {
var qt = new QueryTask(window.statesUrl);
var query = new Query();
query.where = "1=1";
query.returnGeometry = false;
query.outFields = window.outFields;
qt.execute(query, function (results) {
var data = array.map(results.features, function (feature) {
return {
// property names used here match those used when creating the dgrid
"id": feature.attributes[window.outFields[0]],
"Project_Nu": feature.attributes[window.outFields[1]],
"median": feature.attributes[window.outFields[2]],
"over1m": feature.attributes[window.outFields[3]]
}
});
var memStore = new Memory({ data: data });
window.grid.set("store", memStore);
});
}
// fires when a row in the dgrid is clicked
function selectState(e) {
// select the feature
var fl = map.getLayer("states");
var query = new Query();
var id = parseInt(e.target.innerHTML)
query.objectIds = [parseInt(e.target.innerHTML)];
fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) {
if (result.length) {
point = result
window.map.centerAndZoom(result[0].geometry, 10);
} else {
console.log("Feature Layer query returned no features... ", result);
}
});
}
// fires when a feature on the map is clicked
function selectGrid(e) {
var id = e.graphic.attributes.OBJECTID;
// select the feature that was clicked
var query = new Query();
query.objectIds = [id];
var states = map.getLayer("states");
states.selectFeatures(query, FeatureLayer.SELECTION_NEW);
// select the corresponding row in the grid
// and make sure it is in view
grid.clearSelection();
grid.select(id);
grid.row(id).element.scrollIntoView();
}
}
);
});
</script>
</head>
<body class="tundra">
<div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
<div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid"></div>
</div>
</div>
</body>
</html>
