Why does the grid not work anymore? And poptemplate loses data.

don-EMerson — Tue, 08 Dec 2020 15:55:24 GMT

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">  <div id="viewDiv" class="col-lg-12" style="height: 800px; width: 100%;">  <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>  </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

Re: Why does the grid not work anymore? And poptemplate loses data.

AnneFitz — Tue, 08 Dec 2020 17:36:47 GMT

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:

Hope this helps!

-Anne

Re: Why does the grid not work anymore? And poptemplate loses data.

don-EMerson — Tue, 08 Dec 2020 17:59:13 GMT

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?

Re: Why does the grid not work anymore? And poptemplate loses data.

don-EMerson — Tue, 08 Dec 2020 20:59:03 GMT

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.

topic Why does the grid not work anymore? And poptemplate loses data. in ArcGIS JavaScript Maps SDK Questions

Why does the grid not work anymore? And poptemplate loses data.

Re: Why does the grid not work anymore? And poptemplate loses data.

Re: Why does the grid not work anymore? And poptemplate loses data.

Re: Why does the grid not work anymore? And poptemplate loses data.