Hi Robert,
I'm incorporating your solution above and seem to be having problems calling the grid object. I'm getting the error Cannot read property 'exportGrid' of undefined (see full code below). I can't seem to figure it out. Please help.
Thanks,
James.
<!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>On Premise Account Mapping</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dojox/grid/resources/claroGrid.css">
<style>
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
#rightPane {
padding: 0;
width:250px;
}
button {
display: block;
}
#messages {
padding-top: 40px;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map,tb;
var graphic;
var currLocation;
var watchId;
require([
"esri/map",
"esri/dijit/Search",
"esri/geometry/Point",
"esri/dijit/Legend",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/toolbars/draw",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureFillSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/layers/FeatureLayer",
"esri/graphic",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/InfoTemplate",
"dojox/grid/DataGrid",
"dojo/data/ItemFileReadStore",
"dijit/form/Button",
"dojo/store/Memory",
"dojo/data/ItemFileWriteStore",
"dgrid/OnDemandGrid",
"dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/exporter/CSVWriter",
"dojox/grid/enhanced/plugins/Printer",
"dgrid/Selection",
"dojo/request/iframe",
"dojo/_base/declare",
"dojo/promise/all",
"dojo/_base/array",
"dojo/_base/connect",
"dijit/registry",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"dojo/domReady!"],
function (
Map,
Search,
Point,
Legend,
ArcGISDynamicMapServiceLayer,
Draw,
Color,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
PictureFillSymbol,
CartographicLineSymbol,
FeatureLayer,
Graphic,
Query,
QueryTask,
InfoTemplate,
DataGrid,
ItemFileReadStore,
Button,
Memory,
ItemFileWriteStore,
Grid,
EnhancedGrid,
CSVWriter,
Printer,
Selection,
iframe,
declare,
All,
arrayUtils,
connect,
registry,
dom,
on,
parser) {
var grid, store, dfd;
parser.parse();
// markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));
// lineSymbol used for freehand polyline, polyline and line.
var lineSymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 10,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_MITER, 5);
// fill symbol used for extent, polygon and freehand polygon
var fillSymbol = new SimpleFillSymbol();
map = new Map("mapDiv", {
basemap: "gray",
center: [-118.48, 34.013],
zoom: 2
});
map.on("load", initFunc);
map.on("load", initToolbar);
//add the legend
map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new Legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
});
var featureLayer1 = new FeatureLayer("https://maps.redbull.com/redbullgis/rest/services/Sales/BullMap/MapServer/0", {
mode: FeatureLayer.MODE_SELECTION,
infoTemplate: new InfoTemplate("MA: ${Name}", "${*}"),
outFields: ["*"]
});
var featureLayer2 = new FeatureLayer("https://maps.redbull.com/redbullgis/rest/services/Sales/BullMap/MapServer/2", {
mode: FeatureLayer.MODE_SELECTION,
infoTemplate: new InfoTemplate("NA: ${Name}", "${*}"),
outFields: ["*"]
});
var featureLayer3 = new FeatureLayer("https://maps.redbull.com/redbullgis/rest/services/Sales/BullMap/MapServer/3", {
mode: FeatureLayer.MODE_SELECTION,
infoTemplate: new InfoTemplate("DPM: ${Name}", "${*}"),
outFields: ["*"]
});
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://maps.redbull.com/redbullgis/rest/services/Sales/BullMap/MapServer", {
//"opacity" : 0.5,
//"imageParameters" : imageParameters
});
map.addLayers([featureLayer1, featureLayer2, featureLayer3, dynamicMapServiceLayer]);
function orientationChanged() {
if(map){
map.reposition();
map.resize();
}
}
function initFunc(map) {
if( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
watchId = navigator.geolocation.watchPosition(showLocation, locationError);
} else {
alert("Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API.");
}
initToolbar;
}
function locationError(error) {
//error occurred so stop watchPosition
if( navigator.geolocation ) {
navigator.geolocation.clearWatch(watchId);
}
switch (error.code) {
case error.PERMISSION_DENIED:
alert("Location not provided");
break;
case error.POSITION_UNAVAILABLE:
alert("Current location not available");
break;
case error.TIMEOUT:
alert("Timeout");
break;
default:
alert("unknown error");
break;
}
}
function zoomToLocation(location) {
var pt = new Point(location.coords.longitude, location.coords.latitude);
AddGraphic1(pt);
map.centerAndZoom(pt, 12);
}
function showLocation(location) {
//zoom to the users location and add a graphic
var pt = new Point(location.coords.longitude, location.coords.latitude);
if ( !graphic ) {
AddGraphic1(pt);
} else { // move the graphic if it already exists
graphic.setGeometry(pt);
}
map.centerAt(pt);
}
function AddGraphic1(pt){
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
12,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([210, 105, 30, 0.5]),
8
),
new Color([210, 105, 30, 0.9])
);
graphic = new Graphic(pt, symbol);
map.graphics.add(graphic);
}
function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);
// event delegation so a click handler is not
// needed for each individual button
on(dom.byId("info"), "click", function (evt) {
if (evt.target.id === "info") {
return;
}
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
});
}
function addGraphic(evt) {
//deactivate the toolbar and clear existing graphics
tb.deactivate();
map.enableMapNavigation();
map.graphics.clear();
// figure out which symbol to use
var symbol;
if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = markerSymbol;
} else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;
} else {
symbol = fillSymbol;
}
map.graphics.add(new Graphic(evt.geometry, symbol));
queryMapService(evt.geometry);
}
function queryMapService(Geom) {
var promises = [];
var query = new Query();
query.returnGeometry = false;
query.outFields = ["*"];
query.geometry = Geom;
promises.push(featureLayer1.selectFeatures(query, FeatureLayer.SELECTION_NEW));
promises.push(featureLayer2.selectFeatures(query, FeatureLayer.SELECTION_NEW));
promises.push(featureLayer3.selectFeatures(query, FeatureLayer.SELECTION_NEW));
var allPromises = new All(promises);
allPromises.then(function (r) {
showResults(r);
});
}
function showResults(results) {
var featureLayer1Message = results[0].length;
var featureLayer2Message = results[1].length;
var featureLayer3Message = results[2].length;
var count = 0;
for (var i = 0; i < results.length; i++) {
count = count + results.length;
}
dom.byId("messages").innerHTML = "Total stores selected: <b>" + count + "</b><br> Musketeer: <b>" + featureLayer1Message + "</b><br> National: <b>" + featureLayer2Message + "</b><br> DP Managed: <b>" + featureLayer3Message + "</b>";
//create array of attributes
var items = arrayUtils.map(results, function (result) {
return result;
});
var allItems = [];
arrayUtils.map(items[0], function (item) {
allItems.push(item.attributes);
})
arrayUtils.map(items[1], function (item) {
allItems.push(item.attributes);
})
arrayUtils.map(items[2], function (item) {
allItems.push(item.attributes);
})
var data = {
identifier: "OBJECTID", //This field needs to have unique values
label: "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
items: allItems
};
//Create data store and bind to grid.
store = new ItemFileReadStore({
data: data
});
var grid = registry.byId("grid");
grid.setStore(store);
}
var search = new Search({
map: map
}, "search");
search.startup();
on(dojo.byId("exportAll"), "click", function () {
var fileName = "test"; //dom.byId("grid").value.replace(' ', '_');
grid.exportGrid("csv", function (str) {
if(dfd){
dfd.cancel();
}
dfd = iframe.post("/HttpHandlers/CSVHandler.ashx", {
preventCache: true,
data: {data: str},
query: {filename: fileName + '.csv'}
});
});
});
//dojo Methods
on(dojo.byId("printAll"), "click", function () {
grid.printGrid({
title: "Print Grid",
cssFiles: []
});
});
function clear() {
var newStore = new dojo.data.ItemFileReadStore({
data: {
identifier: "",
items: []
}
});
var grid = dijit.byId("grid");
grid.setStore(newStore);
}
});
</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="mapDiv" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"><div class="calcite" id="search"></div></div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
<table data-dojo-type="dojox/grid/EnhancedGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px', plugins:{printer: true, exporter: true}">
<thead>
<tr>
<th fields="StoreID,store_id" width="100px">Store ID</th>
<th fields="Name,store_name" width="150px">Name</th>
<th fields="Address,store_addr1" width="200px">Address</th>
<th fields="ACV,acv_tier_code">ACV</th>
<th fields="Priority,onprem_store_priority">Priority</th>
<th fields="Status,store_status">Status</th>
<th field="YTDTotalSUs,ts_ytd">YTD Total</th>
</tr>
</thead>
</table>
</div>
<div class="roundedCorners" data-dojo-props="region:'right'" data-dojo-type="dijit.layout.ContentPane" id="rightPane">
<div data-dojo-type="dijit.layout.AccordionContainer">
<div data-dojo-props="title:'Create Territory'" data-dojo-type="dijit.layout.ContentPane" id='graphics'>
<div id="info">
<div>
Select a shape then draw on the map to create a territory
</div><button id="Extent">Rectangle</button> <button id="Circle">Circle</button> <button id="Ellipse">Ellipse</button> <button id="FreehandPolygon">Freehand Polygon</button>
</div>
<div id="messages"></div>
<button data-dojo-type="dijit/form/Button" id="exportAll" type="button">Export all to CSV</button>
<button data-dojo-type="dijit/form/Button" id="printAll" type="button">Print All</button>
</div>
<div data-dojo-props="title:'Legend'" data-dojo-type="dijit/layout/ContentPane" id="legendPane">
<div id="legendDiv"></div>
</div>
</div>
</div>
</div>
</body>
</html>