Ian,
Here is what will work for making the dGrid 100% height of widget:
css:
.ArtdGrid.dgrid {
height: 100% !important;
}html:
<div style="height:100%;">
<div data-dojo-attach-point="gridDiv" class="ArtdGrid"></div>
</div>
js:
/*global define, console, window*/
define([
'dojo/_base/declare',
'dijit/_WidgetsInTemplateMixin',
'jimu/BaseWidget',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleMarkerSymbol',
'esri/Color',
'esri/tasks/query',
'esri/tasks/QueryTask',
'dojo/on',
'esri/layers/FeatureLayer',
'esri/request',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/extensions/DijitRegistry',
'dojo/_base/array',
'dojo/store/Memory',
'dojo/_base/lang',
'dijit/form/Button'
],
function (
declare,
_WidgetsInTemplateMixin,
BaseWidget,
SimpleLineSymbol,
SimpleMarkerSymbol,
Color,
Query,
QueryTask,
on,
FeatureLayer,
esriRequest,
Grid,
Selection,
DijitRegistry,
array,
Memory,
lang
) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-art',
name: 'ArtList',
label: 'Art List',
columns: null,
publicartFL: null,
//methods to communication with app container:
postCreate: function () {
this.inherited(arguments);
console.log('postCreate');
},
startup: function () {
this.inherited(arguments);
// Map Feature Layer
this.publicartFL = new FeatureLayer("http://gis.edmondok.com/arcgis/rest/services/Parks/PublicArt/MapServer/0", {
id: "PublicArtFL",
opacity: 1,
outFields: ["*"]
});
this.map.addLayer(this.publicartFL);
// Data Grid
this.columns = [{
label: "",
field: "OBJECTID",
formatter: this.createZoomButton
}, {
label: "",
field: "OBJECTID",
formatter: this.createFactSheetButton
}, {
label: "Name",
field: "NAME"
}];
// Define a Public Art Highlight Symbol Graphic
var publicArtHighlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 16, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([0, 0, 0]), 1), new Color([115, 255, 223, 0.50]));
this.publicartFL.setSelectionSymbol(publicArtHighlightSymbol);
this.publicartFL.on("load", lang.hitch(this, function () {
var time = Math.floor(Math.random() * 1000);
var requestUrl = "http://gis.edmondok.com/arcgis/rest/services/Parks/PublicArt/MapServer/0/query?where=1%3D1&outFields..." + time;
var request = new esriRequest({
'url': requestUrl,
'content': {
'f': "json"
},
'callbackParamName': "callback"
});
request.then(lang.hitch(this, function (response) {
console.log("Success: ", response);
var items = array.map(response.features, function (feature) {
return feature.attributes;
});
var memStore = new Memory({
data: items,
idProperty: "OBJECTID"
});
var publicArtGrid = declare([Grid, Selection, DijitRegistry]);
this.grid = new publicArtGrid({
bufferRows: Infinity,
minRowsPerPage: 1000, // Ian's Comments: 2016-01-21 - By default the grid will populate only 25 records at a time.
columns: this.columns
}, this.gridDiv);
this.grid.startup();
this.grid.set("store", memStore);
this.grid.set("sort", "NAME");
this.grid.on("click", lang.hitch(this, function (e) {
if (e.target.getAttribute("myAttri") == "Zoom") {
if (e.target.alt) {
this.zoomRow(e.target.alt);
}
} else if (e.target.getAttribute("myAttri") == "FactSheet") {
if (e.target.alt) {
this.openFactSheet(e.target.alt);
}
}
}));
}),
function (error) {
console.log("Error: ", error.message);
});
}));
},
// Zoom to Art Piece Button
createZoomButton: function (id) {
var zoomButton = "<div data-dojo-type='dijit/form/Button'><img src='widgets/ArtList/images/zoom.png' myAttri='Zoom' alt='" + id + "'";
zoomButton = zoomButton + " width='18' height='18' title='Zoom to Art Piece'></div>";
return zoomButton;
},
// Zoom to Selected Feature - Art Piece
zoomRow: function (id) {
console.info(id);
// Set Public Art Query
var queryPublicArt = new Query();
queryPublicArt.objectIds = [id];
this.publicartFL.selectFeatures(queryPublicArt, FeatureLayer.SELECTION_NEW, lang.hitch(this, function (features) {
// Zoom to the Selected Feature
var publicArtExtent = features[0].geometry;
this.map.centerAndZoom(publicArtExtent, 17);
}));
},
// Fact Sheet Button
createFactSheetButton: function (id) {
var factSheetButton = "<div data-dojo-type='dijit/form/Button'><img src='widgets/ArtList/images/fact_sheet.png' myAttri='FactSheet' alt='" + id + "'";
factSheetButton = factSheetButton + " width='18' height='18' Title='Go to fact sheet'></div>";
return factSheetButton;
},
// Open Fact Sheet in New HTM Page in New Web Page Tab
openFactSheet: function (id) {
var queryFactSheet = new Query();
queryFactSheet.where = "OBJECTID = " + id;
queryFactSheet.outFields = ["FACT_SHEET"];
var queryTask = new QueryTask("http://gis.edmondok.com/arcgis/rest/services/Parks/PublicArt/MapServer/0");
queryTask.execute(queryFactSheet, function (result) {
var factSheetURL = result.features[0].attributes.FACT_SHEET;
window.open(factSheetURL, '_blank');
});
}
});
});The images in the dgrid are just making sure that the path is correct:
src='widgets/ArtList/images/zoom.png'
.
