Latest Contributions by TylerDunn2

So been chipping away at an app I'm building for some coworkers. I've attached some images to show what it looks like. On the left is a panel with 4 tabs (Alphabetical, By Engineer, By Planner, By Ward). Inside these tabs are another set of tabs to show the different options (Example: By Ward has Ward 1 tab, Ward 2 tab, Ward 3 Tab and Ward 4 tab). Each tab has a list of projects in that area, and when clicking the top tab it zooms to that area. Here's where I need a hand: I'm trying to make it so when it zooms to that tab (ex. Ward 1), it definition queries out Ward 1 projects and only shows them on the map. I'm trying to build this so employees can print their own maps with our layouts, so it'd be beneficial if the map only shows the data they've clicked the tab of.  Attached is the Wards example and some screen shots. Any help or suggestions would be awesome. define([ 'dojo/_base/declare', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'esri/symbols/SimpleFillSymbol', 'esri/Color', 'esri/tasks/query', 'dojo/on', 'esri/layers/FeatureLayer', "dgrid/OnDemandGrid", "dgrid/Selection", 'dijit/layout/TabContainer', 'dijit/layout/ContentPane', "dojo/_base/array", 'dojo/store/Memory', 'dojo/_base/lang', "esri/graphicsUtils", "esri/tasks/GeometryService", "esri/tasks/ProjectParameters", 'dijit/form/Button' ], function ( declare, _WidgetsInTemplateMixin, BaseWidget, SimpleFillSymbol, Color, Query, on, FeatureLayer, Grid, Selection, TabContainer, ContentPane, array, Memory, lang, graphicsUtils, GeometryService, ProjectParameters ) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget, _WidgetsInTemplateMixin], { baseClass: 'jimu-widget-datagrid', name: 'DataGrid', label: 'Data Grid', columns: null, devProjectsLayer: null, //methods to communication with app container: postCreate: function () { this.inherited(arguments); console.log('postCreate'); }, startup: function () { this.inherited(arguments); var geomSvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); //Tab 1 // Map Feature Layer this.devProjectsLayer = new FeatureLayer("http://webmaps.cityofthornton.net/arcgis/rest/services/DevProjects/MapServer/1 ", { id: "devProjectsLayer", mode: FeatureLayer.MODE_ONDEMAND, opacity: .5, outFields: ["*"] }); this.devProjectsLayer.setDefinitionExpression("WARD = '1' AND STATUS LIKE 'ACTIVE' OR WARD = '1' AND STATUS LIKE 'APPROVED' OR WARD = '1' AND STATUS LIKE 'PROPOSED'"); this.map.addLayer(this.devProjectsLayer); // Data Grid 1 this.columns = [{ label: "Zoom", field: "OBJECTID", formatter: this.createZoomButton }, { label: "Project Name", field: "NAME" }]; // Define selection graphic var highlightSymbol = new SimpleFillSymbol().setColor(new Color([50, 205, 50, 0.25])); this.devProjectsLayer.setSelectionSymbol(highlightSymbol); this.devProjectsLayer.on("load", lang.hitch(this, function(evt) { var query = new Query(); query.where = "WARD = '1' AND STATUS LIKE 'ACTIVE' OR WARD = '1' AND STATUS LIKE 'APPROVED' OR WARD = '1' AND STATUS LIKE 'PROPOSED'"; evt.layer.queryFeatures(query, lang.hitch(this, function(featureSet) { var myFeatureExtent = graphicsUtils.graphicsExtent(featureSet.features); var items = array.map(featureSet.features, function(feature) { return feature.attributes; }); //idProperty must be set manually if value is something other than 'id' var memStore = new Memory({ data: items, idProperty: "OBJECTID" }); var projectDataGrid = declare([Grid, Selection]); this.grid = new projectDataGrid({ bufferRows: Infinity, minRowsPerPage: "1000", columns: this.columns }, this.gridDiv); this.grid.startup(); this.grid.set("store", memStore); this.grid.set("sort", "NAME"); var tc = new TabContainer({ style: "height: 100%; width: 100%;" }, this.customContentNode); tc.watch("selectedChildWidget", lang.hitch(this, function(name, oval, nval){ if(nval.extent !== this.map.spatialReference){ var params = new ProjectParameters(); params.outSR = this.map.spatialReference; params.geometries = [nval.extent]; geomSvc.project(params, lang.hitch(this, function(geoms){ this.map.setExtent(geoms[0], true); })); }else{ this.map.setExtent(nval.extent, true); } })); var cp1 = new ContentPane({ title: "Ward 1", content: this.grid, selected: true }); cp1.extent = myFeatureExtent; tc.addChild(cp1); //Tab 2 this.devProjectsLayer2 = new FeatureLayer("http://webmaps.cityofthornton.net/arcgis/rest/services/DevProjects/MapServer/1 ", { id: "devProjectsLayer2", mode: FeatureLayer.MODE_ONDEMAND, opacity: .5, outFields: ["*"] }); this.devProjectsLayer2.setDefinitionExpression("WARD = '2' AND STATUS LIKE 'ACTIVE' OR WARD = '2' AND STATUS LIKE 'APPROVED' OR WARD = '2' AND STATUS LIKE 'PROPOSED'"); this.map.addLayer(this.devProjectsLayer2); // Data Grid 2 this.columns = [{ label: "Zoom", field: "OBJECTID", formatter: this.createZoomButton }, { label: "Project Name", field: "NAME" }]; this.devProjectsLayer2.on("load", lang.hitch(this, function(evt) { var query2 = new Query(); query2.where = "WARD = '2' AND STATUS LIKE 'ACTIVE' OR WARD = '2' AND STATUS LIKE 'APPROVED' OR WARD = '2' AND STATUS LIKE 'PROPOSED'"; evt.layer.queryFeatures(query2, lang.hitch(this, function(featureSet) { var myFeatureExtent2 = graphicsUtils.graphicsExtent(featureSet.features); var items2 = array.map(featureSet.features, function(feature) { return feature.attributes; }); //idProperty must be set manually if value is something other than 'id' var memStore2 = new Memory({ data: items2, idProperty: "OBJECTID" }); this.grid2 = new projectDataGrid({ bufferRows: Infinity, minRowsPerPage: "1000", columns: this.columns }, this.gridDiv2); this.grid2.startup(); this.grid2.set("store", memStore2); this.grid2.set("sort", "NAME"); var cp2 = new ContentPane({ title: "Ward 2", content: this.grid2, selected: false }); cp2.extent = myFeatureExtent2; tc.addChild(cp2); //Tab 3 this.devProjectsLayer3 = new FeatureLayer("http://webmaps.cityofthornton.net/arcgis/rest/services/DevProjects/MapServer/1 ", { id: "devProjectsLayer3", mode: FeatureLayer.MODE_ONDEMAND, opacity: .5, outFields: ["*"] }); this.devProjectsLayer3.setDefinitionExpression("WARD = '3' AND STATUS LIKE 'ACTIVE' OR WARD = '3' AND STATUS LIKE 'APPROVED' OR WARD = '3' AND STATUS LIKE 'PROPOSED'"); this.map.addLayer(this.devProjectsLayer3); // Data Grid 3 this.columns = [{ label: "Zoom", field: "OBJECTID", formatter: this.createZoomButton }, { label: "Project Name", field: "NAME" }]; this.devProjectsLayer3.on("load", lang.hitch(this, function(evt) { var query3 = new Query(); query3.where = "WARD = '3' AND STATUS LIKE 'ACTIVE' OR WARD = '3' AND STATUS LIKE 'APPROVED' OR WARD = '3' AND STATUS LIKE 'PROPOSED'"; evt.layer.queryFeatures(query3, lang.hitch(this, function(featureSet) { var myFeatureExtent3 = graphicsUtils.graphicsExtent(featureSet.features); var items3 = array.map(featureSet.features, function(feature) { return feature.attributes; }); //idProperty must be set manually if value is something other than 'id' var memStore3 = new Memory({ data: items3, idProperty: "OBJECTID" }); this.grid3 = new projectDataGrid({ bufferRows: Infinity, minRowsPerPage: "1000", columns: this.columns }, this.gridDiv3); this.grid3.startup(); this.grid3.set("store", memStore3); this.grid3.set("sort", "NAME"); var cp3 = new ContentPane({ title: "Ward 3", content: this.grid3, selected: false }); cp3.extent = myFeatureExtent3; tc.addChild(cp3); //Tab 4 this.devProjectsLayer4 = new FeatureLayer("http://webmaps.cityofthornton.net/arcgis/rest/services/DevProjects/MapServer/1 ", { id: "devProjectsLayer4", mode: FeatureLayer.MODE_ONDEMAND, opacity: .5, outFields: ["*"] }); this.devProjectsLayer4.setDefinitionExpression("WARD = '4' AND STATUS LIKE 'ACTIVE' OR WARD = '4' AND STATUS LIKE 'APPROVED' OR WARD = '4' AND STATUS LIKE 'PROPOSED'"); this.map.addLayer(this.devProjectsLayer4); // Data Grid 4 this.columns = [{ label: "Zoom", field: "OBJECTID", formatter: this.createZoomButton }, { label: "Project Name", field: "NAME" }]; this.devProjectsLayer4.on("load", lang.hitch(this, function(evt) { var query4 = new Query(); query4.where = "WARD = '4' AND STATUS LIKE 'ACTIVE' OR WARD = '4' AND STATUS LIKE 'APPROVED' OR WARD = '4' AND STATUS LIKE 'PROPOSED'"; evt.layer.queryFeatures(query4, lang.hitch(this, function(featureSet) { var myFeatureExtent4 = graphicsUtils.graphicsExtent(featureSet.features); var items4 = array.map(featureSet.features, function(feature) { return feature.attributes; }); //idProperty must be set manually if value is something other than 'id' var memStore4 = new Memory({ data: items4, idProperty: "OBJECTID" }); this.grid4 = new projectDataGrid({ bufferRows: Infinity, minRowsPerPage: "1000", columns: this.columns }, this.gridDiv4); this.grid4.startup(); this.grid4.set("store", memStore4); this.grid4.set("sort", "NAME"); var cp4 = new ContentPane({ title: "Ward 4", content: this.grid4, selected: false }); cp4.extent = myFeatureExtent4; tc.addChild(cp4); tc.startup(); this.grid.on(".field-OBJECTID:click", lang.hitch(this, function(e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { this.zoomRow(e.target.alt); } })); this.grid2.on(".field-OBJECTID:click", lang.hitch(this, function(e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { this.zoomRow(e.target.alt); } })); this.grid3.on(".field-OBJECTID:click", lang.hitch(this, function(e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { this.zoomRow(e.target.alt); } })); this.grid4.on(".field-OBJECTID:click", lang.hitch(this, function(e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { this.zoomRow(e.target.alt); } })); })); })); })); })); })); })); })); })); }, // Create zoom button createZoomButton: function (id) { var zoomButton = "<div data-dojo-type='dijit/form/Button'><img src='widgets/Wards/images/zoom.png' myAttri='Zoom' alt='" + id + "'"; zoomButton = zoomButton + " width='18' height='18' title='Zoom to Feature'></div>"; return zoomButton; }, // Zoom to Selected Feature zoomRow: function(id) { this.devProjectsLayer.clearSelection(); var query = new Query(); query.objectIds = [id]; this.devProjectsLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, lang.hitch(this, function(features) { //zoom to the selected feature var devProjectsExtent = features[0].geometry.getExtent().expand(5.0); this.map.setExtent(devProjectsExtent); })); }, // // Zoom to Selected Features from Tab // zoomFeatures: function(id) { // this.devProjectsLayer.clearSelection(); // var query = new Query(); // query.objectIds = [id]; // this.devProjectsLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, lang.hitch(this, function(features) { // //zoom to the selected feature // var devProjectsExtent = features[0].geometry.getExtent().expand(5.0); // this.map.setExtent(devProjectsExtent); // })); // }, }); }); ... View more

I'm trying to zoom to a selected memory store when you click the tab to switch to the grid. I've attached a screen shot to give you an idea of what I'm trying to do. Each tab (Tab 1, Tab 2, Tab 3) has a query behind them to show different data. When you click each tab, it shows a different grid of data. Currently when you click the magnifying glass it zooms to that single project. I'm trying to get it to zoom to all of that Tab's projects when you click on a different tab (extent of the features returned from the query). Here's the code I've been working with, which is the Project by Engineer widget. I'll also attach the widget. Any help would be much appreciated! define([ 'dojo/_base/declare', 'dijit/_WidgetsInTemplateMixin', 'jimu/BaseWidget', 'esri/symbols/SimpleFillSymbol', 'esri/Color', 'esri/tasks/query', 'dojo/on', 'esri/layers/FeatureLayer', "dgrid/OnDemandGrid", "dgrid/Selection", 'dijit/layout/TabContainer', 'dijit/layout/ContentPane', "dojo/_base/array", 'dojo/store/Memory', 'dojo/_base/lang', 'dijit/form/Button' ], function ( declare, _WidgetsInTemplateMixin, BaseWidget, SimpleFillSymbol, Color, Query, on, FeatureLayer, Grid, Selection, TabContainer, ContentPane, array, Memory, lang ) { //To create a widget, you need to derive from BaseWidget. return declare([BaseWidget, _WidgetsInTemplateMixin], { baseClass: 'jimu-widget-datagrid', name: 'DataGrid', label: 'Data Grid', columns: null, devProjectsLayer: null, //methods to communication with app container: postCreate: function () { this.inherited(arguments); console.log('postCreate'); }, startup: function () { this.inherited(arguments); // Map Feature Layer this.devProjectsLayer = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1", { id: "devProjectsLayer", opacity: 1, outFields: ["*"] }); //this.devProjectsLayer.setDefinitionExpression("PLANNER = 'LH' AND STATUS LIKE 'ACTIVE' OR PLANNER = 'LH' AND STATUS LIKE 'APPROVED' OR PLANNER = 'LH' AND STATUS LIKE 'PROPOSED'") this.map.addLayer(this.devProjectsLayer); // Data Grid this.columns = [{ label: "Zoom", field: "OBJECTID", formatter: this.createZoomButton }, { label: "Project Name", field: "NAME" }]; // Define selection graphic var highlightSymbol = new SimpleFillSymbol().setColor(new Color([50, 205, 50, 0.25])); this.devProjectsLayer.setSelectionSymbol(highlightSymbol); this.devProjectsLayer.on("load", lang.hitch(this, function(evt) { var query = new Query(); query.where = "ENGINEER = 'CC' AND STATUS LIKE 'ACTIVE' OR ENGINEER = 'CC' AND STATUS LIKE 'APPROVED' OR ENGINEER = 'CC' AND STATUS LIKE 'PROPOSED'"; evt.layer.queryFeatures(query, lang.hitch(this, function(featureSet) { var items = array.map(featureSet.features, function(feature) { return feature.attributes; }); //idProperty must be set manually if value is something other than 'id' var memStore = new Memory({ data: items, idProperty: "OBJECTID" }); var projectDataGrid = declare([Grid, Selection]); this.grid = new projectDataGrid({ bufferRows: Infinity, minRowsPerPage: "1000", columns: this.columns }, this.gridDiv); this.grid.startup(); this.grid.set("store", memStore); this.grid.set("sort", "NAME"); var tc = new TabContainer({style: "height: 100%; width: 100%;"}, this.customContentNode); var cp1 = new ContentPane({ title: "Tab 1", content: this.grid, selected: true }); tc.addChild(cp1); this.devProjectsLayer2 = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1", { id: "devProjectsLayer", opacity: 1, outFields: ["*"] }); this.map.addLayer(this.devProjectsLayer2); // Data Grid Probably not needed this.columns = [{ label: "Zoom", field: "OBJECTID", formatter: this.createZoomButton }, { label: "Project Name", field: "NAME" }]; this.devProjectsLayer2.on("load", lang.hitch(this, function(evt) { var query2 = new Query(); query2.where = "ENGINEER = 'NH' AND STATUS LIKE 'ACTIVE' OR ENGINEER = 'NH' AND STATUS LIKE 'APPROVED' OR ENGINEER = 'NH' AND STATUS LIKE 'PROPOSED'"; evt.layer.queryFeatures(query2, lang.hitch(this, function(featureSet) { var items2 = array.map(featureSet.features, function(feature) { return feature.attributes; }); //idProperty must be set manually if value is something other than 'id' var memStore2 = new Memory({ data: items2, idProperty: "OBJECTID" }); this.grid2 = new projectDataGrid({ bufferRows: Infinity, minRowsPerPage: "1000", columns: this.columns }, this.gridDiv2); this.grid2.startup(); this.grid2.set("store", memStore2); this.grid2.set("sort", "NAME"); var cp2 = new ContentPane({ title: "Tab 2", content: this.grid2, selected: false }); tc.addChild(cp2); this.devProjectsLayer3 = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1", { id: "devProjectsLayer", opacity: 1, outFields: ["*"] }); this.map.addLayer(this.devProjectsLayer3); // Data Grid Probably not needed this.columns = [{ label: "Zoom", field: "OBJECTID", formatter: this.createZoomButton }, { label: "Project Name", field: "NAME" }]; this.devProjectsLayer3.on("load", lang.hitch(this, function(evt) { var query3 = new Query(); //query3.where = "ENGINEER = 'TR' AND STATUS LIKE 'ACTIVE' OR ENGINEER = 'TR' AND STATUS LIKE 'APPROVED' OR ENGINEER = 'TR' AND STATUS LIKE 'PROPOSED'"; query3.where = "STATUS LIKE 'ACTIVE' OR STATUS LIKE 'APPROVED' OR STATUS LIKE 'PROPOSED'"; evt.layer.queryFeatures(query3, lang.hitch(this, function(featureSet) { var items3 = array.map(featureSet.features, function(feature) { return feature.attributes; }); //idProperty must be set manually if value is something other than 'id' var memStore3 = new Memory({ data: items3, idProperty: "OBJECTID" }); this.grid3 = new projectDataGrid({ bufferRows: Infinity, minRowsPerPage: "1000", columns: this.columns }, this.gridDiv3); this.grid3.startup(); this.grid3.set("store", memStore3); this.grid3.set("sort", "NAME"); var cp3 = new ContentPane({ title: "Tab 3", content: this.grid3, selected: false }); tc.addChild(cp3); // this.devProjectsLayer4 = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1", { // id: "devProjectsLayer", // opacity: 1, // outFields: ["*"] // }); // this.map.addLayer(this.devProjectsLayer4); // // Data Grid Probably not needed // this.columns = [{ // label: "Zoom", // field: "OBJECTID", // formatter: this.createZoomButton // }, { // label: "Project Name", // field: "NAME" // }]; // this.devProjectsLayer4.on("load", lang.hitch(this, function(evt) { // var query4 = new Query(); // query4.where = "PLANNER = 'NN' AND STATUS LIKE 'ACTIVE' OR PLANNER = 'NN' AND STATUS LIKE 'APPROVED' OR PLANNER = 'NN' AND STATUS LIKE 'PROPOSED'"; // //query2.where = "PLANNER = 'JR'"; // evt.layer.queryFeatures(query4, lang.hitch(this, function(featureSet) { // var items4 = array.map(featureSet.features, function(feature) { // return feature.attributes; // }); // //idProperty must be set manually if value is something other than 'id' // var memStore4 = new Memory({ // data: items4, // idProperty: "OBJECTID" // }); // this.grid4 = new projectDataGrid({ // bufferRows: Infinity, // minRowsPerPage: "1000", // columns: this.columns // }, this.gridDiv4); // this.grid4.startup(); // this.grid4.set("store", memStore4); // this.grid4.set("sort", "NAME"); // var cp4 = new ContentPane({ // title: "Tab 4", // content: this.grid4, // selected: false // }); // tc.addChild(cp4); tc.startup(); this.grid.on(".field-OBJECTID:click", lang.hitch(this, function(e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { this.zoomRow(e.target.alt); } })); this.grid2.on(".field-OBJECTID:click", lang.hitch(this, function(e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { this.zoomRow(e.target.alt); } alert("tab 2 OID clicked"); })); this.grid2.on("tc.addChild(cp2):click", lang.hitch(this, function(e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { this.zoomFeatures(e.target.alt); } alert("tab has been clicked"); })); this.grid3.on(".field-OBJECTID:click", lang.hitch(this, function(e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { this.zoomRow(e.target.alt); } })); // this.grid4.on(".field-OBJECTID:click", lang.hitch(this, function(e) { // //retrieve the ObjectId when someone clicks on the magnifying glass // if (e.target.alt) { // this.zoomRow(e.target.alt); // } // })); })); })); })); })); })); })); // })); // })); }, // Create zoom button createZoomButton: function (id) { var zoomButton = "<div data-dojo-type='dijit/form/Button'><img src='widgets/Engineers/images/zoom.png' myAttri='Zoom' alt='" + id + "'"; zoomButton = zoomButton + " width='18' height='18' title='Zoom to Feature'></div>"; return zoomButton; }, // Zoom to Selected Feature zoomRow: function(id) { this.devProjectsLayer.clearSelection(); var query = new Query(); query.objectIds = [id]; this.devProjectsLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, lang.hitch(this, function(features) { //zoom to the selected feature var devProjectsExtent = features[0].geometry.getExtent().expand(5.0); this.map.setExtent(devProjectsExtent); })); }, // Zoom to Selected Features from Tab //I think this is okay. It's clearing OG selection, creating a new selection off the feature layer, then getting the extent of the selection. If tab click activates selection, should work  zoomFeatures: function(id) { this.devProjectsLayer.clearSelection(); var query = new Query(); query.objectIds = [id]; this.devProjectsLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, lang.hitch(this, function(features) { //zoom to the selected feature var devProjectsExtent = features[0].geometry.getExtent().expand(5.0); this.map.setExtent(devProjectsExtent); })); }, // zoomRow2: function(id) { // this.devProjectsLayer.clearSelection(); // var query = new Query(); // query.objectIds = [id]; // this.devProjectsLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, lang.hitch(this, function(features) { // //zoom to the selected feature // var devProjectsExtent = features[0].geometry.getExtent().expand(5.0); // this.map.setExtent(devProjectsExtent); // })); // }, }); ... View more

I've got the grid inserted, I just cant figure out how to insert the data. I figure it has something to do with the this.map.addLayers([this.devProjectsLayer]); but no where that I put it makes the data fill the dgrid. I'm guessing it's something simple and I'm just missing it.  Thanks define(['dojo/_base/declare', 'jimu/BaseWidget', 'dijit/_WidgetsInTemplateMixin', 'dojo/_base/html', 'dojo/query', 'dojo/_base/array', 'dojo/_base/sniff', 'dijit/layout/TabContainer', 'dijit/layout/ContentPane', 'dgrid/OnDemandGrid', 'dgrid/Selection', 'dojo/store/Memory', 'esri/layers/FeatureLayer', 'esri/symbols/SimpleFillSymbol', 'esri/Color', 'dojo/_base/lang', 'dijit/form/Button' ], function(declare, BaseWidget, _WidgetsInTemplateMixin, html, query, array, sniff, TabContainer, ContentPane, Grid, Selection, Memory, FeatureLayer, SimpleFillSymbol, Color, lang ) { var devProjectsGrid = declare([Grid, Selection]); var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], { baseClass: 'jimu-widget-modaltab', devProjectsLayer: null, dgrid: null, postCreate: function() { this.inherited(arguments); var columns = [{ label: "Zoom", //wasn't able to inject an HTML <div> with image here field: "OBJECTID", formatter: lang.hitch(this, this.makeZoomButton) }, { label: "Project Name", field: "NAME" }]; //restrict sorting to the Project name field for (var i = 0; i < columns.length; i++) { if (i == 1) { columns.sortable = true; } else { columns.sortable = false; } } this.dgrid = new devProjectsGrid({ bufferRows: Infinity, columns: columns }, this.grid); this.devProjectsLayer = new FeatureLayer("https://gis.cityofthornton.net/arcgis/rest/services/External_Webmaps/DevProjects/MapServer/1 ", { mode: FeatureLayer.MODE_SELECTION, outFields: ["OBJECTID", "NAME"] }); //define a selection symbol var highlightSymbol = new SimpleFillSymbol().setColor(new Color([50, 205, 50, 0.25])); this.devProjectsLayer.setSelectionSymbol(highlightSymbol); this.devProjectsLayer.on("load", lang.hitch(this, function(evt) { var query = new Query(); query.where = "1=1"; evt.layer.queryFeatures(query, lang.hitch(this, function(featureSet) { var items = array.map(featureSet.features, function(feature) { return feature.attributes; }); //idProperty must be set manually if value is something other than 'id' var memStore = new Memory({ data: items, idProperty: "OBJECTID" }); this.dgrid.set("store", memStore); //this.dgrid.set("sort", "NAME"); this.dgrid.set("sort", "NAME"); this.dgrid.on(".field-OBJECTID:click", lang.hitch(this, function(e) { //retrieve the ObjectId when someone clicks on the magnifying glass if (e.target.alt) { this.zoomRow(e.target.alt); } })); })); })); this.map.addLayers([this.devProjectsLayer]); }, startup: function() { this.inherited(arguments); var tc = new TabContainer({style: "height: 100%; width: 100%;"}, this.customContentNode); //First Tab panel var theContent = this.dgrid; var cp1 = new ContentPane({ title: "Ward 1", content: theContent, selected: true }); tc.addChild(cp1); //Second Tab Panel theContent = this.dgrid; var cp2 = new ContentPane({ title: "Ward 2", content: theContent, selected: true }); tc.addChild(cp2); //Third Tab Panel theContent = this.dgrid; var cp3 = new ContentPane({ title: "Ward 3", content: theContent, selected: true }); tc.addChild(cp3); //Fourth Tab Panel theContent = this.dgrid; var cp4 = new ContentPane({ title: "Ward 4", content: theContent, selected: true }); tc.addChild(cp4); tc.startup(); }, zoomRow: function(id) { this.devProjectsLayer.clearSelection(); var query = new Query(); query.objectIds = [id]; this.devProjectsLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, lang.hitch(this, function(features) { //zoom to the selected feature var devProjectsExtent = features[0].geometry.getExtent().expand(5.0); this.map.setExtent(devProjectsExtent); })); }, makeZoomButton: function(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='" + this.folderUrl + "/images/zoom.png' alt='" + id + "'"; zBtn = zBtn + " width='18' height='18'></div>"; return zBtn; } }); return clazz; }); ... View more

Anyone have any experience or suggestions on how to get a dgrid in a side panel with the zoom to function? Here's what I'm trying to get into the Tab side panel https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=fl_zoomgrid Not sure if anyone has any insight into this, I've been bashing around and can't seem to make it work. Thanks Tyler ... View more