<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Charter Guide Map</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; } td { padding:3px; } #container { height: 100%; visibility: hidden; } #bottomPane { height: 200px; } #grid { height: 100%; } .dgrid { border: none; } .field-Business_C { 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 grid = new (declare([Grid, Selection]))({ // use Infinity so that all data is available in the grid bufferRows: Infinity, columns: { "Business_C": "Business/Captain Name", "Address": "Address", "Phone_1": "Phone Number", "Email_Addr": "Email Address", "Maximum_Si": "Max Size of Charter", "Web_Addres": "Website", "Region_s_" : "Regions" } }, "grid"); // add a click listener on the ID column grid.on(".field-Business_C:click", selectCaptain); map = new Map("map", { basemap: "satellite", center: [-76.5, 38.9], zoom: 9 }); chartersUrl = "http://services.arcgis.com/njFNhDsUCentVYJW/arcgis/rest/services/CharterGuide/FeatureServer/0"; outFields = ["Business_C", "Address", "Phone_1", "Email_Addr", "Maximum_Si", "Web_Addres", "Region_s_", "Chesapeake", "Vessel_Nam", "Phone_2", "Fishing_Me", "Other_Regi", "Targeted_S"]; var infoTemplate = new esri.InfoTemplate(); infoTemplate.setTitle("${Business_C}"); infoTemplate.setContent( "<table border='0', width='100%'>" + "<tr><td width='50%' width='100%' valign='top'>Vessel Name:</td><td width='50%' valign='bottom'> ${Vessel_Nam}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Business/Captain Name:</td><td width='50%' valign='bottom'> ${Business_C}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Marina Address:</td><td width='50%' valign='bottom'> ${Address}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Phone 1:</td><td width='50%' valign='bottom'> ${Phone_1}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Phone 2:</td><td width='50%' valign='bottom'> ${Phone_2}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Email:</td><td width='50%' valign='bottom'> ${Email_Addr}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Maximum Size of Charter:</td><td width='50%' valign='bottom'> ${Maximum_Si}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Web Address:</td><td width='50%' valign='bottom'> ${Web_Addres}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Fishing Method:</td><td width='50%' valign='bottom'> ${Fishing_Me}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Regions Covered:</td><td width='50%' valign='bottom'> ${Region_s_}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Chesapeake Bay:</td><td width='50%' valign='bottom'> ${Chesapeake}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Other Regions Covered:</td><td width='50%' valign='bottom'> ${Other_Regi}</td></tr>" + "<tr><td width='50%' width='100%' valign='top'>Targeted Species:</td><td width='50%' valign='bottom'> ${Targeted_S}</td></tr>" + "</table>" ); map.infoWindow.resize(400,300) var highlight = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 16, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,255,255]), 3), new dojo.Color([0,255,255,0])); var fl = new FeatureLayer(chartersUrl, { id: "charters", mode: 1, outFields: outFields, infoTemplate: infoTemplate }); fl.on("click", function() { map.graphics.clear(); }); // 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(chartersUrl); var query = new Query(); query.where = "1=1"; query.returnGeometry = false; query.outFields = 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 "Business_C": feature.attributes[outFields[0]], "Address": feature.attributes[outFields[1]], "Phone_1": feature.attributes[outFields[2]], "Email_Addr": feature.attributes[outFields[3]], "Maximum_Si": feature.attributes[outFields[4]], "Web_Addres": feature.attributes[outFields[5]], "Region_s_": feature.attributes[outFields[6]] } }); var memStore = new Memory({ data: data }); grid.set("store", memStore); }); } // fires when a row in the dgrid is clicked function selectCaptain(e) { grid.clearSelection(); map.infoWindow.hide(); map.graphics.clear(); var fl = map.getLayer("charters"); var query = new Query(); captainName = (e.target.innerHTML); query.where = "Business_C = '" + captainName + "'"; fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) { map.centerAt(result[0].geometry); map.graphics.add(new esri.Graphic(result[0].geometry, highlight)); }); } } ); }); </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>
Solved! Go to Solution.
Found it! In the earlier post, Brent indicated that selectMode:single didn't help. But in my example, that's what I was missing.