How to insert data into a grid in modal tab widget

[TylerDunn2]

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

[JakeSkinner · Accepted solution]

Hi Tyler,

I was able to get this working with the following:

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.map.addLayer(this.devProjectsLayer);


        // Data Grid
        this.columns = [{
          label: "",
          field: "OBJECTID",
          formatter: this.createZoomButton
        }, {
          label: "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 = "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"
                });
                
                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");


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


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


      // Create zoom button
      createZoomButton: function (id) {
        var zoomButton = "<div data-dojo-type='dijit/form/Button'><img src='widgets/DataGrid/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);
        }));
        }

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

I attached the application I was testing with too.

[TylerDunn2]

Thanks Jake, worked like a charm!

[TylerDunn2]

Hey Jake

Curious if you know how to get a different selection to show up when each tab is clicked. I've got queries running to filter out the data, but when I click to change the tab, it doesn't change the data. Example: This is for a current projects map for a city, each tab is a different planner that works for the city. The first query works fine, but when clicking the second tab for the next planner, the data stays the same. 

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("OURSERVER URL", {
id: "devProjectsLayer",
opacity: 1,
outFields: ["*"]
});
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 = "PLANNER = 'LH' AND STATUS LIKE 'ACTIVE' OR PLANNER = 'LH' AND STATUS LIKE 'APPROVED' OR PLANNER = 'LH' 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");

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

var tc = new TabContainer({style: "height: 100%; width: 100%;"}, this.customContentNode);

//First Tab panel
var theContent = this.dgrid;

var cp1 = new ContentPane({
title: "Lori Hight",
content: theContent,
selected: true
});

tc.addChild(cp1);

// Map Feature Layer
this.devProjectsLayer2 = new FeatureLayer("OUR SERVER URL", {
id: "devProjectsLayer",
opacity: 1,
outFields: ["*"]
});
this.map.addLayer(this.devProjectsLayer2);

// Data Grid
this.columns2 = [{
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.devProjectsLayer2.setSelectionSymbol(highlightSymbol);

this.devProjectsLayer2.on("column.label:click", lang.hitch(this, function(evt) { //WHAT TO PUT HERE SO IT LOADS WHEN THE TAB IS CHANGED!!!! WITH JUST "load" IT LOADS ON TOP OF LORI'S TABLE
var query2 = new Query();
query2.where = "PLANNER = 'JR' AND STATUS LIKE 'ACTIVE' OR PLANNER = 'JR' AND STATUS LIKE 'APPROVED' OR PLANNER = 'JR' 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"
});

var projectDataGrid2 = declare([Grid, Selection]);
this.grid2 = new projectDataGrid2({
bufferRows: Infinity,
minRowsPerPage: "1000",
columns: this.columns2
}, this.gridDiv);
this.grid2.startup();
this.grid2.set("store", memStore2);
this.grid2.set("sort", "NAME");

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

//var tc2 = new TabContainer({style: "height: 100%; width: 100%;"}, this.customContentNode);

//Second Tab Panel
theContent2 = this.dgrid;

var cp2 = new ContentPane({
title: "Jay Ruchti",
content: theContent2,
selected: true
});
tc.addChild(cp2);

//Third Tab Panel
theContent3 = this.dgrid;

var cp3 = new ContentPane({
title: "Ty Robbins",
content: theContent3,
selected: true
});
tc.addChild(cp3);

//Fourth Tab Panel
theContent4 = this.dgrid;

var cp4 = new ContentPane({
title: "Nick Nelson",
content: theContent4,
selected: true
});
tc.addChild(cp4);

tc.startup();
},

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

});
});

[JakeSkinner]

I believe I was creating the grid incorrectly before.  Try the attached widget.

[TylerDunn2]

Hey Jake

Tired the new grid, and it shows different fields for the second tab (i.e first tab shows project name, second tab shows Global ID) but it's still the same data (OBJECTID<21), just different fields. Any suggestions on getting a totally different batch of data in the second tab (i.e. OBJECTID<50)?

Thanks a bunch for your help