Rickey,
This is what I have working fine on my dev machine:
<!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="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.15/dojox/layout/resources/ExpandoPane.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;
}
#Editor {
heigh: 30%;
}
#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;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
#LocateButton {
position: absolute;
top: 130px;
left: 20px;
z-index: 50;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
th.dgrid-cell.dgrid-cell-padding.dgrid-column-2.field-Priority.dgrid-sortable {
width: 20%;
}
td.dgrid-cell.dgrid-cell-padding.dgrid-column-2.field-Priority {
width: 20%;
}
#layerListPane {
width: 25%;
}
.esriLayer {
background-color: #fff;
}
.esriLayerList .esriList {
border-top: none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom: none;
}
.esriLayerList .esriList ul {
background-color: #fff;
}
/*css rules for the expand div*/
.esriLayerExpand {
width: 16px;
height: 16px;
float: left;
margin: 12px 0;
}
.esriLayerExpand.expand {
background-image: url(images/v_right.png);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.esriLayerExpand.collapse {
background-image: url(images/v.png);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
/*narrow the margin of the checkbox for aesthetics*/
.esriLayerList .esriCheckbox {
margin: 12px 5px 12px 5px;
}
</style>
<script src="http://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/dom-class",
"dojo/i18n!esri/nls/jsapi",
"esri/tasks/query",
"dojo/store/Memory", "esri/geometry/Extent", "esri/layers/CodedValueDomain", "esri/layers/Domain",
"esri/dijit/HomeButton", "esri/dijit/LocateButton",
"esri/dijit/Search", "esri/dijit/Scalebar", "esri/dijit/LayerList", "dojo/dom-construct", "dojo/dom-style",
"dojo/dom", "dojo/_base/lang", "dojo/on",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojox/layout/ExpandoPane", "dijit/layout/AccordionContainer",
"dojo/domReady!"
], function (
esriConfig, Map, SnappingManager, Editor, FeatureLayer, GeometryService,
Draw, keys, parser, ArcGISDynamicMapServiceLayer, declare, Grid, Selection, SimpleFillSymbol, Color, Button, SimpleMarkerSymbol,
arrayUtils, domClass, i18n, Query, Memory, Extent, CodedValueDomain,
Domain, HomeButton, LocateButton, Search, Scalebar, LayerList, domConstruct, domStyle, dom, lang, on
) {
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");
//var StatesGrid = declare([Grid, Selection]);
//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: "Priority",
field: "Priority"
}, {
label: "Last Contact",
field: "last_edited_date",
formatter: formatlast_edited_date
}
];
grid = new StatesGrid({
bufferRows: Infinity,
columns: columns
}, "grid");
/*____________________________________________Map________________________________________________________________*/
map = new Map("map", {
basemap: "topo",
center: [-122.710375, 42.197994],
zoom: 16
});
/*____________________________________________Home________________________________________________________________*/
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
/*____________________________________________Locate________________________________________________________________*/
geoLocate = new LocateButton({
map: map,
setScale: false,
useTracking: true,
timeout: 15000,
enableHighAccuracy: true
}, "LocateButton");
geoLocate.startup();
/*____________________________________________Search________________________________________________________________*/
var search = new Search({
map: map
}, "search");
search.startup();
map.on("layers-add-result", initEditing);
/*____________________________________________Edit________________________________________________________________*/
function initEditing(event) {
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': true,
'label': 'Notes:'
}, {
'fieldName': 'CallType',
'isEditable': true,
'label': 'CallType:'
}]
};
});
var settings = {
map: map,
layerInfos: featureLayerInfos
};
var params = {
settings: settings
};
editor = new Editor(params, 'editorDiv');
editor.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();
}
search.on("select-result", lang.hitch(this, function () {
console.log(search.value);
//if edit tool is enabled we'll have to delete/create
//so info window behaves correctly.
on.once(this.map.infoWindow, "hide", lang.hitch(this, function () {
search.clearGraphics();
console.log("Cleared Search Graphics");
_destroyEditor();
console.log("Starting Editing Again");
reActivateEditor();
console.log("Complete");
}))
}))
function _destroyEditor() {
if (editor) {
editor.destroy();
console.log("Destroyed editor");
editor = null;
}
}
function reActivateEditor() {
var settings = {
map: map,
layerInfos: featureLayerInfos
};
var params = {
settings: settings
};
editor = new Editor(params, 'editorDiv');
editor.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();
}
/*____________________________________________Scalebar________________________________________________________________*/
var scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "english"
});
/*____________________________________________Script________________________________________________________________*/
domClass.add(map.infoWindow.domNode, "light");
var atlasLayer = new ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/pictometry3inch_jason/MapServer", {
"id": "atlasLayer",
"showAttribution": false
});
var recreationLayer = new ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer", {
"id": "recreationLayer",
"showAttribution": true,
"refreshInterval": 0.038
});
var waterNetLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer", {
"id": "waterNetworkLayer",
"showAttribution": false
})
map.addLayers([atlasLayer, recreationLayer, waterNetLayer]);
var llWidget = new LayerList({
map: map,
layers: [{
layer: atlasLayer,
id: "Ashland Photo",
subLayers: false
}, {
layer: recreationLayer,
id: "Emergency Locations",
subLayers: true
}, {
layer: waterNetLayer,
id: "Water Network layers",
subLayers: true
}],
showOpacitySlider: true,
showLegend: true
}, "layerList");
llWidget.startup();
/*When the LayerList is loaded enhance it to add collapse capabilities*/
llWidget.on('load', function () {
enhanceLayerList();
});
/*Work with all the layers*/
function enhanceLayer(layerNode) {
layerExpand = domConstruct.create('div');
domClass.add(layerExpand, 'esriLayerExpand collapse');
domConstruct.place(layerExpand, layerNode, 'first');
on(layerExpand, 'click', function (evt) {
var LayerNodes = query('.esriLayer');
var SubList = query('.esriSubList', evt.target.parentNode);
if (domClass.contains(evt.target, 'collapse')) {
domClass.replace(evt.target, 'expand', 'collapse');
domStyle.set(SubList[0], 'display', 'none');
} else {
domClass.replace(evt.target, 'collapse', 'expand');
domStyle.set(SubList[0], 'display', '');
}
});
var subListNodes = query('.esriSubListLayer', layerNode);
if (subListNodes.length > 0) {
array.map(subListNodes, function (subListNode) {
enhanceSubList(subListNode);
});
}
}
/*Now work with all the sublayers*/
function enhanceSubList(subLayerNode) {
var subLayerExpand;
var subListNodes = query('.esriSubListLayer', subLayerNode);
if (subListNodes.length > 0) {
subLayerExpand = domConstruct.create('div');
domClass.add(subLayerExpand, 'esriLayerExpand collapse');
domConstruct.place(subLayerExpand, subLayerNode, 'first');
on(subLayerExpand, 'click', function (evt) {
var cState = '';
var subListLayerNodes = query('.esriSubListLayer', evt.target.parentNode);
if (domClass.contains(evt.target, 'collapse')) {
domClass.replace(evt.target, 'expand', 'collapse');
cState = 'collapse';
} else {
domClass.replace(evt.target, 'collapse', 'expand');
cState = 'expand';
}
array.map(subListLayerNodes, function (subListLayerNode) {
if (cState === 'collapse') {
domStyle.set(subListLayerNode, 'display', 'none');
} else {
domStyle.set(subListLayerNode, 'display', 'block');
}
});
});
} else {
subLayerExpand = domConstruct.create('div');
domClass.add(subLayerExpand, 'esriLayerExpand');
domConstruct.place(subLayerExpand, subLayerNode, 'first');
}
}
/*Begin with the individual layers*/
function enhanceLayerList() {
var layerExpand, subLayerExpand;
var LayerNodes = Query('.esriLayer');
arrayUtils.map(LayerNodes, function (layerNode) {
enhanceLayer(layerNode);
});
}
/*____________________________________________AddLayers________________________________________________________________*/
var operationsPointLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
refreshInterval: 0.038
});
map.addLayers([operationsPointLayer]);
map.infoWindow.resize(400, 300);
/*____________________________________________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";
statesLayer.refreshInterval = 0.03;
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) {
var fields = statesLayer.fields;
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", "last_edited_date", " descending: false");
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);
});
statesLayer.clearSelection();
});
map.addLayer(statesLayer);
statesLayer.setRefreshInterval(0.083);
map.on("click", function (evt) {
grid.clearSelection();
});
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='15' height='15'></div>";
return zBtn;
}
//center at the selected feature on the map from the row in the data grid
function zoomRow(id) {
statesLayer.clearSelection();
grid.refresh();
var query = new Query();
query.objectIds = [id];
console.info(id);
statesLayer.selectFeatures(query, FeatureLayer.SELECTION_SUBTRACT, function (features) {
//re-centre map to zoom to the selected feature
if (features.length) {
// re-center the map to the selected feature
map.centerAt(features[0].geometry, 0.9);
} else {
console.log("Feature Layer query returned no features... ", features);
}
});
statesLayer.clearSelection();
}
function formatlast_edited_date(value) {
var inputDate = new Date(value);
return dojo.date.locale.format(inputDate, {
selector: 'date',
datePattern: 'MM/dd/yyyy HH:mm'
});
}
});
</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 id="search"></div>
<div id="HomeButton"></div>
<div id="LocateButton"></div>
</div>
<div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="duration:300, title:'Layer List', splitter:true, region:'right', maxWidth:'220px', startExpanded:false, easeIn:'easing.linear', easeOut:'easing.linear'" style="width:22%;">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
</div>
<div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="duration:300, title:'Calls', splitter:true, region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'" style="width:22%;">
<div data-dojo-type="dijit/layout/ContentPane" id="templatePickerPane" data-dojo-props="region:'left', maxWidth:'220px'" style="width:30%;">
<!--<div id="Editor" >
<div id="panelHeader" style="height:20%;">
Default Editor
</div>-->
<div id="grid" style="height:75%;"></div>
</div>
</div>
</div>
</body>
</html>