From 8dba754d31c5805972316a29e82e1325af858507 Mon Sep 17 00:00:00 2001
From: Stephen Sporik <ssporik@spatialsys.com>
Date: Mon, 4 May 2015 18:18:49 -0400
Subject: [PATCH 1/5] Zoom Icon in Query Grid

---
 .../src/modules/core/configuration/app.js     |  2 +-
 .../src/modules/core/query/querying.js        | 44 ++++++++++++++-----
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/basicviewer/src/modules/core/configuration/app.js b/basicviewer/src/modules/core/configuration/app.js
index 95bfc9d..926e414 100644
--- a/basicviewer/src/modules/core/configuration/app.js
+++ b/basicviewer/src/modules/core/configuration/app.js
@@ -15,7 +15,7 @@ define(["dojo/_base/declare", "dojox/html/entities", "dojo/_base/lang", "dojo/Ev
                     //The ID for a web map from ArcGIS Online (AGO)
                     //If not going to specify a Web Map in AGO, then use empty quotes ("") here
                  
-					webmap: "d1201eea7afb4ed49f08a310e9803f2f",      //"blank" default map; an OpenStreetMap basemap
+					webmap: "1d6cee2d8c7145b79f45d96fd454e07b",      //"blank" default map; an OpenStreetMap basemap
 					//Some sample web maps to try for testing:
                     //webmap: "252fb36ac7404043a0f3d2022958b5d0",    //veterans services
                     //webmap: "c545bf8fde0a46c2aa52a10e9118750a",  //growthprint
diff --git a/basicviewer/src/modules/core/query/querying.js b/basicviewer/src/modules/core/query/querying.js
index 0547372..a860bd4 100644
--- a/basicviewer/src/modules/core/query/querying.js
+++ b/basicviewer/src/modules/core/query/querying.js
@@ -7,10 +7,10 @@
 define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dijit/layout/ContentPane", "dojo/data/ItemFileWriteStore", "dojox/grid/DataGrid"
     , "dojox/grid/EnhancedGrid", "dojo/data/ItemFileWriteStore", "dojox/grid/enhanced/plugins/exporter/CSVWriter", "dojox/grid/enhanced/plugins/NestedSorting", "../utilities/maphandler", "dojo/_base/lang", "dijit/registry", "dojo/html", "dojo/dom", "dojo/on", "dijit/form/Button", "esri/request", "dojo/dnd/move"
     , "esri/toolbars/draw", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dojox/layout/FloatingPane"
-    , "jquery", "dojox/widget/Standby", "dojo/dom-construct", "esri/tasks/query", "dojo/_base/connect", "../utilities/environment", "dojo/text!./templates/querying.html"],
+    , "jquery", "dojox/widget/Standby", "dojo/dom-construct", "esri/tasks/query", "dojo/_base/connect", "dojo/query", "../utilities/environment", "dojo/text!./templates/querying.html"],
     function (declare, WidgetBase, dom, json, ContentPane, ItemFileWriteStore, DataGrid, EnhancedGrid, ItemFileWriteStore, CSVWriter, NestedSorting, mapHandler, lang, registry, html, dom, on, Button, esriRequest, move
         , Draw, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FloatingPane
-        , $, Standby, domConstruct, Query, connect, environment, template) {
+        , $, Standby, domConstruct, Query, connect, dojoquery, environment, template) {
         return declare([WidgetBase, ContentPane], {
             // The template HTML fragment (as a string, created in dojo/text definition above)
             templateString: template
@@ -351,6 +351,12 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                         var layout = [];
                         var identifierVar = results.objectIdFieldName;
                         /*set up layout*/
+                        //set first column to magnifying glass icon
+                        layout.push({ 'name': "Zoom To", 'field': "", 'formatter': lang.hitch(this, "_renderCell")});
+
+
+
+
                         for (var j = 0; j < results.fields.length; j++) {
                             if (results.fields[j].type == "esriFieldTypeOID") {
                                identifierVar = results.fields[j].name;
@@ -371,16 +377,20 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                         /*create a new grid*/
 						
                        //var grid = new DataGrid({
-					    var grid = new dojox.grid.EnhancedGrid({ 
+					    var grid = new EnhancedGrid({
 							id: 'grid',
                             store: store,
                             structure: layout,
+                            autoHeight: true,
+                            autoWidth: true,
 							rowSelector: '20px',  //width of the row selector at the beginning of a row
+                            escapeHTMLinData: true,
 							plugins: {
 								exporter: true,
 								nestedSorting: true								
 								}
                         });
+
 						
 						grid.setStore(store);
 			
@@ -483,19 +493,13 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
 																	//download.click();  // This will download the data file named "iMap_Results.csv".
 							});					
 						});
-						
-						
-						
-						grid.set('autoHeight', true);
-						grid.set('autoWidth', false);
+
 						grid.update();
 						/*Call startup() to render the grid*/
 						grid.startup();
 						/*append the new grid to the div*/
 						grid.placeAt("subContainer");
-						
-                        
-						
+
 						dijit.byId('grid').resize();
                         dijit.byId('grid').update();
 						
@@ -507,6 +511,12 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
 						
                         /*Call startup() to render the grid*/
                         grid.startup();
+
+                        //use dojo/query to set a click event for all elements in the class "zoomImg",  this enables using dojo/on for all elements at once.
+                        //this must be done AFTER the grid is rendered with results and the zoom icons exist in the DOM.
+                        dojoquery(".zoomImg").on("click", lang.hitch(this, function(e){
+                            this._zoomToFeature(e);
+                        }));
 						
 						//document.getElementById("subContainer").style.height = (dojo.byId('floatingPane').offsetHeight - 80).toString() + "px";  
                        
@@ -607,6 +617,18 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                     }).appendTo(cboBox);
                 }
             }
+            , _renderCell: function(item){
+                var img = "<img src = 'assets/zoom.png' class='zoomImg' style='cursor: pointer'/>";
+                return img;
+            }
+
+            , _zoomToFeature: function(item){
+                //get graphic results layer
+
+                //query layer for OID
+
+                //zoom to graphic
+            }
 
         });
     });

From 7022d61800a88bad01209e3c9ad4f5d5d5493682 Mon Sep 17 00:00:00 2001
From: Stephen Sporik <ssporik@spatialsys.com>
Date: Tue, 5 May 2015 19:31:43 -0400
Subject: [PATCH 2/5] Zooming to Graphic

---
 .../src/modules/core/query/querying.js        | 569 +++++++++++-------
 1 file changed, 340 insertions(+), 229 deletions(-)

diff --git a/basicviewer/src/modules/core/query/querying.js b/basicviewer/src/modules/core/query/querying.js
index a860bd4..a57fadf 100644
--- a/basicviewer/src/modules/core/query/querying.js
+++ b/basicviewer/src/modules/core/query/querying.js
@@ -5,12 +5,14 @@
 * connector (dojo/aspect) does not obtain the proper callback parameters.
 */
 define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dijit/layout/ContentPane", "dojo/data/ItemFileWriteStore", "dojox/grid/DataGrid"
-    , "dojox/grid/EnhancedGrid", "dojo/data/ItemFileWriteStore", "dojox/grid/enhanced/plugins/exporter/CSVWriter", "dojox/grid/enhanced/plugins/NestedSorting", "../utilities/maphandler", "dojo/_base/lang", "dijit/registry", "dojo/html", "dojo/dom", "dojo/on", "dijit/form/Button", "esri/request", "dojo/dnd/move"
-    , "esri/toolbars/draw", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dojox/layout/FloatingPane"
-    , "jquery", "dojox/widget/Standby", "dojo/dom-construct", "esri/tasks/query", "dojo/_base/connect", "dojo/query", "../utilities/environment", "dojo/text!./templates/querying.html"],
-    function (declare, WidgetBase, dom, json, ContentPane, ItemFileWriteStore, DataGrid, EnhancedGrid, ItemFileWriteStore, CSVWriter, NestedSorting, mapHandler, lang, registry, html, dom, on, Button, esriRequest, move
-        , Draw, Graphic, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FloatingPane
-        , $, Standby, domConstruct, Query, connect, dojoquery, environment, template) {
+    , "dojox/grid/EnhancedGrid", "dojo/data/ItemFileWriteStore", "dojox/grid/enhanced/plugins/exporter/CSVWriter", "dojox/grid/enhanced/plugins/NestedSorting", "dojox/grid/enhanced/plugins/Selector", "../utilities/maphandler", "dojo/_base/lang", "dijit/registry", "dojo/html", "dojo/dom", "dojo/on", "dijit/form/Button", "esri/request", "dojo/dnd/move"
+    , "esri/toolbars/draw", "esri/graphic", "esri/geometry/Multipoint", "esri/geometry/Polygon", "esri/geometry/Polyline", "esri/SpatialReference"
+    , "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dojox/layout/FloatingPane"
+    , "jquery", "dojox/widget/Standby", "dojo/dom-construct", "esri/tasks/query", "dojo/_base/connect", "dojo/query", "dojo/_base/array", "../utilities/environment", "dojo/text!./templates/querying.html"],
+    function (declare, WidgetBase, dom, json, ContentPane, ItemFileWriteStore, DataGrid, EnhancedGrid, ItemFileWriteStore, CSVWriter, NestedSorting, Selector, mapHandler, lang, registry, html, dom, on, Button, esriRequest, move
+        , Draw, Graphic,  Multipoint, Polygon, Polyline, SpatialReference
+        , SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FloatingPane
+        , $, Standby, domConstruct, Query, connect, dojoquery, arrayUtil, environment, template) {
         return declare([WidgetBase, ContentPane], {
             // The template HTML fragment (as a string, created in dojo/text definition above)
             templateString: template
@@ -19,8 +21,8 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
             , toolbar: null
             // Once a tree has been created and before switching to another, store it here to use again later if needed (_switchTree)
             /* an item in the list looks like
-            {index: <corresponding to _layersJsonLoc index>, store: <MemoryStore>, model: <ObjectStoreModel>, tree: <dijit/tree>}
-            */
+             {index: <corresponding to _layersJsonLoc index>, store: <MemoryStore>, model: <ObjectStoreModel>, tree: <dijit/tree>}
+             */
             //Available for parent to know if add data contents have been created
             , ContentsCreated: false
             , _paneStandby: null
@@ -29,6 +31,8 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
             , _subCbo: null
             , _fieldsCbo: null
             , _fieldArray: null
+            , _resultsGrid: null
+            , _identifierVar: null
 
 
             //The event handlers below are not needed, unless for custom code.  They are here for reference.
@@ -48,7 +52,7 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
             //The dojo accordion, which this module inherits from, has been created and is accessible (though not actually shown yet)
             , startup: function () {
                 this.inherited(arguments);
-                this._paneStandby = new Standby({ target: this.id });
+                this._paneStandby = new Standby({target: this.id});
                 document.body.appendChild(this._paneStandby.domNode);
 
                 //create a results graphics layer and add to the map
@@ -73,9 +77,15 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                         //if not, create a title out of the ID
                         layerName = layerName.replace(/_/g, " ");
                         //push layer id, url, name and type
-                        layers.push({ id: mapvariable.id, name: layerName, url: mapvariable.url, type: mapvariable.type });
+                        layers.push({
+                            id: mapvariable.id,
+                            name: layerName,
+                            url: mapvariable.url,
+                            type: mapvariable.type
+                        });
                         mapServices.push(mapvariable.url);
-                    };
+                    }
+                    ;
                 }
                 //get the graphics layers, first compare with mapservices already processed (to weed out popup feature layers)
                 for (var j = 0; j < this.map.graphicsLayerIds.length; j++) {
@@ -83,8 +93,14 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                     // if it's a feature layer and not another graphics layer, and it doesn't match a current layer
                     if (mapvariable.type == "Feature Layer" && mapServices.indexOf(mapvariable.url.replace("/" + mapvariable.layerId, "")) == -1) {
                         //add the layer id, name, url, and type to the array
-                        layers.push({ id: mapvariable.id, name: mapvariable.name, url: mapvariable.url, type: mapvariable.type });
-                    };
+                        layers.push({
+                            id: mapvariable.id,
+                            name: mapvariable.name,
+                            url: mapvariable.url,
+                            type: mapvariable.type
+                        });
+                    }
+                    ;
                 }
 
                 //set the global variable to this combo box for later use
@@ -97,11 +113,18 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
 
                 if (layers.length != 0) {
                     //sets up the services in the map that the user can query off of
-                    $('<option />', { text: "Select a service", selected: true, style: "display:none" }).appendTo(this._layerCbo);
+                    $('<option />', {
+                        text: "Select a service",
+                        selected: true,
+                        style: "display:none"
+                    }).appendTo(this._layerCbo);
                     this._createCobos(this._layerCbo, layers, "name", "url");
                 } else {
                     //if no available services to query on, show this to user
-                    this._createCobos(this._layerCbo, [{ name: "You are unable to query this maps layers", url: "none"}], "name", "url");
+                    this._createCobos(this._layerCbo, [{
+                        name: "You are unable to query this maps layers",
+                        url: "none"
+                    }], "name", "url");
                     $('#serviceCbo').prop('disabled', 'disabled');
                 }
                 //on change of the service, get the layers for that service
@@ -166,28 +189,28 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                 this.toolbar.deactivate();
                 //shows or hides spatial vs attribute querying
                 var qType = document.getElementsByName("queryType");
-				if (qType[0].checked == true){
-						dojo.style("spatialQueryDiv", "display", "none");
-						dojo.style("stringQueryDiv", "display", "block");
-				} else if (qType[1].checked == true){
-					dojo.style("spatialQueryDiv", "display", "block");
-					dojo.style("stringQueryDiv", "display", "none");
-				}
-				
+                if (qType[0].checked == true) {
+                    dojo.style("spatialQueryDiv", "display", "none");
+                    dojo.style("stringQueryDiv", "display", "block");
+                } else if (qType[1].checked == true) {
+                    dojo.style("spatialQueryDiv", "display", "block");
+                    dojo.style("stringQueryDiv", "display", "none");
+                }
+
                 /* 	This code does not work in IE... 
-				for (var elem in qType) {
-                    //if an element is checked:
-                    if (qType[elem].checked) {
-                        //if string query, then display that div and hide the spatial and vice versa
-                        if (qType[elem].value == "stringQuery") {
-                            dojo.style("spatialQueryDiv", "display", "none");
-                            dojo.style("stringQueryDiv", "display", "block");
-                        } else if (qType[elem].value == "spatialQuery") {
-                            dojo.style("spatialQueryDiv", "display", "block");
-                            dojo.style("stringQueryDiv", "display", "none");
-                        }
-                    };
-                } */
+                 for (var elem in qType) {
+                 //if an element is checked:
+                 if (qType[elem].checked) {
+                 //if string query, then display that div and hide the spatial and vice versa
+                 if (qType[elem].value == "stringQuery") {
+                 dojo.style("spatialQueryDiv", "display", "none");
+                 dojo.style("stringQueryDiv", "display", "block");
+                 } else if (qType[elem].value == "spatialQuery") {
+                 dojo.style("spatialQueryDiv", "display", "block");
+                 dojo.style("stringQueryDiv", "display", "none");
+                 }
+                 };
+                 } */
             }
 
             , _spatialQuerying: function (type) {
@@ -206,7 +229,8 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                 var qTaskURL = this._layerCbo.value;
                 if (dojo.getStyle('layerDiv', "display") != "none") {
                     qTaskURL += "/" + this._subCbo.value;
-                };
+                }
+                ;
                 var queryTask = new esri.tasks.QueryTask(qTaskURL);
                 var query = new esri.tasks.Query();
                 query.geometry = evt.geometry;
@@ -228,18 +252,25 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
 
                     var subLayers = [];
                     if (serviceJSON.layers) {
-                        $('<option />', { text: "Select a layer", selected: true, style: "display:none" }).appendTo(this._subCbo);
+                        $('<option />', {
+                            text: "Select a layer",
+                            selected: true,
+                            style: "display:none"
+                        }).appendTo(this._subCbo);
                         for (var j = 0; j < serviceJSON.layers.length; j++) {
                             if (serviceJSON.layers[j].subLayerIds == null) {
                                 this._jsonGet(layerURL + "/" + serviceJSON.layers[j].id, lang.hitch(this, function (lyrResp) {
                                     if (lyrResp.type == "Raster Layer") {
-                                        $('<option disabled />', { text: lyrResp.name, value: lyrResp.id }).appendTo(this._subCbo);
+                                        $('<option disabled />', {
+                                            text: lyrResp.name,
+                                            value: lyrResp.id
+                                        }).appendTo(this._subCbo);
                                     } else {
-                                        $('<option />', { text: lyrResp.name, value: lyrResp.id }).appendTo(this._subCbo);
+                                        $('<option />', {text: lyrResp.name, value: lyrResp.id}).appendTo(this._subCbo);
                                     }
                                 }));
                             } else {
-                                $('<optgroup />', { label: serviceJSON.layers[j].name }).appendTo(this._subCbo);
+                                $('<optgroup />', {label: serviceJSON.layers[j].name}).appendTo(this._subCbo);
                             }
 
                         }
@@ -263,12 +294,18 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                     for (var j = 0; j < layerJSON.fields.length; j++) {
                         if (layerJSON.fields[j].type == "esriFieldTypeString") {
                             fields.push(layerJSON.fields[j]);
-                        };
-                    };
+                        }
+                        ;
+                    }
+                    ;
                     $('#serviceCbo').prop('disabled', 'disabled');
                     $('#layerCbo').prop('disabled', 'disabled');
                     $('#fieldCbo').empty();
-                    $('<option />', { text: "Select a field", selected: true, style: "display:none" }).appendTo(this._fieldCbo);
+                    $('<option />', {
+                        text: "Select a field",
+                        selected: true,
+                        style: "display:none"
+                    }).appendTo(this._fieldCbo);
                     this._createCobos(this._fieldCbo, fields, "name", "name");
                     this._fieldArray = fields;
                     $('#fieldCbo').unbind('change');
@@ -285,9 +322,9 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
 
             , _addInFieldMath: function (field) {
                 dojo.empty('fieldMath');
-                var eqlabel = dojo.create('p', { innerHTML: "Type in a value to match possible values in the field that you selected above.  For example, if the field is &quot;City&quot;, you might type in &quot;Annapolis&quot; or even &quot;anna&quot;." });  //innerHTML: "="
+                var eqlabel = dojo.create('p', {innerHTML: "Type in a value to match possible values in the field that you selected above.  For example, if the field is &quot;City&quot;, you might type in &quot;Annapolis&quot; or even &quot;anna&quot;."});  //innerHTML: "="
                 dojo.place(eqlabel, "fieldMath", "last");
-                var intText = dojo.create('input', { id: "fieldValue" });
+                var intText = dojo.create('input', {id: "fieldValue"});
                 dojo.place(intText, "fieldMath", "last");
                 dojo.removeClass("queryBtn", "btnSelected");
                 //                if (field.type == "esriFieldTypeInteger") {
@@ -306,7 +343,8 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                     var qTaskURL = this._layerCbo.value;
                     if (dojo.getStyle('layerDiv', "display") != "none") {
                         qTaskURL += "/" + this._subCbo.value;
-                    };
+                    }
+                    ;
                     var queryTask = new esri.tasks.QueryTask(qTaskURL);
                     var query = new esri.tasks.Query();
                     //use this query for the user to find values based on exact input
@@ -314,7 +352,7 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                     //uset this query for the user to find values based on exact or similar input --very useful
                     //query.where = this._fieldCbo.value.toUpperCase() + " like '%" + dojo.byId('fieldValue').value.toUpperCase() + "%'";
                     query.where = "UPPER(\"" + this._fieldCbo.value + "\")" + " like \'%" + dojo.byId('fieldValue').value.toUpperCase() + "%\'";
-					//query.where = this._fieldCbo.value + " like '%" + dojo.byId('fieldValue').value + "%'";
+                    //query.where = this._fieldCbo.value + " like '%" + dojo.byId('fieldValue').value + "%'";
                     query.outFields = ["*"];
                     query.returnGeometry = true;
                     query.outSpatialReference = this.map.spatialReference;
@@ -340,28 +378,26 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                         case "esriGeometryPolygon":
                             symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 3), new dojo.Color([255, 255, 0, 0.50]));
                             break;
-                    } 
+                    }
 
 
                     if ((symbol != null) && (!dijit.byId('grid'))) {
                         for (var i = 0; i < results.features.length; i++) {
-                            var graphic = new esri.Graphic(results.features[i].geometry, symbol);
+                            var graphic = new Graphic(results.features[i].geometry, symbol, results.features[i].attributes);
                             resultsLayer.add(graphic);
                         }
                         var layout = [];
-                        var identifierVar = results.objectIdFieldName;
+                        this._identifierVar = results.objectIdFieldName;
                         /*set up layout*/
                         //set first column to magnifying glass icon
-                        layout.push({ 'name': "Zoom To", 'field': "", 'formatter': lang.hitch(this, "_renderCell")});
-
-
+                        layout.push({'name': "Zoom To", 'field': "", 'formatter': lang.hitch(this, "_renderCell")});
 
 
                         for (var j = 0; j < results.fields.length; j++) {
                             if (results.fields[j].type == "esriFieldTypeOID") {
-                               identifierVar = results.fields[j].name;
+                                this._identifierVar = results.fields[j].name;
                             } else if (results.fields[j].name.indexOf("shape") == -1) {
-                                layout.push({ 'name': results.fields[j].alias, 'field': results.fields[j].name });
+                                layout.push({'name': results.fields[j].alias, 'field': results.fields[j].name});
                             }
 
                         }
@@ -369,207 +405,221 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             return feature.attributes;
                         });
                         var data = {
-                            identifier: identifierVar,
+                            identifier: this._identifierVar,
                             items: items
                         };
-                        var store = new ItemFileWriteStore({ data: data });
-			
+                        var store = new ItemFileWriteStore({data: data});
+
                         /*create a new grid*/
-						
-                       //var grid = new DataGrid({
-					    var grid = new EnhancedGrid({
-							id: 'grid',
+
+                        //var grid = new DataGrid({
+                        this._resultsGrid = new EnhancedGrid({
+                            id: 'grid',
                             store: store,
                             structure: layout,
                             autoHeight: true,
                             autoWidth: true,
-							rowSelector: '20px',  //width of the row selector at the beginning of a row
+                            rowSelector: '20px',  //width of the row selector at the beginning of a row
                             escapeHTMLinData: true,
-							plugins: {
-								exporter: true,
-								nestedSorting: true								
-								}
+                            plugins: {
+                                exporter: true,
+                                nestedSorting: true,
+                                selector: {
+                                    row: true,
+                                    cell: false,
+                                    col: false
+                                }
+                            }
                         });
 
-						
-						grid.setStore(store);
-			
-						// sort on the city name; city is column; columns begin with 0  
-						//grid.setSortIndex(4,"true"); 				
-						//modify the grid so only the city field is sortable
-						//grid.canSort = function(col){ if(Math.abs(col) == 5) { return true; } else { return false; } };
-						//console.log(grid); 
-
-/* 					  	for Zoom ID button https://developers.arcgis.com/en/javascript/jssamples/fl_zoomgrid.html
-						function makeZoomButton(id){
-						var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='../../../../assets/zoom.png'";
-						zBtn = zBtn + " width='18' height='18'";
-						zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
-						return zBtn;
-						}
-
-						function zoomRow(id){
-						resultsLayer.clearSelection();
-						var query = new esri.tasks.Query();
-						query.objectIds = [id];
-						results.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){
-						  //zoom to the selected feature
-						  var resultsExtent = features[0].geometry.getExtent().expand(5.0);
-						  map.setExtent(resultsExtent);
-							});
-						}
- */						
-						
-						
-						//for exporting all rows of query results
-						 function exportAll(){
-							dijit.byId("grid").exportGrid("csv", function(str){
-								/* dojo.xhrPost({
-									url: 'csv.ashx',
-									load: function(tempUrl) {
-										window.open(tempUrl, "_new");
-									}
-								});
-							});
-						};	 */
-							dojo.byId("output").value = str;
-							});
-						};
-
-						//for exporting user selected rows of query results
-						function exportSelected(){
-							var str = dijit.byId("grid").exportSelected("csv");
-							dojo.byId("output").value = str;
-						};
-				
-						var t = setTimeout(function(){
-							dojo.query('.displayRowCount')[0].innerHTML = grid.rowCount;
-						},500);
-						
-						
-						
-						domConstruct.create('div', { id: "floatingPane" }, 'map');
-							domConstruct.create('div', { id: "subContainer"}, "floatingPane");
-								domConstruct.create('div', { id: "rowCountContainer", innerHTML: "Number of Features: <span class='displayRowCount'></span><br />"}, "subContainer");
-								// This hidden area is needed for "output" before the CSV file could be downloaded
-								var exContainer = domConstruct.create('div', { id: "exportInfoContainer", innerHTML: "<textarea type='hidden' id='output' style='display:none;'>stuff</textarea>"}, "subContainer"); 
-								
-						
-						var exBtnAll = domConstruct.create('button', { id: 'exportButton', innerHTML: "Export All Rows to CSV" });
-						domConstruct.place(exBtnAll, exContainer, "first");
-						
-						on(exBtnAll, "click", function(){
-							dijit.byId("grid").exportGrid("csv", function(str){
-								dojo.byId("output").value = str;
-								
-								/*  The "url variable gets the full path within the exact website.	
-									For instance, if the website is "MyWebsite" and the csv.ashx file is in "source" and then "modules"
-									the url would be "source/modules/csv.ashx
-									
-									Also note "web.config" file would be under "MyWebsite"
-								*/
-								var url = "src/modules/core/query/csv.ashx";
-								
-								var HiddenForm = domConstruct.create('form', { id: "downloadform", innerHTML: "<method='post' action='' " + 
-									"style='height: 0px; width: 0px; display: none;' " +
-									"class='dlform' target='_blank'> " +
-									"<input type='hidden' name='report' class='ri' id='reportinput' value='' /> " +
-									"<input type='hidden' name='filename' class='fn' id='filename' value='' />" });		// +
-									
-								domConstruct.place(HiddenForm, subContainer, "last");				
-								var f = dojo.byId("downloadform");
-								f.action = url;
-								dojo.byId("reportinput").value = str;
-								f.submit();				
-															
-								// This code works with HTML5 and only in Chrome for downloading file
-																	//console.log(str);
-																	      //var encodedUri = encodeURI(str);
-								//alert(str); // for testing
-																	//var download = document.createElement('a');
-																	//download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(str));
-																	//download.setAttribute('download', 'iMap_Results.csv');
-								    
-																	//download.click();  // This will download the data file named "iMap_Results.csv".
-							});					
-						});
-
-						grid.update();
-						/*Call startup() to render the grid*/
-						grid.startup();
-						/*append the new grid to the div*/
-						grid.placeAt("subContainer");
-
-						dijit.byId('grid').resize();
+
+                        this._resultsGrid.setStore(store);
+
+                        // sort on the city name; city is column; columns begin with 0
+                        //grid.setSortIndex(4,"true");
+                        //modify the grid so only the city field is sortable
+                        //grid.canSort = function(col){ if(Math.abs(col) == 5) { return true; } else { return false; } };
+                        //console.log(grid);
+
+                        /* 					  	for Zoom ID button https://developers.arcgis.com/en/javascript/jssamples/fl_zoomgrid.html
+                         function makeZoomButton(id){
+                         var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='../../../../assets/zoom.png'";
+                         zBtn = zBtn + " width='18' height='18'";
+                         zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
+                         return zBtn;
+                         }
+
+                         function zoomRow(id){
+                         resultsLayer.clearSelection();
+                         var query = new esri.tasks.Query();
+                         query.objectIds = [id];
+                         results.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){
+                         //zoom to the selected feature
+                         var resultsExtent = features[0].geometry.getExtent().expand(5.0);
+                         map.setExtent(resultsExtent);
+                         });
+                         }
+                         */
+
+
+                        //for exporting all rows of query results
+                        function exportAll() {
+                            dijit.byId("grid").exportGrid("csv", function (str) {
+                                /* dojo.xhrPost({
+                                 url: 'csv.ashx',
+                                 load: function(tempUrl) {
+                                 window.open(tempUrl, "_new");
+                                 }
+                                 });
+                                 });
+                                 };	 */
+                                dojo.byId("output").value = str;
+                            });
+                        };
+
+                        //for exporting user selected rows of query results
+                        function exportSelected() {
+                            var str = dijit.byId("grid").exportSelected("csv");
+                            dojo.byId("output").value = str;
+                        };
+
+                        var t = setTimeout(lang.hitch(this, function () {
+                            dojoquery('.displayRowCount')[0].innerHTML = this._resultsGrid.rowCount;
+                        }, 500));
+
+
+                        domConstruct.create('div', {id: "floatingPane"}, 'map');
+                        domConstruct.create('div', {id: "subContainer"}, "floatingPane");
+                        domConstruct.create('div', {
+                            id: "rowCountContainer",
+                            innerHTML: "Number of Features: <span class='displayRowCount'></span><br />"
+                        }, "subContainer");
+                        // This hidden area is needed for "output" before the CSV file could be downloaded
+                        var exContainer = domConstruct.create('div', {
+                            id: "exportInfoContainer",
+                            innerHTML: "<textarea type='hidden' id='output' style='display:none;'>stuff</textarea>"
+                        }, "subContainer");
+
+
+                        var exBtnAll = domConstruct.create('button', {
+                            id: 'exportButton',
+                            innerHTML: "Export All Rows to CSV"
+                        });
+                        domConstruct.place(exBtnAll, exContainer, "first");
+
+                        on(exBtnAll, "click", function () {
+                            dijit.byId("grid").exportGrid("csv", function (str) {
+                                dojo.byId("output").value = str;
+
+                                /*  The "url variable gets the full path within the exact website.
+                                 For instance, if the website is "MyWebsite" and the csv.ashx file is in "source" and then "modules"
+                                 the url would be "source/modules/csv.ashx
+
+                                 Also note "web.config" file would be under "MyWebsite"
+                                 */
+                                var url = "src/modules/core/query/csv.ashx";
+
+                                var HiddenForm = domConstruct.create('form', {
+                                    id: "downloadform", innerHTML: "<method='post' action='' " +
+                                    "style='height: 0px; width: 0px; display: none;' " +
+                                    "class='dlform' target='_blank'> " +
+                                    "<input type='hidden' name='report' class='ri' id='reportinput' value='' /> " +
+                                    "<input type='hidden' name='filename' class='fn' id='filename' value='' />"
+                                });		// +
+
+                                domConstruct.place(HiddenForm, subContainer, "last");
+                                var f = dojo.byId("downloadform");
+                                f.action = url;
+                                dojo.byId("reportinput").value = str;
+                                f.submit();
+
+                                // This code works with HTML5 and only in Chrome for downloading file
+                                //console.log(str);
+                                //var encodedUri = encodeURI(str);
+                                //alert(str); // for testing
+                                //var download = document.createElement('a');
+                                //download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(str));
+                                //download.setAttribute('download', 'iMap_Results.csv');
+
+                                //download.click();  // This will download the data file named "iMap_Results.csv".
+                            });
+                        });
+
+                        this._resultsGrid.update();
+                        /*Call startup() to render the grid*/
+                        this._resultsGrid.startup();
+                        /*append the new grid to the div*/
+                        this._resultsGrid.placeAt("subContainer");
+
+                        dijit.byId('grid').resize();
                         dijit.byId('grid').update();
-						
-						/* dojo.forEach(grid.layout.cells, function(cell,idx){
-							grid.setCellWidth(idx, "70px");
-							cell.view.update();
-						});  */
-						
-						
+
+                        /* dojo.forEach(grid.layout.cells, function(cell,idx){
+                         grid.setCellWidth(idx, "70px");
+                         cell.view.update();
+                         });  */
+
+
                         /*Call startup() to render the grid*/
-                        grid.startup();
+                        this._resultsGrid.startup();
 
                         //use dojo/query to set a click event for all elements in the class "zoomImg",  this enables using dojo/on for all elements at once.
                         //this must be done AFTER the grid is rendered with results and the zoom icons exist in the DOM.
-                        dojoquery(".zoomImg").on("click", lang.hitch(this, function(e){
+                        dojoquery(".zoomImg").on("click", lang.hitch(this, function (e) {
                             this._zoomToFeature(e);
                         }));
-						
-						//document.getElementById("subContainer").style.height = (dojo.byId('floatingPane').offsetHeight - 80).toString() + "px";  
-                       
+
+                        //document.getElementById("subContainer").style.height = (dojo.byId('floatingPane').offsetHeight - 80).toString() + "px";
+
                         var ConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {
                             postCreate: function () {
                                 this.inherited(arguments);
-									this.moveable = new dojo.dnd.move.constrainedMoveable(
-										this.domNode, {
-											handle: this.focusNode,
-											constraints: function () {
-												var coordsBody = dojo.coords(dojo.body());
-												// or
-												var coordsWindow = {
-													l: 0,
-													t: 0,
-													w: window.innerWidth,
-													h: window.innerHeight
-												};
-
-												return coordsWindow;
-											},
-											within: true
-										}
-									);
-							}
+                                this.moveable = new dojo.dnd.move.constrainedMoveable(
+                                    this.domNode, {
+                                        handle: this.focusNode,
+                                        constraints: function () {
+                                            var coordsBody = dojo.coords(dojo.body());
+                                            // or
+                                            var coordsWindow = {
+                                                l: 0,
+                                                t: 0,
+                                                w: window.innerWidth,
+                                                h: window.innerHeight
+                                            };
+
+                                            return coordsWindow;
+                                        },
+                                        within: true
+                                    }
+                                );
+                            }
                         });
 
-						
-			  
+
                         //Create Floating Pane to house the layout UI of the widget. The parentModule property is created to obtain a reference to this module in close button click.
                         var fpI = new ConstrainedFloatingPane({
                             title: 'Results',  //'Data Interoperability',
                             parentModule: this,
                             resizable: true,
                             dockable: false,
-							closable: true,
-							style: "position:absolute;top:25%;left:-25%;width:600px;height:300px;visibility:hidden;z-index:100",
+                            closable: true,
+                            style: "position:absolute;top:25%;left:-25%;width:600px;height:300px;visibility:hidden;z-index:100",
                             id: "floatingPane"
                         }, dom.byId("floatingPane"));
                         fpI.startup();
 
-                      //domConstruct.place(dojo.byId('dgridDiv'), "newResultsGrid", "first");
-						
+                        //domConstruct.place(dojo.byId('dgridDiv'), "newResultsGrid", "first");
+
                         fpI.show();
-					
-					}	// end if (symbol != null)
-              
-				} else {
-                   	 alert('No values found');
+
+                    }	// end if (symbol != null)
+
+                } else {
+                    alert('No values found');
                 }
 
             }  // end _resultsHandler:
-			
+
             , _clearQuery: function () {
                 //enable the comboboxes again
                 $('#serviceCbo').prop('disabled', false);
@@ -588,11 +638,12 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                 var resultsLayer = this.map.getLayer('resultsLayer');
                 resultsLayer.clear();
                 //get the dgrid container and empty it, and recreate the grid container for use
-				//also get rid of floatingPane 
+                //also get rid of floatingPane
                 if (dijit.byId('grid')) {
                     dijit.byId('grid').destroyRecursive();
-					dijit.byId('floatingPane').destroy();
-                };
+                    dijit.byId('floatingPane').destroy();
+                }
+                ;
             }
 
             //utilities
@@ -601,7 +652,7 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                 //calls the url passed in and then passes back results to callback function
                 return layersRequest = esriRequest({
                     url: theUrl,
-                    content: { f: "json" },
+                    content: {f: "json"},
                     handleAs: "json",
                     load: callback,
                     callbackParamName: "callback"
@@ -617,18 +668,78 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                     }).appendTo(cboBox);
                 }
             }
-            , _renderCell: function(item){
+
+            , _renderCell: function () {
                 var img = "<img src = 'assets/zoom.png' class='zoomImg' style='cursor: pointer'/>";
                 return img;
             }
 
-            , _zoomToFeature: function(item){
+            , _zoomToFeature: function (item) {
                 //get graphic results layer
-
+                var graphicsLayer = this.map.getLayer("resultsLayer");
+                //get selected row
+                var rows = this._resultsGrid.selection.getSelected("row");
                 //query layer for OID
+                var graphics = [];
+                for (i = 0; i < graphicsLayer.graphics.length; i++) {
+                    var graphicAttr = graphicsLayer.graphics[i].attributes;
+                    if (graphicAttr) {
+                        var fieldname = this._identifierVar
+                        if (graphicAttr[fieldname][0] == rows[0][fieldname][0]) {
+                            graphics.push(graphicsLayer.graphics[i]);
+                        }
+                    }
+                }
+
+                var compressedGraphics = this._compressGraphics(graphics);
+
+                //flash Graphic
 
                 //zoom to graphic
+                if (compressedGraphics.length > 0) {
+                    var graphic = compressedGraphics[0];
+                    if (graphic) {
+                        this.map.centerAt(graphic.getExtent().getCenter());
+                        this.map.setExtent(graphic.getExtent());
+                    }
+                }
             }
 
-        });
+            , _compressGraphics: function(graphics){
+                var result = [];
+                var pMultipoint = new Multipoint(new SpatialReference({wkid: 102100}));
+                var pPolyline = new Polyline(new SpatialReference({wkid: 102100}));
+                var pPolygon = new Polygon(new SpatialReference({wkid: 102100}));
+                arrayUtil.forEach(graphics, function(graphic){
+                    switch (graphic.geometry.type){
+                        case "point":
+                            pMultipoint.addPoint(graphic.geometry);
+                            break;
+                        case "polyline":
+                            //loop through paths, add paths
+                            for (i = 0; i < graphic.geometry.paths.length; i++){
+                                pPolyline.addPath(graphic.geometry.paths[i]);
+                            }
+                            break;
+                        case "polygon":
+                            //loop through rings, add rings
+                            for (i = 0; i < graphic.geometry.rings.length; i++){
+                                pPolygon.addRing(graphic.geometry.rings[i]);
+                            }
+                            break;
+                    }
+                });
+                if (pMultipoint.points.length != 0){
+                    result.push(pMultipoint);
+                }
+                if (pPolyline.paths.length != 0){
+                    result.push(pPolyline);
+                }
+                if (pPolygon.rings.length != 0){
+                    result.push(pPolygon);
+                }
+
+                return result;
+            }
+        })
     });

From 6163afde1fb41f70d6563537432d0a45c4b0c22d Mon Sep 17 00:00:00 2001
From: Stephen Sporik <ssporik@spatialsys.com>
Date: Wed, 6 May 2015 19:46:22 -0400
Subject: [PATCH 3/5] Query Grid Styling

---
 .../src/modules/core/query/css/querying.css   | 18 +++----
 .../src/modules/core/query/querying.js        | 54 ++++---------------
 2 files changed, 18 insertions(+), 54 deletions(-)

diff --git a/basicviewer/src/modules/core/query/css/querying.css b/basicviewer/src/modules/core/query/css/querying.css
index b876de4..ba85f4c 100644
--- a/basicviewer/src/modules/core/query/css/querying.css
+++ b/basicviewer/src/modules/core/query/css/querying.css
@@ -81,17 +81,15 @@
 	/* overflow: auto;
 	 background-color: red;   
 	 color: grey;  */
-	margin: 5px 5px 50px 5px;
+	/*margin: 5px 5px 50px 5px;*/
 }
 
-#infoContainer
-{	
-	/* for testing */
-	/* background-color: yellow;  
-	 color: black; 
-	 width: 100%;
-	 overflow: auto; 
-	  height:500px;  */	
+#exportInfoContainer {
+    padding: 5px 5px 5px 5px;
+}
+
+#rowCountContainer {
+    padding: 5px 5px 5px 5px;
 }
 
 #grid
@@ -101,7 +99,7 @@
 	height:500px; 	
 	width: 100%;
 	font-size:90%;*/
-	overflow: auto; 
+	overflow: auto;
 	/* width: 900px;	
 	height:300px; */
 	
diff --git a/basicviewer/src/modules/core/query/querying.js b/basicviewer/src/modules/core/query/querying.js
index a57fadf..4ffc5d1 100644
--- a/basicviewer/src/modules/core/query/querying.js
+++ b/basicviewer/src/modules/core/query/querying.js
@@ -390,14 +390,14 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                         this._identifierVar = results.objectIdFieldName;
                         /*set up layout*/
                         //set first column to magnifying glass icon
-                        layout.push({'name': "Zoom To", 'field': "", 'formatter': lang.hitch(this, "_renderCell")});
+                        layout.push({'name': "Zoom To", 'field': "", 'formatter': lang.hitch(this, "_renderCell"), 'sort': false});
 
 
                         for (var j = 0; j < results.fields.length; j++) {
                             if (results.fields[j].type == "esriFieldTypeOID") {
                                 this._identifierVar = results.fields[j].name;
                             } else if (results.fields[j].name.indexOf("shape") == -1) {
-                                layout.push({'name': results.fields[j].alias, 'field': results.fields[j].name});
+                                layout.push({'name': results.fields[j].alias, 'field': results.fields[j].name, 'width': results.fields[j].alias.length*8 + "px"});
                             }
 
                         }
@@ -421,6 +421,9 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             autoWidth: true,
                             rowSelector: '20px',  //width of the row selector at the beginning of a row
                             escapeHTMLinData: true,
+                            canSort: function(colIndex){
+                                return colIndex != 0;
+                            },
                             plugins: {
                                 exporter: true,
                                 nestedSorting: true,
@@ -432,35 +435,9 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             }
                         });
 
-
                         this._resultsGrid.setStore(store);
-
-                        // sort on the city name; city is column; columns begin with 0
-                        //grid.setSortIndex(4,"true");
-                        //modify the grid so only the city field is sortable
-                        //grid.canSort = function(col){ if(Math.abs(col) == 5) { return true; } else { return false; } };
-                        //console.log(grid);
-
-                        /* 					  	for Zoom ID button https://developers.arcgis.com/en/javascript/jssamples/fl_zoomgrid.html
-                         function makeZoomButton(id){
-                         var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='../../../../assets/zoom.png'";
-                         zBtn = zBtn + " width='18' height='18'";
-                         zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>";
-                         return zBtn;
-                         }
-
-                         function zoomRow(id){
-                         resultsLayer.clearSelection();
-                         var query = new esri.tasks.Query();
-                         query.objectIds = [id];
-                         results.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){
-                         //zoom to the selected feature
-                         var resultsExtent = features[0].geometry.getExtent().expand(5.0);
-                         map.setExtent(resultsExtent);
-                         });
-                         }
-                         */
-
+                        this._resultsGrid.startup();
+                        this._resultsGrid.update();
 
                         //for exporting all rows of query results
                         function exportAll() {
@@ -545,25 +522,14 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             });
                         });
 
-                        this._resultsGrid.update();
-                        /*Call startup() to render the grid*/
-                        this._resultsGrid.startup();
                         /*append the new grid to the div*/
                         this._resultsGrid.placeAt("subContainer");
-
-                        dijit.byId('grid').resize();
-                        dijit.byId('grid').update();
-
-                        /* dojo.forEach(grid.layout.cells, function(cell,idx){
-                         grid.setCellWidth(idx, "70px");
-                         cell.view.update();
-                         });  */
+                        this._resultsGrid.resize();
+                        this._resultsGrid.update();
 
 
-                        /*Call startup() to render the grid*/
-                        this._resultsGrid.startup();
 
-                        //use dojo/query to set a click event for all elements in the class "zoomImg",  this enables using dojo/on for all elements at once.
+                        //Use dojo/query to set a click event for all elements in the class "zoomImg",  this enables using dojo/on for all elements at once.
                         //this must be done AFTER the grid is rendered with results and the zoom icons exist in the DOM.
                         dojoquery(".zoomImg").on("click", lang.hitch(this, function (e) {
                             this._zoomToFeature(e);

From 29939b86fa3e237b28485ef721297d285fd9e189 Mon Sep 17 00:00:00 2001
From: Stephen Sporik <ssporik@spatialsys.com>
Date: Thu, 7 May 2015 16:09:14 -0400
Subject: [PATCH 4/5] Fix grid loading and click event.

---
 basicviewer/src/css/imap.css                  |  3 +-
 .../src/modules/core/query/querying.js        | 41 ++++++++-----------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/basicviewer/src/css/imap.css b/basicviewer/src/css/imap.css
index d4f36c2..72e53c1 100644
--- a/basicviewer/src/css/imap.css
+++ b/basicviewer/src/css/imap.css
@@ -27,7 +27,8 @@ body {
 }
 
 .dojoxFloatingPaneTitle{
-  background:url(../../assets/imap/toolbar_bg.png) repeat-x;
+    background:url(../../assets/imap/toolbar_bg.png) repeat-x;
+    padding-left: 5px;
 }
 
 /* Background color for regular buttons*/
diff --git a/basicviewer/src/modules/core/query/querying.js b/basicviewer/src/modules/core/query/querying.js
index 4ffc5d1..709ae76 100644
--- a/basicviewer/src/modules/core/query/querying.js
+++ b/basicviewer/src/modules/core/query/querying.js
@@ -8,11 +8,11 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
     , "dojox/grid/EnhancedGrid", "dojo/data/ItemFileWriteStore", "dojox/grid/enhanced/plugins/exporter/CSVWriter", "dojox/grid/enhanced/plugins/NestedSorting", "dojox/grid/enhanced/plugins/Selector", "../utilities/maphandler", "dojo/_base/lang", "dijit/registry", "dojo/html", "dojo/dom", "dojo/on", "dijit/form/Button", "esri/request", "dojo/dnd/move"
     , "esri/toolbars/draw", "esri/graphic", "esri/geometry/Multipoint", "esri/geometry/Polygon", "esri/geometry/Polyline", "esri/SpatialReference"
     , "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dojox/layout/FloatingPane"
-    , "jquery", "dojox/widget/Standby", "dojo/dom-construct", "esri/tasks/query", "dojo/_base/connect", "dojo/query", "dojo/_base/array", "../utilities/environment", "dojo/text!./templates/querying.html"],
+    , "jquery", "dojox/widget/Standby", "dojo/dom-construct", "esri/tasks/query", "dojo/_base/connect", "dojo/query", "dojo/_base/array", "dojo/aspect", "../utilities/environment", "dojo/text!./templates/querying.html"],
     function (declare, WidgetBase, dom, json, ContentPane, ItemFileWriteStore, DataGrid, EnhancedGrid, ItemFileWriteStore, CSVWriter, NestedSorting, Selector, mapHandler, lang, registry, html, dom, on, Button, esriRequest, move
         , Draw, Graphic,  Multipoint, Polygon, Polyline, SpatialReference
         , SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FloatingPane
-        , $, Standby, domConstruct, Query, connect, dojoquery, arrayUtil, environment, template) {
+        , $, Standby, domConstruct, Query, connect, dojoquery, arrayUtil, aspect, environment, template) {
         return declare([WidgetBase, ContentPane], {
             // The template HTML fragment (as a string, created in dojo/text definition above)
             templateString: template
@@ -420,7 +420,6 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             autoHeight: true,
                             autoWidth: true,
                             rowSelector: '20px',  //width of the row selector at the beginning of a row
-                            escapeHTMLinData: true,
                             canSort: function(colIndex){
                                 return colIndex != 0;
                             },
@@ -435,10 +434,6 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             }
                         });
 
-                        this._resultsGrid.setStore(store);
-                        this._resultsGrid.startup();
-                        this._resultsGrid.update();
-
                         //for exporting all rows of query results
                         function exportAll() {
                             dijit.byId("grid").exportGrid("csv", function (str) {
@@ -522,20 +517,6 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             });
                         });
 
-                        /*append the new grid to the div*/
-                        this._resultsGrid.placeAt("subContainer");
-                        this._resultsGrid.resize();
-                        this._resultsGrid.update();
-
-
-
-                        //Use dojo/query to set a click event for all elements in the class "zoomImg",  this enables using dojo/on for all elements at once.
-                        //this must be done AFTER the grid is rendered with results and the zoom icons exist in the DOM.
-                        dojoquery(".zoomImg").on("click", lang.hitch(this, function (e) {
-                            this._zoomToFeature(e);
-                        }));
-
-                        //document.getElementById("subContainer").style.height = (dojo.byId('floatingPane').offsetHeight - 80).toString() + "px";
 
                         var ConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {
                             postCreate: function () {
@@ -572,12 +553,26 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             style: "position:absolute;top:25%;left:-25%;width:600px;height:300px;visibility:hidden;z-index:100",
                             id: "floatingPane"
                         }, dom.byId("floatingPane"));
-                        fpI.startup();
 
-                        //domConstruct.place(dojo.byId('dgridDiv'), "newResultsGrid", "first");
+                        this._resultsGrid.placeAt("subContainer");
+                        this._resultsGrid.resize();
+                        this._resultsGrid.update();
+                        this._resultsGrid.startup();
 
+                        fpI.startup();
                         fpI.show();
 
+                        //Grid does not draw correctly on first show of floating pane, call resize after pane is open to make sure grid fits its container correctly.
+                        //Must add click event to icon AFTER the resize event, or the handle to the click event is lost.
+                        var ti = setTimeout(lang.hitch(this, function(){
+                            this._resultsGrid.resize();
+                            //Use dojo/query to set a click event for all elements in the class "zoomImg",  this enables using dojo/on for all elements at once.
+                            //this must be done AFTER the grid is rendered with results and the zoom icons exist in the DOM.
+                            dojoquery(".zoomImg").on("click", lang.hitch(this, function(e) {
+                                this._zoomToFeature(e);
+                            }));
+                        }), 100);
+
                     }	// end if (symbol != null)
 
                 } else {

From 2c802562a3c2ad70bfefcda3c8392b5fd15b1b4d Mon Sep 17 00:00:00 2001
From: Stephen Sporik <ssporik@spatialsys.com>
Date: Mon, 11 May 2015 19:06:02 -0400
Subject: [PATCH 5/5] Grid resize() bug fix; Styling changes

Any action that resized the Query Results grid, removed the click event
from the zoom Image nodes.  EnhancedGrid lacks eventing for resize() to
reattach the click events.  Implemented on.selector and set the event
handler to the grid itself to fix the issue.

Updated Row header width, and removed Zoom To column name, as well as
shortened the zoom column width.
---
 .../src/modules/core/query/querying.js        | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/basicviewer/src/modules/core/query/querying.js b/basicviewer/src/modules/core/query/querying.js
index 709ae76..0a708ff 100644
--- a/basicviewer/src/modules/core/query/querying.js
+++ b/basicviewer/src/modules/core/query/querying.js
@@ -390,7 +390,7 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                         this._identifierVar = results.objectIdFieldName;
                         /*set up layout*/
                         //set first column to magnifying glass icon
-                        layout.push({'name': "Zoom To", 'field': "", 'formatter': lang.hitch(this, "_renderCell"), 'sort': false});
+                        layout.push({'name': "", 'field': "", 'formatter': lang.hitch(this, "_renderCell"), 'width': '22px'});
 
 
                         for (var j = 0; j < results.fields.length; j++) {
@@ -419,9 +419,10 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             structure: layout,
                             autoHeight: true,
                             autoWidth: true,
-                            rowSelector: '20px',  //width of the row selector at the beginning of a row
+                            selectionMode: 'single',
+                            rowSelector: '1px',  //width of the row selector at the beginning of a row
                             canSort: function(colIndex){
-                                return colIndex != 0;
+                                return colIndex != 0; //don't allow the first column (zoom to) to be sortable
                             },
                             plugins: {
                                 exporter: true,
@@ -434,6 +435,14 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                             }
                         });
 
+                        //set a click event listener on the grid to catch elements within it with the css class "zoomImg"
+                        //the magnifying glass images added to the cell during row formatting are given the class "zoomImg"
+                        //setting this on the grid, and not individual image nodes prevents resizing the grid from removing
+                        //the click event.
+                        on(this._resultsGrid, on.selector(".zoomImg", "click"), lang.hitch(this, function(e){
+                            this._zoomToFeature(e);
+                        }));
+
                         //for exporting all rows of query results
                         function exportAll() {
                             dijit.byId("grid").exportGrid("csv", function (str) {
@@ -563,14 +572,10 @@ define(["dojo/_base/declare", "dijit/_WidgetBase", "dojo/dom", "dojo/json", "dij
                         fpI.show();
 
                         //Grid does not draw correctly on first show of floating pane, call resize after pane is open to make sure grid fits its container correctly.
+                        //(This probably is doubled edged by product of using the EnhancedGrid inside a Floating Pane.)
                         //Must add click event to icon AFTER the resize event, or the handle to the click event is lost.
                         var ti = setTimeout(lang.hitch(this, function(){
                             this._resultsGrid.resize();
-                            //Use dojo/query to set a click event for all elements in the class "zoomImg",  this enables using dojo/on for all elements at once.
-                            //this must be done AFTER the grid is rendered with results and the zoom icons exist in the DOM.
-                            dojoquery(".zoomImg").on("click", lang.hitch(this, function(e) {
-                                this._zoomToFeature(e);
-                            }));
                         }), 100);
 
                     }	// end if (symbol != null)