AnsweredAssumed Answered

How to insert data into a grid in modal tab widget

Question asked by HustleHard on Aug 16, 2016
Latest reply on Oct 28, 2016 by HustleHard

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[i].sortable = true;
} else {
columns[i].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;
});

Outcomes