topic Re: DataGrid in ArcGIS JavaScript Maps SDK Questions

DataGrid

JimBob3 — Sat, 11 Dec 2021 12:01:32 GMT

I have a geprocessing service that returns JSON that I am attempting to put into a datagrid.

Snippet of JSON from GP service:

Here is the relevant code:

 map.on("load", initSelectionToolbar);


            registry.byId("point").on("click", function() {
                activateTool(this.id);
            });


            function initSelectionToolbar() {
                map.graphics.clear();
                selectionToolbar = new Draw(map);
                selectionToolbar.on("draw-end", function(e) {
                    selectionToolbar.deactivate();
                    var symbol = new SimpleMarkerSymbol(
                        SimpleMarkerSymbol.STYLE_CIRCLE,
                        16,
                        new SimpleLineSymbol(
                            SimpleLineSymbol.STYLE_SOLID,
                            new Color([89, 95, 35]), 2
                        ),
                        new Color([130, 159, 83, 0.40])
                    );
                    var graphic = new Graphic(e.geometry, symbol);
                    map.graphics.add(graphic);
                    map.infoWindow.hide();
                });
            };


            function activateTool(tool) {
                map.graphics.clear();
                map.infoWindow.hide();
                // The draw.activate expects a string like "polygon" or "freehand_polygon".
                selectionToolbar.activate(tool);
            }


            registry.byId("searchSPs").on("click", searchSPs);


            function searchSPs() {
                
                var geom = map.graphics
                var dist = dom.byId("distance").value
                var distUnit = dom.byId("distanceUnits").value
                var params = {
                        pointX: geom.graphics[0].geometry.x,
                        pointY: geom.graphics[0].geometry.y,
                        buffer: dist,
                        unitType: distUnit
                    }
                gp.submitJob(params, completeCallback, statusCallback);


            };


            function statusCallback(jobInfo) {
                console.log(jobInfo.jobStatus);
            };


            function completeCallback(jobInfo) {
                var id = jobInfo.jobId
                var data = gp.getResultData.id
                var stuff = gp.getResultData(id, "output", displaySPs);
            };


            function displaySPs(outputFile) {
             
                var searchS = outputFile.value.SPs;


                searchS.sort(function(a, b) {
                    return a.Distance - b.Distance
                });


  //tried this, does not work.
                // var items = arrayUtils.map(searchS, function(result) {
                //   return result;
                // });


                var items = []


                items = searchS;
                var data = {
                    idProperty: "output", //This field needs to have unique values
                    label: "StationID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
                    items: items
                };


                store = new ItemFileReadStore({
  //either way behaves the same way.
                    //data: {identifier: 'StationID', items: items}
                    data: data
                });


                var grid = registry.byId("grid");


                //identifier present in the store.
                grid.store = store

                //no identifier in the store, even though it is present.
                //window.grid.set("store", items);


  //this does not work.
                //grid.setStore(store);
            };

and the HTML:

<div id="rightPane" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">


            <button id="point" data-dojo-type="dijit/form/Button">Select Point</button>
            <br> Search Distance:
            <input type="text" id="distance" size="5" value="200" />


            <select data-dojo-type="dijit/form/Select" id="distanceUnits">
                <option value="feet">Feet</option>
                <option value="meters">Meters</option>
            </select>
            <br>


            <button id="searchSPs" data-dojo-type="dijit/form/Button" value="searchSPs">Search Splice Points</button>
            <br>


            <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" style="width:100%;height:100%; data-dojo-props=" rowsPerPage: '10', rowSelector: '20px' " class="roundedCorners shadow ">
                        <thead>
                            <tr>
                                <th field="StationID ">Station ID</th>
                                <th field="Subtype ">Subtype</th>
                                <th field="Distance ">Distance (meters)</th>


                            </tr>
                        </thead>
                    </table>
        </div>

When I check the datastore in the console here is what I see

No matter what I do though the datagrid is not updated with the values I am looking for. Any thoughts?

Jim

Re: DataGrid

OwenEarley — Sat, 11 Dec 2021 12:01:35 GMT

Quick observation - there is a missing semi-colon when you assign the store to the grid:

//identifier present in the store.  
 grid.store = store  // < missing semi-colon

Re: DataGrid

RobertScheitlin__GISP — Thu, 05 Mar 2015 14:13:37 GMT

Jim,

Shouldn't line 72 be

var searchS = outputFile.value.SplicePoints;

and not

var searchS = outputFile.value.SPs;

based on your JSON example?

Re: DataGrid

JimBob3 — Thu, 05 Mar 2015 14:40:09 GMT

Good catch, however the missing semicolon didn't change the behavior. I see everything in the store in the console, and there are no errors.

Re: DataGrid

JimBob3 — Thu, 05 Mar 2015 14:45:51 GMT

Hi Robert,

In my code it is, I had copied that and was playing with the names of things. I forgot to change it back before I pasted it here. I also forgot to change the idProperty at line 91 back to Distance which you can see set as the idProperty in the console. They do match in my code though.

Its not that the data isn't getting into the store, because I can check the store in the console and see every bit of data I expect. Its nothing is showing up in my datagrid.

Jim

Re: DataGrid

RobertScheitlin__GISP — Thu, 05 Mar 2015 15:01:38 GMT

Jim,

OK what about the fact that you have a space behind each field name in this code:

<th field="StationID ">Station ID</th>

<th field="Subtype ">Subtype</th>

<th field="Distance ">Distance (meters)</th>

Re: DataGrid

JimBob3 — Thu, 05 Mar 2015 15:07:48 GMT

Not sure why that was added when I added the HTML but I double checked and there is no space after any of those in my actual code. I should have put in a screen shot instead of copying the HTML.

Re: DataGrid

RobertScheitlin__GISP — Thu, 05 Mar 2015 15:26:06 GMT

Jim,

OK even in that screenshot there is an issue in your html.

You have:

<table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" style="width:100%;height:100%; data-dojo-props="rowsPerPage: '10', rowSelector: '20px'" class="roundedCorners shadow ">

Should be:

<table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" style="width:100%;height:100%;" data-dojo-props="rowsPerPage: '10', rowSelector: '20px'" class="roundedCorners shadow ">

You are missing a double quote behind the style / before the data-dojo-props

Re: DataGrid

JimBob3 — Sat, 11 Dec 2021 12:01:38 GMT

Robert,

That was a good catch. Completely missed it. Unfortunately the data is still not displaying in my datagrid. Here is my updated code (with your correction).

map.on("load", initSelectionToolbar);


registry.byId("point").on("click", function() {
    activateTool(this.id);
});


function initSelectionToolbar() {
    map.graphics.clear();
    selectionToolbar = new Draw(map);
    selectionToolbar.on("draw-end", function(e) {
        selectionToolbar.deactivate();
        var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CIRCLE,
            16,
            new SimpleLineSymbol(
                SimpleLineSymbol.STYLE_SOLID,
                new Color([89, 95, 35]), 2
            ),
            new Color([130, 159, 83, 0.40])
        );
        var graphic = new Graphic(e.geometry, symbol);
        map.graphics.add(graphic);
    });
};


function activateTool(tool) {
    map.graphics.clear();
    map.infoWindow.hide();
    // The draw.activate expects a string like "polygon" or "freehand_polygon".
    selectionToolbar.activate(tool);
}


registry.byId("searchSplicePoints").on("click", searchSplicePoints);


function searchSplicePoints() {


    var geom = map.graphics
    var dist = dom.byId("distance").value
    var distUnit = dom.byId("distanceUnits").value
    var params = {
        pointX: geom.graphics[0].geometry.x,
        pointY: geom.graphics[0].geometry.y,
        buffer: dist,
        unitType: distUnit
    }


    gp.submitJob(params, completeCallback, statusCallback);


};


function statusCallback(jobInfo) {


    console.log(jobInfo.jobStatus);


};


function completeCallback(jobInfo) {


    var id = jobInfo.jobId
    var data = gp.getResultData.id
    var stuff = gp.getResultData(id, "output", displaySplicePoints);


};


function displaySplicePoints(outputFile) {
    var searchSplice = outputFile.value.SplicePoints;


    searchSplice.sort(function(a, b) {
        return a.Distance - b.Distance
    });


    //tried this, does not work.
    // var items = arrayUtils.map(searchSplice, function(result) {
    //   return result;
    // });


    var items = []


    items = searchSplice;
    var data = {
        idProperty: "Distance", //This field needs to have unique values
        label: "Distance", //Name field for display. Not pertinent to a grid but may be used elsewhere.
        items: items
    };


    store = new ItemFileReadStore({
        //either way behaves the same way.
        //data: {identifier: 'Distance', items: items}
        data: data
    });


    var grid = registry.byId("grid");


    //identifier is present in the store.
    grid.store = store;


    //no identifier present in the store, even though it should be.
    //window.grid.set("store", data);


    //this does not work.
    //grid.setStore(store);


    console.log(grid);
};

Here is the HTML:

Here is the JSON from the service:

Here is the grid store:

Still nothing will display in my datagrid.

Jim

Re: DataGrid

RobertScheitlin__GISP — Thu, 05 Mar 2015 16:20:36 GMT

Jim,

Can you paste the text of the json results in a reply instead of a screen shot. I will attempt to throw together a sample sample to test using the json string.

Re: DataGrid

JimBob3 — Thu, 05 Mar 2015 16:27:05 GMT

Robert,

Here is JSON from the geoprocessing service.

{

"paramName": "output",

"dataType": "GPString",

"value": {"SplicePoints": [

{

"Distance": 58.602883696309995,

"Placing_Workorder": "ENG-2-CODE",

"SP_GUID": "10bf67d1-703c-449a-b7db-6a3dbf2743ee",

"SP_OID": 71,

"SplicePointX": -9043344.1822,

"SplicePointY": 2189184.3605999984,

"StationID": "SVH-4/1/7",

"Status": 101,

"Subtype": "Pedestal"

{

"Distance": 23.187442940860507,

"Placing_Workorder": "ENG-2-CODE",

"SP_GUID": "8fc0139f-0c45-4ff2-969d-ad1a596e08a9",

"SP_OID": 110,

"SplicePointX": -9043393.7766,

"SplicePointY": 2189197.5232000016,

"StationID": "SVH-4/1/5-5",

"Status": 101,

"Subtype": "Pedestal"

}

]}

}

Jim

Re: DataGrid

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:01:41 GMT

Jim,

Here I took your json data and manipulated the dgrid sample from the JS API to use your data.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with a Dojo dGrid</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #container {
      height: 100%;
      visibility: hidden;
    }

    #bottomPane {
      height: 200px;
    }

    #grid {
      height: 100%;
    }

    .dgrid {
      border: none;
    }

    .field-id {
      cursor: pointer;
    }
  </style>

  <script src="http://js.arcgis.com/3.12/"></script>
  <script>
    // load dgrid, esri and dojo modules
    // create the grid and the map
    // then parse the dijit layout dijits
    require([
      "dojo/ready",
      "dgrid/OnDemandGrid",
      "dgrid/Selection",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/dom-style",
      "dijit/registry",
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/tasks/QueryTask",
      "esri/tasks/query",
      "dojo/_base/declare",
      "dojo/number",
      "dojo/on",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane"
      ], function (
      ready,
      Grid,
      Selection,
      Memory,
      array,
      domStyle,
      registry,
      Map,
      FeatureLayer,
      SimpleFillSymbol,
      QueryTask,
      Query,
      declare,
      dojoNum,
      on,
      parser
    ) {
      ready(function () {

        parser.parse();

        // create the dgrid
        window.grid = new(declare([Grid, Selection]))({
          // use Infinity so that all data is available in the grid
          bufferRows: Infinity,
          columns: {
            "id": "ID",
            "StationID": "Station ID",
            "Distance": {
              "label": "Splice Distance",
              "formatter": dojoNum.format
            },
            "Subtype": "Sub Type"
          }
        }, "grid");


        window.map = new Map("map", {
          basemap: "streets",
          center: [-101.426, 42.972],
          zoom: 4
        });

        window.output = {
          "paramName": "output",
          "dataType": "GPString",
          "value": {
            "SplicePoints": [
              {
                "Distance": 58.602883696309995,
                "Placing_Workorder": "ENG-2-CODE",
                "SP_GUID": "10bf67d1-703c-449a-b7db-6a3dbf2743ee",
                "SP_OID": 71,
                "SplicePointX": -9043344.1822,
                "SplicePointY": 2189184.3605999984,
                "StationID": "SVH-4/1/7",
                "Status": 101,
                "Subtype": "Pedestal"
              }, {
                "Distance": 23.187442940860507,
                "Placing_Workorder": "ENG-2-CODE",
                "SP_GUID": "8fc0139f-0c45-4ff2-969d-ad1a596e08a9",
                "SP_OID": 110,
                "SplicePointX": -9043393.7766,
                "SplicePointY": 2189197.5232000016,
                "StationID": "SVH-4/1/5-5",
                "Status": 101,
                "Subtype": "Pedestal"
              }
            ]
          }
        }

        map.on("load", function (evt) {
          // show the border container now that the dijits
          // are rendered and the map has loaded
          domStyle.set(registry.byId("container").domNode, "visibility", "visible");
          populateGrid(Memory); // pass a reference to the MemoryStore constructor
        });

        function populateGrid(Memory) {
          var data = array.map(window.output.value.SplicePoints, function (sp) {
            return {
              // property names used here match those used when creating the dgrid
              "id": sp.SP_OID,
              "StationID": sp.StationID,
              "Distance": sp.Distance,
              "Subtype": sp.Subtype
            };
          });
          var memStore = new Memory({
            data: data
          });
          window.grid.set("store", memStore);
        };
      });
    });
  </script>
</head>

<body class="tundra">
  <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div>
    <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
      <div id="grid"></div>
    </div>
  </div>
</body>

</html>

Re: DataGrid

JimBob3 — Sat, 11 Dec 2021 12:01:44 GMT

Hi Robert,

Thank you for the suggestion. Here is the new updated code using your suggestion:

window.grid = new(declare([Grid, Selection]))({
    // use Infinity so that all data is available in the grid  
    bufferRows: Infinity,
    columns: {
        "id": "ID",
        "StationID": "Station ID",
        "Distance": {
            "label": "Splice Distance",
            "formatter": dojoNum.format
        },
        "Subtype": "Sub Type"
    }
}, "grid");


map.on("load", initSelectionToolbar);


registry.byId("point").on("click", function() {
    activateTool(this.id);
});


function initSelectionToolbar() {
    map.graphics.clear();
    selectionToolbar = new Draw(map);
    selectionToolbar.on("draw-end", function(e) {
        selectionToolbar.deactivate();
        var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CIRCLE,
            16,
            new SimpleLineSymbol(
                SimpleLineSymbol.STYLE_SOLID,
                new Color([89, 95, 35]), 2
            ),
            new Color([130, 159, 83, 0.40])
        );
        var graphic = new Graphic(e.geometry, symbol);
        map.graphics.add(graphic);
    });
};


function activateTool(tool) {
    map.graphics.clear();
    map.infoWindow.hide();
    // The draw.activate expects a string like "polygon" or "freehand_polygon".
    selectionToolbar.activate(tool);
}


registry.byId("searchSplicePoints").on("click", searchSplicePoints);


function searchSplicePoints() {


    var geom = map.graphics
    var dist = dom.byId("distance").value
    var distUnit = dom.byId("distanceUnits").value
    var params = {
        pointX: geom.graphics[0].geometry.x,
        pointY: geom.graphics[0].geometry.y,
        buffer: dist,
        unitType: distUnit
    }


    gp.submitJob(params, completeCallback, statusCallback);


};


function statusCallback(jobInfo) {


    console.log(jobInfo.jobStatus);


};


function completeCallback(jobInfo) {


    var id = jobInfo.jobId
    var data = gp.getResultData.id
    var stuff = gp.getResultData(id, "output", displaySplicePoints);


};


function displaySplicePoints(outputFile) {
    var searchSplice = outputFile.value.SplicePoints;


    console.log(searchSplice);


    searchSplice.sort(function(a, b) {
        return a.Distance - b.Distance
    });


    var data = arrayUtils.map(searchSplice, function(sp) {
        return {


            // property names used here match those used when creating the dgrid  
            "id": searchSplice.SP_OID,
            "StationID": searchSplice.StationID,
            "Distance": searchSplice.Distance,
            "Subtype": searchSplice.Subtype
        };
    });


    console.log(data);


    var memStore = new Memory({
        data: data
    });


    window.grid.set("store", memStore);


};

The datagrid now displays the cells, however they are empty. When I check my console, I can see searchSplice has information, but data has everything undefined.

Re: DataGrid

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:01:47 GMT

Jim,

OK you need to pay close attention to your code.

You have:

var data = arrayUtils.map(searchSplice, function(sp) { 
        return { 
            // property names used here match those used when creating the dgrid   
            "id": searchSplice.SP_OID, 
            "StationID": searchSplice.StationID, 
            "Distance": searchSplice.Distance, 
            "Subtype": searchSplice.Subtype 
        }; 
    });

So you are looping over the searchSplice array and when you do that using arrayUtils.map you are defining a var for each object in that array and the vars name in the code is sp not searchSplice, because searchSplice is the whole array and not the individual object of the array.

So it should be:

var data = arrayUtils.map(searchSplice, function(sp) {  
        return {  
            // property names used here match those used when creating the dgrid    
            "id": sp.SP_OID,  
            "StationID": sp.StationID,  
            "Distance": sp.Distance,  
            "Subtype": sp.Subtype  
        };  
    });

Re: DataGrid

JimBob3 — Thu, 05 Mar 2015 23:39:12 GMT

*sigh*

Thanks Robert. That worked.

Stupid thing to miss, but at least it now populates the grid correctly.

Jim

Re: DataGrid

RobertScheitlin__GISP — Thu, 05 Mar 2015 23:41:43 GMT

Jim,

Glad to help.

Now it is your turn to help the community by marking this question as answered. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you.
If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"