Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Re: Why does the grid not work anymore? And poptem...
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Why does the grid not work anymore? And poptemplate loses data.
Subscribe
12-08-2020
07:55 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I just noticed that my grid (which I took from example code), no longer works with version 4.15 and above.
In the following code note that the grid works if you change the version to 4.14. Also, note that in 4.17, when you have more than one item in a popup, like when you are zoomed out, the items after the first popup (when you click next) have no data.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Data Grid </title>
<link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
<script src="https://js.arcgis.com/4.17/"></script>
</head>
<body>
<div class="container body-content">
<script>
function generateRenderer() {
if (legendOn) {
var typeParams = {
layer: csvLayer,
numTypes: -1,
field: "ClassName",
view: view,
legendOptions: {
title: "VGS Data Points"
}
};
typeCreatorProxy
.createRenderer(typeParams)
.then(function (response) {
// set the renderer to the layer and add it to the map
csvLayer.renderer = response.renderer;
//map.add(csvLayer);
})
.catch(function (error) {
console.error("there was an error: ", error);
});
} else {
var typeParams = {
layer: csvLayer,
numTypes: 0,
field: "ClassName",
view: view,
legendOptions: {
title: "VGS Data Points"
}
};
typeCreatorProxy
.createRenderer(typeParams)
.then(function (response) {
// set the renderer to the layer and add it to the map
csvLayer.renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
size: 6,
color: "#0c234b",
outline: { // autocasts as new SimpleLineSymbol()
width: 0.5,
color: "white"
}
}
};
//map.add(csvLayer);
})
.catch(function (error) {
console.error("there was an error: ", error);
});
}
}
let map,
view,
csvLayer,
csvLayerView,
polygonGraphicsLayer,
sketchViewModel,
highlight,
grid,
legend,
typeCreatorProxy,
simpleRendererProxy,
labelClass;
function RunMap() {
require([
"esri/Map",
"esri/layers/CSVLayer",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"esri/Graphic",
"dstore/legacy/StoreAdapter",
"dojo/store/Memory",
"dgrid/Selection",
"esri/core/urlUtils",
"esri/layers/FeatureLayer",
"esri/PopupTemplate",
"esri/widgets/Legend",
"esri/renderers/smartMapping/creators/type",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/symbols/SimpleFillSymbol",
"esri/widgets/Print",
"esri/layers/support/LabelClass",
"esri/core/promiseUtils",
"dojo/domReady!"
],
function (Map,
CSVLayer,
MapView,
GraphicsLayer,
SketchViewModel,
OnDemandGrid,
ColumnHider,
Graphic,
StoreAdapter,
Memory,
Selection,
urlUtils,
FeatureLayer,
PopupTemplate,
Legend,
typeRendererCreator,
SimpleRenderer,
SimpleLineSymbol,
Color,
SimpleFillSymbol,
Print,
LabelClass,
promiseUtils) {
typeCreatorProxy = typeRendererCreator;
simpleRendererProxy = new SimpleRenderer();
const url = "data.csv";
function blankIfUndefined(item) {
if (item == undefined) {
return "";
} else {
return item;
}
}
const template_dot = new PopupTemplate(
{
title: "Site {SiteName}",
outfields: ["*"],
content: function (data) {
///debugger;
// if (data.graphic.attributes.FK_Site == 0) {
var br = document.createElement("DIV");
br.innerHTML = "<br/>";
//site edit icon
var icon = document.createElement("I");
icon.className = 'fa fa-info-circle';
icon.style = 'font-size: 32px;vertical-align:bottom';
icon.title = 'View Site Details';
icon.innerHTML = " ";
//site edit url
var siteEditUrl = document.createElement("A");
siteEditUrl.style = 'color:#8b0015';
siteEditUrl.href = "/Containers/viewSite/63448eb6-c585-4f19-9b2c-ae5d5a0c2dc2/" + data.graphic.attributes.PK_SiteClass + "/" + data.graphic.attributes.FK_Site;
siteEditUrl.target = "_new";
siteEditUrl.append(icon);
//report icon
var dashimage = document.createElement("IMG");
dashimage.src="/Content/Images/ReportDash.svg";
dashimage.style = "height:28px";
//report link
var aref = document.createElement("A");
aref.href = "/ReportExport/Dashboard3/63448eb6-c585-4f19-9b2c-ae5d5a0c2dc2/" +
data.graphic.attributes.FK_Site;
//aref.className = "btn btn-default";
aref.target = "_new";
aref.title = "View Report Dashboard";
aref.append(dashimage);
//FOLDER
var div = document.createElement("DIV");
div.append(siteEditUrl);
div.appendChild(aref);
div.appendChild(br);
var folder = document.createElement("DIV");
folder.innerHTML = "<b>Folder:</b> " + data.graphic.attributes.ClassName;
folder.style = "padding-bottom:5px;";
div.appendChild(br);
div.appendChild(folder);
//Date Established
var dateToUse = "" + data.graphic.attributes.Date;
dateToUse = dateToUse.replace("x", "");
var dateEstablished = document.createElement("DIV");
dateEstablished.innerHTML = "<b>Established:</b>" + dateToUse;
dateEstablished.style = "padding-bottom:5px;";
div.appendChild(dateEstablished);
var coordinates = document.createElement("DIV");
coordinates.innerHTML = "<b>Coordinates:</b> Long: " +
data.graphic.attributes.longitude +
" Lat:" +
data.graphic.attributes.latitude;
coordinates.style = "padding-bottom:5px;";
div.appendChild(coordinates);
var evelation = document.createElement("DIV");
evelation.innerHTML = "<b>Elevation:</b> " + data.graphic.attributes.Elevation;
evelation.style = "padding-bottom:5px;";
div.appendChild(evelation);
var description = document.createElement("DIV");
description.innerHTML = "<b>Description:</b> " + data.graphic.attributes.Description;
div.appendChild(description);
return div;
}
//content:popupResult
});
const gridDiv = document.getElementById("grid");
const infoDiv = document.getElementById("info");
const gridFields = [
"__OBJECTID", "latitude", "longitude",
"ClassName", "SiteName", "Description"
];
const dataStore = new StoreAdapter({
objectStore: new Memory({
idProperty: "__OBJECTID"
})
});
csvLayer = new CSVLayer({
url: url,
copyright: "University of Arizona",
title: "VGS Data Points",
popupTemplate: template_dot,
objectIdField: "__OBJECTID",
});
map = new Map({
basemap: "topo",
layers: [csvLayer]
});
view = new MapView({
container: "viewDiv",
center: [-113.5, 36.7],
zoom: 10,
map: map
});
csvLayer.when(function () {
const featureLayer = map.layers.getItemAt(0);
try {
const x = csvLayer.fullExtent.center.x;
view.goTo(csvLayer.fullExtent);
const queryParams = csvLayer.createQuery();
queryParams.geometry = csvLayer.fullExtent;
queryParams.where = queryParams.where + " AND 1=1";
csvLayer.queryFeatures(queryParams).then(function (results) {
const graphics = results.features;
const data = graphics.map(function (feature, i) {
return Object.keys(feature.attributes)
.filter(function (key) {
// get fields that exist in the grid
return (gridFields.indexOf(key) !== -1);
})
// need to create key value pairs from the feature
// attributes so that info can be displayed in the grid
.reduce(function (obj, key) {
obj[key] = feature.attributes[key];
return obj;
},
{});
});
// set the datastore for the grid using the
// attributes we got for the query results
dataStore.objectStore.data = data;
grid.set("collection", dataStore);
});
} catch (ex) {
window.alert("There are no sites in this folder with locations attached");
}
createGrid(csvLayer.fields);
view.whenLayerView(csvLayer).then(function (layerView) {
csvLayerView = layerView;
});
}).catch(errorCallback);;
function selectFeatureFromGrid(event) {
// close view popup if it is open
view.popup.close();
// get the ObjectID value from the clicked row
const row = event.rows[0];
const id = row.data.__OBJECTID;
// setup a query by specifying objectIds
const query = {
objectIds: [parseInt(id)],
outFields: ["*"],
returnGeometry: true
};
// query the csvLayerView using the query set above
csvLayerView.queryFeatures(query).then(function (results) {
const graphics = results.features;
// remove all graphics to make sure no selected graphics
view.graphics.removeAll();
// create a new selected graphic
const selectedGraphic = new Graphic({
geometry: graphics[0].geometry,
symbol: {
type: "simple-marker",
style: "square",
color: "purple",
size: "14px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 2 // points
}
}
});
// add the selected graphic to the view
// this graphic corresponds to the row that was clicked
view.graphics.add(selectedGraphic);
})
.catch(errorCallback);
}
function createGrid(fields) {
const columns = fields.filter(function (field, i) {
if (gridFields.indexOf(field.name) !== -1) {
return field;
}
}).map(function (field) {
if (field.name === "__OBJECTID") {
return {
field: field.name,
label: field.name,
sortable: true,
hidden: true
};
} else {
return {
field: field.name,
label: field.alias,
sortable: true
};
}
});
// create a new onDemandGrid with its selection and columnhider
// extensions. Set the columns of the grid to display attributes
// for the layer
grid = new (OnDemandGrid.createSubclass([Selection, ColumnHider]))({
columns: columns
},
"grid");
// add a row-click listener on the grid. This will be used
// to highlight the corresponding feature on the view
grid.on("dgrid-select", selectFeatureFromGrid);
}
function clearUpSelection() {
view.graphics.removeAll();
// grid.clearSelection();
}
function errorCallback(error) {
console.log("error:", error);
}
});
}
RunMap();
</script>
</div>
<div id="info">
<!------------- MAP VIEW-->
<div id="viewDiv" class="col-lg-12" style="height: 800px; width: 100%;">
<!------------- FILTER BUTTON-->
<div id="select-by-polygon" class="esri-widget esri-widget--button esri-widget esri-interactive"
title="Select features by polygon">
<span class="fas fa-filter"></span>
</div>
</div>
<!----------------------GRID HTML-->
</div>
<br/>
<div id="showAttributesDiv" style="width:100%">
<div id="gridDisplay">
<span class="info" id="featureCount"></span>
<div id="grid"></div>
</div>
</div>
<style>
.navbar-inverse .navbar-nav > li > a {
color: white;
}
.navbar-inverse .navbar-link {
color: white;
}
.navbar-inverse {
background-color: green;
}
.dropdown-menu {
background-color: green;
}
.panel-primary > .panel-heading {
background-color: green;
color: white;
}
.navbar-toggle {
background-color: green;
color: white;
}
btn {
background-color: green;
color: white;
}
input.btn-primary {
background-color: green;
color: white;
}
button.btn-primary:hover {
background-color: white color: green;
}
input.btn-primary:hover {
background-color: white color: green;
}
button.btn-primary {
background-color: green;
color: white;
}
input.btn-default {
background-color: green;
color: white;
}
input.btn-default:hover {
background-color:;
white color:green;
}
</style>
</body>
</html>
Here is some csv rows you can copy to get the CSV. Just copy the following lines and put in text file called data.csv.
__ObjectId,Date,latitude,longitude,PK_SiteClass,ClassName,SiteName,Description,FK_Site,Elevation,
0,x10/16/2020,32.679623984312,-110.275223465026,3785e45c-fd7e-4b39-b191-00243aee0367,West Lower Home Pasture,03-05-04-00429-29K-K01,From Shapefile,a114e69b-0292-47d1-b68e-b9c6be0a2bc1,
1,x10/17/2020,32.076385373889,-110.439284411242,3c605739-dd5c-499b-8d9f-01097194631b,East Pasture,03-05-05-00520-003-C02,Fromn Shapefile,0a78ab90-1534-4efc-938d-14535a736a9f,
2,x10/18/2011,32.4811330566239,-109.803640075948,0df776c1-d28b-4edb-8d08-01b8c8867278,Gillman Pasture,03-05-04-00420-20C-K01A,,2fe18d75-5b3e-40ce-9359-3c04dd46ccb6,
3,x10/18/2011,32.4519402930037,-109.787291645571,0df776c1-d28b-4edb-8d08-01b8c8867278,Gillman Pasture,03-05-04-00420-20C-K04,,d0cb1a36-cf96-4121-a0d4-55169f9e740d,
4,x10/7/2010,31.6550240733351,-110.768615114208,3239e471-6b2a-43f6-99c8-01e031f63e20,Upper Big Casa Blanca Pasture,03-05-02-00250-011-P05,,ac30afd0-5c5b-4c5b-b7e2-bcb969efede0,4809
5,x3/2/2006,31.5132116719079,-111.311602240167,df0e55a3-cb7b-47d2-bb91-022c8fe196fb,Cumaro Pasture,03-05-02-00205-002-C02,,8a6ec76f-2ca5-44b0-a9b6-7547f7461cae,4075
Solved! Go to Solution.
1 Solution
Accepted Solutions
12-08-2020
09:36 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @don-EMerson - the dgrid issue you're running into was caused by a breaking change at 4.15
- dgrid styles are no longer globally included. if using dgrid in your web application, you will need to reference the stylesheet separately.
Luckily, this is an easy fix! Just reference the dgrid stylesheet in your application:
<link rel="stylesheet" href="https://js.arcgis.com/4.17/dgrid/css/dgrid.css"/>
Hope this helps!
-Anne
3 Replies
12-08-2020
09:36 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi @don-EMerson - the dgrid issue you're running into was caused by a breaking change at 4.15
- dgrid styles are no longer globally included. if using dgrid in your web application, you will need to reference the stylesheet separately.
Luckily, this is an easy fix! Just reference the dgrid stylesheet in your application:
<link rel="stylesheet" href="https://js.arcgis.com/4.17/dgrid/css/dgrid.css"/>
Hope this helps!
-Anne
12-08-2020
09:59 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thanks.
That shows the grid correctly now but the first row is writing over the header. Do you know how to fix that?
Also, do you have any idea what the popuptemplate loses data when there are multiple items?
12-08-2020
12:59 PM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I am going to just ask my second question in another post as it might be confusing to have 2 questions.
I accepted the answer to my first question.
