I was able to get the issue narrowed down to an issue with the Home Button, Basemap Toggle, and InfoTemplate interferring with the DataGrid. I started out with the DataGrid with zoom button sample code and started entering items until it no longer worked to get to this point. Is there anything that can be done to get those three functions into code with the DataGrid? When I go to insert those three functions, the entire screen except the header is completely blank. I am also trying to get the DataGrid to do an automatic refresh as well, so any help you can give me with that would be appreciated as well.Here is the code I am working with now.
<!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>Cityof Naples Police AVL</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
body,html,#main{margin:0;padding:0;height:100%;width:100%;}
#map{
padding:0;
border:solid 1px;
}
#HomeButton{
position:absolute;
top:90px;
left:20px;
z-index:50;
}
#header{
font-weight:600;
font-size:14pt;
padding-left:20px;
}
#locateContainer{
position:absolute;
right:10px; top:5px;
border-radius:5px;
}
</style>
<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="http://js.arcgis.com/3.8/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
var map, statesLayer;
function init() {
map = new esri.Map("map",{
basemap: "topo",
center: [-81.797, 26.153],
zoom: 12
});
//add the states demographic data
var policeUnits = new esri.layers.ArcGISDynamicMapServiceLayer("http://GIS10204:6080/arcgis/rest/services/GeoEvent/gx440P/MapServer")
map.addLayer(policeUnits);
policeUnits.setRefreshInterval(0.083);
//Address Locator
dojo.connect(dojo.byId("addressInput"), 'onkeyup',function(event){
if(event.keyCode == 13 && this.value.length>0){
locateAddress(this.value);
}
});
function locateAddress(atText){
var l = esri.tasks.Locator('http://gis.naplesgov.com/naplesgis/rest/services/Locators/Naples_Address_Locator/GeocodeServer');
l.outSpatialReference = map.spatialReference;
var params = {address : {'Single Line Input': atText}};
l.addressToLocations(params, function(c){
if(c.length == 0){
alert("No location found at this address");
}
var currentLoc = c[0].location;
map.centerAndZoom(currentLoc,19);
},
function(){
console.log("No location found at this address");
})
}
statesLayer = new esri.layers.FeatureLayer("http://GIS10204:6080/arcgis/rest/services/GeoEvent/gx440P/MapServer/0",{
mode:esri.layers.FeatureLayer.MODE_SELECTION,
outFields:["VehicleId","Velocity","OBJECTID"]
});
//define a selection symbol
var highlightSymbol = new esri.symbol.SimpleMarkerSymbol({
"color":[0,112,255,255],
"size":14,
"angle":0,
"xoffset":0,
"yoffset":0,
"type":"esriSMS",
"style":"esriSMSDiamond",
});
statesLayer.setSelectionSymbol(highlightSymbol);
dojo.connect(statesLayer,'onLoad',function(layer){
var query = new esri.tasks.Query();
query.where = "1=1";
layer.queryFeatures(query,function(featureSet){
var items = dojo.map(featureSet.features,function(feature){
return feature.attributes;
});
var data = {
identifier:"OBJECTID",
items:items};
store = new dojo.data.ItemFileReadStore({data:data});
grid.setStore(store);
grid.setSortIndex(1,"true"); //sort on the state name
});
});
map.addLayers([statesLayer]);
var cityLimits = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.naplesgov.com/naplesgis/rest/services/City/CityLimits/MapServer");
map.addLayer(cityLimits);
var addressPoints = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.naplesgov.com/naplesgis/rest/services/City/AddressPointSlbl/MapServer");
map.addLayer(addressPoints);
//modify the grid so only the STATE_NAME field is sortable
grid.canSort = function(col){ if(Math.abs(col) == 2) { return true; } else { return false; } };
}
function pointToExtent(map, pointX, pointY){
var xmin = pointX - 100;
var ymin = pointY - 100;
var xmax = pointX + 100;
var ymax = pointY + 100;
return new esri.geometry.Extent(xmin, ymin, xmax, ymax, map.spatialReference)
}
function makeZoomButton(id){
var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='images/zoom.png'";
zBtn = zBtn + " width='18' height='18'";
zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
return zBtn;
}
function zoomRow(id){
statesLayer.clearSelection();
var query = new esri.tasks.Query();
query.objectIds = [id];
statesLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){
//zoom to the selected feature
extent = pointToExtent(map, features[0].geometry.x, features[0].geometry.y)
map.setExtent(extent);
});
}
//function(DataGrid, ItemFileWriteStore){
//if policeUnits.setRefreshInterval()==true;
//var newStore = new ItemFileReadStore({data: {data});
//var grid = dijit.byId("gridId");
//grid.setStore(newStore);
//};
//}
dojo.ready(init);
</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 data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'">City of Naples Police AVL
<div id="locateContainer">
<label>Address: </label>
<input id='addressInput'>
</div>
</div>
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" >
<div id="HomeButton"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width:142px">
<table data-dojo-type="dojox.grid.DataGrid" jsid="grid" id="grid" selectionMode="none">
<thead>
<tr>
<th field="OBJECTID" formatter="makeZoomButton" width="25px">
<img alt="+" src="images/zoom.png"/>
</th>
<th field="VehicleId" width="100px">Vehicle Id</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
.png "JonathanUihlein"){kind=avatar}
