zoom to selection on tab click

[TylerDunn2]

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);
// }));
// },

});

[RobertScheitlin__GISP · Accepted solution]

Tyler,

   Here is the code updated fro that but I don't see a lot of benefit. The extents of all the engineers projects seem to be very similar.

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: 'Engineers',
            label: 'Engineers',
            columns: null,
            devProjectsLayer: null,

            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");
                // 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 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: "Tab 1",
                            content: this.grid,
                            selected: true
                        });
                        cp1.extent = myFeatureExtent;

                        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 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: "Tab 2",
                                    content: this.grid2,
                                    selected: false
                                });
                                cp2.extent = myFeatureExtent2;
                                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 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: "Tab 3",
                                            content: this.grid3,
                                            selected: false
                                        });
                                        cp3.extent = myFeatureExtent3;
                                        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);
            //   }));
            //   },

        });
    });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[TylerDunn2]

That worked great, thanks for taking the time to look at it. It ends up being more useful for some of the other main tabs (Projects by City Council Ward, etc) where they're in different regions of the city. 

Thanks again!