DataGrid

[JimBob3]

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

[OwenEarley]

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

[JimBob3]

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. 

[RobertScheitlin__GISP]

Jim,

  Shouldn't line 72 be

var searchS = outputFile.value.SplicePoints;

and not

var searchS = outputFile.value.SPs;

based on your JSON example?

[JimBob3]

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

[RobertScheitlin__GISP]

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>

[JimBob3]

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.

[RobertScheitlin__GISP]

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

[JimBob3]

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

[RobertScheitlin__GISP]

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.