Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
DataGrid with zoom button
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample demonstrates how to add data from a feature layer to a Dojo DataGrid. The sample also enhances the DataGrid by adding a zoom button to each record of the grid. When the button is clicked the map is zoomed to the associated feature. Each field in the DataGrid can define a formatter that returns the value to display in the cell. This value can incorporate HTML and JavaScript, which is the key to allowing you to insert dijits into your DataGrid.
To add the zoom buttons, modify the DataGrid in markup to add a new field and define a formatter function that will create the necessary HTML to display a zoom button. Set the unique identifier (ObjectID) as the data field so we can find the associated graphic on the map.
The makeZoomButton function creates a new button, defines button properties like width, height and a display image and associates a function with the clickevent.
The onClick event calls the zoomRow function which finds the feature that matches the selected row, then zooms.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Add zoom button to dgrid</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dojo/resources/dojo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dgrid/css/dgrid.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
body,html,#main{
margin:0;
padding:0;
height:100%;
width:100%;
font: 16px Geneva, Arial, Helvetica, sans-serif;
}
#map{
padding:0;
border: 1px solid #b5bcc7;
}
.dgrid { border: none; height: 100%; }
.dgrid-column-0 {
width: 35px;
}
.dgrid-row-odd {
background: #FFFDF3;
}
td div img:hover {
cursor: pointer;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
var map, grid;
/*
optional:
1. make field heading color rusty brown (and white on hover)
2. make sure odd selected rows turn blue too
3. figure out how to make zoom label the image (can't inject button in the constructor)
*/
require([
"esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol",
"esri/tasks/query", "esri/Color",
"dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",
"dojo/_base/array", "dojo/dom", "dijit/form/Button",
"dojo/parser", "dojo/_base/declare",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, FeatureLayer, SimpleFillSymbol,
Query, Color,
Grid, Selection, Memory,
array, dom, Button,
parser, declare
) {
parser.parse();
var StatesGrid = declare([Grid, Selection]);
var columns = [{
label: "", //wasn't able to inject an HTML <div> with image here
field: "OBJECTID",
formatter: makeZoomButton
}, {
label: "State",
field: "STATE_NAME"
}, {
label: "Population",
field: "POP2000"
}];
//restrict sorting to the state name field
for (var i = 0; i < columns.length; i++) {
if (i == 1) {
columns[i].sortable = true;
} else {
columns[i].sortable = false;
}
}
grid = new StatesGrid({
bufferRows: Infinity,
columns: columns
}, "grid");
map = new Map("map", {
basemap: "gray-vector",
center: [-97.031, 42.618],
zoom: 3
});
//add the states demographic data
var statesLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
mode: FeatureLayer.MODE_SELECTION,
outFields: ["OBJECTID", "STATE_NAME", "POP2000"]
});
//define a selection symbol
var highlightSymbol = new SimpleFillSymbol().setColor(new Color([50, 205, 50, 0.25]));
statesLayer.setSelectionSymbol(highlightSymbol);
statesLayer.on("load", function(evt) {
var query = new Query();
query.where = "1=1";
evt.layer.queryFeatures(query, function(featureSet) {
var items = array.map(featureSet.features, function(feature) {
return feature.attributes;
});
//idProperty must be set manually if value is something other than 'id'
var memStore = new Memory({
data: items,
idProperty: "OBJECTID"
});
window.grid.set("store", memStore);
window.grid.set("sort", "STATE_NAME");
grid.on(".field-OBJECTID:click", function(e) {
//retrieve the OBJECTID when someone clicks on the magnifying glass
if (e.target.alt) {
zoomRow(e.target.alt);
}
});
});
});
map.addLayers([statesLayer]);
function makeZoomButton(id) {
//set the feature 'id' as the alt value for the image so that it can be used to query below
var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png' alt='" + id + "'";
zBtn = zBtn + " width='18' height='18'></div>";
return zBtn;
}
function zoomRow(id) {
statesLayer.clearSelection();
var query = new Query();
query.objectIds = [id];
statesLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {
//zoom to the selected feature
var stateExtent = features[0].geometry.getExtent().expand(5.0);
map.setExtent(stateExtent);
});
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" >
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">
<div id="grid"></div>
</div>
</body>
</html>