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

642
3
Jump to solution
12-08-2020 07:55 AM
don-EMerson
New Contributor II

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 = "&nbsp;";

                                    //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

0 Kudos
1 Solution

Accepted Solutions
AnneFitz
Esri Contributor

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

View solution in original post

3 Replies
AnneFitz
Esri Contributor

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

don-EMerson
New Contributor II

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?

0 Kudos
don-EMerson
New Contributor II

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.

0 Kudos