I am not sure what I am doing wrong.
I can edit but nothing shows up in the dgrid.
I am not sure if the code below will post properly here is the script in Edit fiddle - JSFiddle
Any suggestions?
<!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>Emergency Loc</title> <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; } body { background-color: #fff; overflow: hidden; font-family: Helvetica, san-serif; } #templatePickerPane { width: 225px; overflow: hidden; } #panelHeader { background-color: #92A661; border-bottom: solid 1px #92A860; color: #FFF; font-size: 18px; height: 24px; line-height: 22px; margin: 0; overflow: hidden; padding: 10px 10px 10px 10px; } #map { margin-right: 5px; padding: 0; } .esriEditor .templatePicker { padding-bottom: 5px; padding-top: 5px; height: 500px; border-radius: 0px 0px 4px 4px; border: solid 1px #92A661; } .dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content { position: relative; } .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.15/"></script> <script> var map, grid; require([ "esri/config", "esri/map", "esri/SnappingManager", "esri/dijit/editing/Editor", "esri/layers/FeatureLayer", "esri/tasks/GeometryService", "esri/toolbars/draw", "dojo/keys", "dojo/parser","esri/layers/ArcGISDynamicMapServiceLayer","dojo/_base/declare","dgrid/OnDemandGrid","dgrid/Selection","esri/symbols/SimpleFillSymbol","esri/Color","dijit/form/Button", "esri/symbols/SimpleMarkerSymbol","dojo/_base/array", "dojo/i18n!esri/nls/jsapi", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( esriConfig, Map, SnappingManager, Editor, FeatureLayer, GeometryService, Draw, keys, parser,ArcGISDynamicMapServiceLayer,declare,Grid,Selection, SimpleFillSymbol,Color,Button,SimpleMarkerSymbol, arrayUtils, i18n ) { parser.parse(); //snapping is enabled for this sample - change the tooltip to reflect this i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping"; i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping"; //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic //for details on setting up a proxy page. esriConfig.defaults.io.proxyUrl = "/proxy/"; //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); <!--____________________________________________Dgrid________________________________________________________________--!> var StatesGrid = declare([Grid, Selection]); var columns = [{ label: "", //wasn't able to inject an HTML <div> with image here field: "ObjectID", formatter: makeZoomButton }, { label: "Location", field: "Location" }, { label: "Call Type", field: "CallType" }]; //restrict sorting to the state name field for (var i = 0; i < columns.length; i++) { if (i == 1) { columns.sortable = true; } else { columns.sortable = false; } } grid = new StatesGrid({ bufferRows: Infinity, columns: columns }, "grid"); <!--____________________________________________Script________________________________________________________________--!> map = new Map("map", { basemap: Layer4, center: [-122.710375, 42.197994], zoom: 14 }); map.on("layers-add-result", initEditing); var Layer4 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/pictometry3inch/MapServer", { opacity: 1 }); map.addLayer(Layer4); var Layer7 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer", { visible: true, refreshInterval: 0.3 }); Layer7.setVisibleLayers([1]); map.addLayer(Layer7); var operationsPointLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/FeatureServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); map.addLayers([operationsPointLayer]); map.infoWindow.resize(400, 300); function initEditing (event) { var featureLayerInfos = arrayUtils.map(event.layers, function (layer) { return { "featureLayer": layer.layer, "isEditable": true, 'showAttachments': true, "showDeleteButton": false, "fieldInfos": [{ 'fieldName': 'Caller_Name', 'isEditable': false, 'tooltip': 'Caller Name', 'label': 'Caller Name:' }, { 'fieldName': 'Priority', 'isEditable': true, 'tooltip': 'Priority', 'label': 'Priority:' }, { 'fieldName': 'Location', 'isEditable': false, 'label': 'Location:' }, { 'fieldName': 'Phone', 'isEditable': false, 'label': 'Phone:' }, { 'fieldName': 'Notes', 'isEditable': false, 'label': 'Notes:' }, { 'fieldName': 'CallType', 'isEditable': true, 'label': 'CallType:' }] }; }); var settings = { map: map, layerInfos: featureLayerInfos }; var params = { settings: settings }; /* var editorWidget = dijit.byId('editorDiv'); if (editorWidget) { editorWidget.destroyRecursive(true); }*/ var editorWidget = new Editor(params, 'editorDiv'); editorWidget.startup(); //snapping defaults to Cmd key in Mac & Ctrl in PC. //specify "snapKey" option only if you want a different key combination for snapping map.enableSnapping(); } <!--____________________________________________Dgrid________________________________________________________________--!> //add the states demographic data var statesLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer/0", { mode: FeatureLayer.MODE_SELECTION, outFields: ["OBJECTID", "Priority", "Location", "last_edited_date","CallType"] }); //create Selection Symbol var highlightSymbol = new SimpleMarkerSymbol({ "color":[0,112,255,255], "size":10, "angle":0, "xoffset":0, "yoffset":14, "type":"esriSMS", "style":"esriSMSDiamond" }); 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", "Location"); 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; } //center at the selected feature on the map from the row in the data grid function zoomRow(id) { statesLayer.clearSelection(); var query = new Query(); query.objectIds = [id]; statesLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) { //re-centre map to zoom to the selected feature map.centerAt(features[0].geometry); //using centerAt() //map.centerAndZoom(features[0].geometry, 14); //using centerAndZoom() }); } }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" 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" id="templatePickerPane" data-dojo-props="region:'left'"> <div id="grid"></div> <div id="panelHeader"> Default Editor </div> <div style="padding:10px;" id="editorDiv"> </div> </div> </div> </body> </html>
Solved! Go to Solution.
Rickey,
Here is all my corrections:
<!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>Emergency Loc</title> <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; } body { background-color: #fff; overflow: hidden; font-family: Helvetica, san-serif; } #templatePickerPane { width: 225px; overflow: hidden; } #panelHeader { background-color: #92A661; border-bottom: solid 1px #92A860; color: #FFF; font-size: 18px; height: 24px; line-height: 22px; margin: 0; overflow: hidden; padding: 10px 10px 10px 10px; } #map { margin-right: 5px; padding: 0; } .esriEditor .templatePicker { padding-bottom: 5px; padding-top: 5px; height: 500px; border-radius: 0px 0px 4px 4px; border: solid 1px #92A661; } .dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content { position: relative; } .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.15/"></script> <script> var map, grid; require([ "esri/config", "esri/map", "esri/SnappingManager", "esri/dijit/editing/Editor", "esri/layers/FeatureLayer", "esri/tasks/GeometryService", "esri/toolbars/draw", "dojo/keys", "dojo/parser", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "esri/symbols/SimpleFillSymbol", "esri/Color", "dijit/form/Button", "esri/symbols/SimpleMarkerSymbol", "dojo/_base/array", "dojo/i18n!esri/nls/jsapi", "esri/tasks/query", "dojo/store/Memory", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( esriConfig, Map, SnappingManager, Editor, FeatureLayer, GeometryService, Draw, keys, parser, ArcGISDynamicMapServiceLayer, declare, Grid, Selection, SimpleFillSymbol, Color, Button, SimpleMarkerSymbol, arrayUtils, i18n, Query, Memory ) { parser.parse(); //snapping is enabled for this sample - change the tooltip to reflect this i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping"; i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping"; //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic //for details on setting up a proxy page. esriConfig.defaults.io.proxyUrl = "/proxy/"; //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); <!--____________________________________________Dgrid________________________________________________________________--!> var StatesGrid = declare([Grid, Selection]); var columns = [{ label: "", //wasn't able to inject an HTML <div> with image here field: "OBJECTID", formatter: makeZoomButton }, { label: "Location", field: "Location" }, { label: "Call Type", field: "CallType" }]; //restrict sorting to the state name field for (var i = 0; i < columns.length; i++) { if (i == 1) { columns.sortable = true; } else { columns.sortable = false; } } grid = new StatesGrid({ bufferRows: Infinity, columns: columns }, "grid"); <!--____________________________________________Script________________________________________________________________--!> map = new Map("map", { basemap: Layer4, center: [-122.710375, 42.197994], zoom: 14 }); map.on("layers-add-result", initEditing); var Layer4 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/pictometry3inch/MapServer", { opacity: 1 }); map.addLayer(Layer4); var Layer7 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer", { visible: true, refreshInterval: 0.3 }); Layer7.setVisibleLayers([1]); map.addLayer(Layer7); var operationsPointLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/FeatureServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); map.addLayers([operationsPointLayer]); map.infoWindow.resize(400, 300); function initEditing(event) { var featureLayerInfos = arrayUtils.map(event.layers, function(layer) { return { "featureLayer": layer.layer, "isEditable": true, 'showAttachments': true, "showDeleteButton": false, "fieldInfos": [{ 'fieldName': 'Caller_Name', 'isEditable': false, 'tooltip': 'Caller Name', 'label': 'Caller Name:' }, { 'fieldName': 'Priority', 'isEditable': true, 'tooltip': 'Priority', 'label': 'Priority:' }, { 'fieldName': 'Location', 'isEditable': false, 'label': 'Location:' }, { 'fieldName': 'Phone', 'isEditable': false, 'label': 'Phone:' }, { 'fieldName': 'Notes', 'isEditable': false, 'label': 'Notes:' }, { 'fieldName': 'CallType', 'isEditable': true, 'label': 'CallType:' }] }; }); var settings = { map: map, layerInfos: featureLayerInfos }; var params = { settings: settings }; var editorWidget = new Editor(params, 'editorDiv'); editorWidget.startup(); //snapping defaults to Cmd key in Mac & Ctrl in PC. //specify "snapKey" option only if you want a different key combination for snapping map.enableSnapping(); } <!--____________________________________________Dgrid________________________________________________________________--!> //add the states demographic data var statesLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer/0", { mode: FeatureLayer.MODE_SELECTION, outFields: ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"] }); //create Selection Symbol var highlightSymbol = new SimpleMarkerSymbol({ "color": [0, 112, 255, 255], "size": 10, "angle": 0, "xoffset": 0, "yoffset": 14, "type": "esriSMS", "style": "esriSMSDiamond" }); statesLayer.on("load", function(evt) { var query = new Query(); query.where = "1=1"; query.outFields = ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"]; query.returnGeometry = true; statesLayer.queryFeatures(query, function(featureSet) { var items = arrayUtils.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", "Location"); 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); } }); }, function(error){ console.info(error); }); }); map.addLayer(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; } //center at the selected feature on the map from the row in the data grid function zoomRow(id) { statesLayer.clearSelection(); var query = new Query(); query.objectIds = [id]; console.info(id); statesLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) { //re-centre map to zoom to the selected feature map.centerAt(features[0].geometry); //using centerAt() //map.centerAndZoom(features[0].geometry, 14); //using centerAndZoom() }); } }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" 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" id="templatePickerPane" data-dojo-props="region:'left',width:'180px'"> <div id="grid"></div> <div id="panelHeader"> Default Editor </div> <div style="padding:10px;" id="editorDiv"> </div> </div> </div> </body> </html>
can you share something more, like error message or code?
Ya the code will not post look at the jsfiddle I just posted.
I also get this error:
When I post the question this is what it looks like:
Rickey,
The issue with that error you posted is that you are calling "initEditing" on "layers-add-result" and thus is is getting called more than once and inside that function you are doing a new editor widget, thus the error.
Robert,
Is this error stopping the dgrid from displaying?
No, you are missing the requires for Query and Memory and are using array instead of arrayUtil
Robert,
I have now added Query and Memory.
I also changed array to arrayUtil in the script.
The fields in dgrid are still not showing up.
Do you have any other suggestions?
Thank you
Rickey,
I am not seeing anything in your post. Did you forget to use the advanced editor and syntax highlighting?
Rickey,
Here is all my corrections:
<!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>Emergency Loc</title> <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; } body { background-color: #fff; overflow: hidden; font-family: Helvetica, san-serif; } #templatePickerPane { width: 225px; overflow: hidden; } #panelHeader { background-color: #92A661; border-bottom: solid 1px #92A860; color: #FFF; font-size: 18px; height: 24px; line-height: 22px; margin: 0; overflow: hidden; padding: 10px 10px 10px 10px; } #map { margin-right: 5px; padding: 0; } .esriEditor .templatePicker { padding-bottom: 5px; padding-top: 5px; height: 500px; border-radius: 0px 0px 4px 4px; border: solid 1px #92A661; } .dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content { position: relative; } .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.15/"></script> <script> var map, grid; require([ "esri/config", "esri/map", "esri/SnappingManager", "esri/dijit/editing/Editor", "esri/layers/FeatureLayer", "esri/tasks/GeometryService", "esri/toolbars/draw", "dojo/keys", "dojo/parser", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "esri/symbols/SimpleFillSymbol", "esri/Color", "dijit/form/Button", "esri/symbols/SimpleMarkerSymbol", "dojo/_base/array", "dojo/i18n!esri/nls/jsapi", "esri/tasks/query", "dojo/store/Memory", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( esriConfig, Map, SnappingManager, Editor, FeatureLayer, GeometryService, Draw, keys, parser, ArcGISDynamicMapServiceLayer, declare, Grid, Selection, SimpleFillSymbol, Color, Button, SimpleMarkerSymbol, arrayUtils, i18n, Query, Memory ) { parser.parse(); //snapping is enabled for this sample - change the tooltip to reflect this i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping"; i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping"; //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic //for details on setting up a proxy page. esriConfig.defaults.io.proxyUrl = "/proxy/"; //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); <!--____________________________________________Dgrid________________________________________________________________--!> var StatesGrid = declare([Grid, Selection]); var columns = [{ label: "", //wasn't able to inject an HTML <div> with image here field: "OBJECTID", formatter: makeZoomButton }, { label: "Location", field: "Location" }, { label: "Call Type", field: "CallType" }]; //restrict sorting to the state name field for (var i = 0; i < columns.length; i++) { if (i == 1) { columns.sortable = true; } else { columns.sortable = false; } } grid = new StatesGrid({ bufferRows: Infinity, columns: columns }, "grid"); <!--____________________________________________Script________________________________________________________________--!> map = new Map("map", { basemap: Layer4, center: [-122.710375, 42.197994], zoom: 14 }); map.on("layers-add-result", initEditing); var Layer4 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/pictometry3inch/MapServer", { opacity: 1 }); map.addLayer(Layer4); var Layer7 = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer", { visible: true, refreshInterval: 0.3 }); Layer7.setVisibleLayers([1]); map.addLayer(Layer7); var operationsPointLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/FeatureServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); map.addLayers([operationsPointLayer]); map.infoWindow.resize(400, 300); function initEditing(event) { var featureLayerInfos = arrayUtils.map(event.layers, function(layer) { return { "featureLayer": layer.layer, "isEditable": true, 'showAttachments': true, "showDeleteButton": false, "fieldInfos": [{ 'fieldName': 'Caller_Name', 'isEditable': false, 'tooltip': 'Caller Name', 'label': 'Caller Name:' }, { 'fieldName': 'Priority', 'isEditable': true, 'tooltip': 'Priority', 'label': 'Priority:' }, { 'fieldName': 'Location', 'isEditable': false, 'label': 'Location:' }, { 'fieldName': 'Phone', 'isEditable': false, 'label': 'Phone:' }, { 'fieldName': 'Notes', 'isEditable': false, 'label': 'Notes:' }, { 'fieldName': 'CallType', 'isEditable': true, 'label': 'CallType:' }] }; }); var settings = { map: map, layerInfos: featureLayerInfos }; var params = { settings: settings }; var editorWidget = new Editor(params, 'editorDiv'); editorWidget.startup(); //snapping defaults to Cmd key in Mac & Ctrl in PC. //specify "snapKey" option only if you want a different key combination for snapping map.enableSnapping(); } <!--____________________________________________Dgrid________________________________________________________________--!> //add the states demographic data var statesLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer/0", { mode: FeatureLayer.MODE_SELECTION, outFields: ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"] }); //create Selection Symbol var highlightSymbol = new SimpleMarkerSymbol({ "color": [0, 112, 255, 255], "size": 10, "angle": 0, "xoffset": 0, "yoffset": 14, "type": "esriSMS", "style": "esriSMSDiamond" }); statesLayer.on("load", function(evt) { var query = new Query(); query.where = "1=1"; query.outFields = ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"]; query.returnGeometry = true; statesLayer.queryFeatures(query, function(featureSet) { var items = arrayUtils.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", "Location"); 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); } }); }, function(error){ console.info(error); }); }); map.addLayer(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; } //center at the selected feature on the map from the row in the data grid function zoomRow(id) { statesLayer.clearSelection(); var query = new Query(); query.objectIds = [id]; console.info(id); statesLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) { //re-centre map to zoom to the selected feature map.centerAt(features[0].geometry); //using centerAt() //map.centerAndZoom(features[0].geometry, 14); //using centerAndZoom() }); } }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" 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" id="templatePickerPane" data-dojo-props="region:'left',width:'180px'"> <div id="grid"></div> <div id="panelHeader"> Default Editor </div> <div style="padding:10px;" id="editorDiv"> </div> </div> </div> </body> </html>
Robert,
Thank you!