topic Re: Feature Layer not populating dgrid in ArcGIS JavaScript Maps SDK Questions

Feature Layer not populating dgrid

GeoffSchwitzgebel — Mon, 30 Sep 2013 13:42:14 GMT

I have properly configured the dgrid sample to load all of the map features that are loaded in the map. I am now trying to incorporate this into my main application and I cannot figure out why it will not load the dgrid. I have copied everything over so I'm not sure why it isn't working. I am fairly new to the JS API and any assistance would be great.

Thank You,
Geoff

Here is my code:

           ready(function(){                 parser.parse();                  // create the dgrid                 window.grid = new (declare([Grid, Selection]))({                     columns: {                         "OBJECTID": "OBJECTID",                         "NAME": "Name",                         "OWNER": "Owner",                         "COUNTY": "County",                         "LATITUDE": "Latitude",                         "LONGITUDE": "Longitude"                         //"median": { "label": "Median Net Worth", "formatter": dojoNum.format },                         //"over1m": { "label": "Households Net Worth > $1M", "formatter": dojoNum.format }                     }                 }, "grid");                  // add a click listener on the ID column                 grid.on(".field-OBJECTID:click", selectState);                  var bounds = new Extent({                     "xmin": 1292510.8077427894,                     "ymin": 60762.840879261494,                     "xmax": 2759293.81036745,                     "ymax": 1233497.6866797954,                     "spatialReference": { "wkid": 3361 }                 });                  window.map = new Map("map", {                     extent: bounds,                     logo:false                 });                  var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("");                 map.addLayer(tiledMapServiceLayer                  var content = "<b>Name</b>: ${NAME}" + "<br /><b>Owner</b>: ${OWNER}" + "<br /><b>County</b>: ${COUNTY}"                   + "<br /><b>Acres</b>: ${ACRES}"                   + "<br /><b>Game Zone</b>: ${GAMEZONE}"                   + "<br /><b>DNR Region</b>: ${DNRREGION}"                   + "<br /><b>Latitude</b>: ${LATITUDE}"                   + "<br /><b>Longitude</b>: ${LONGITUDE}";                  var infoTemplate = new InfoTemplate("Dove Field", content);                  window.statesUrl = "";                 window.outFields = ["OBJECTID", "NAME", "OWNER", "COUNTY", "LATITUDE", "LONGITUDE"];//NEED TO ADD IN URL AFTER ADDING FIELD                  var fl = new FeatureLayer(window.statesUrl, {                     id:"states",                     mode: esri.layers.FeatureLayer.MODE_ONDEMAND,                     outFields: ["OBJECTID", "NAME", "OWNER", "COUNTY", "LATITUDE", "LONGITUDE"],//NEED TO ADD IN URL AFTER ADDING FIELD                     infoTemplate: infoTemplate,                 });                  fl.on("load", function () {                     fl.maxScale = 0; // show the states layer at all scales                     fl.setSelectionSymbol(new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 20).setColor('#700000'));                 });                 // fl.on("click", selectGrid);                 var scalebar = new Scalebar({                     map: map,                     scalebarUnit: "dual",                     attachTo:"bottom-center"                 });                  fl.on("mouse-over", function () {                     map.setMapCursor("pointer");                 });                 fl.on("mouse-out", function () {                     map.setMapCursor("default");                 });                  map.addLayers([fl]);                  map.on("load", function (evt) {                     domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");                     populateGrid(Memory); // pass a reference to the MemoryStore constructor                 });                  map.on("layers-add-result", function (evt) {                     var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {                         return { layer: layer.layer, title: layer.layer.name };                     });                     if (layerInfo.length >= 0) {                         var legendDijit = new Legend({                             map: map,                             layerInfos: layerInfo                         }, "legendDiv");                         legendDijit.startup();                     }                 });                  function populateGrid(Memory) {                     var qt = new QueryTask(window.statesUrl);                     var query = new Query();                     query.where = "1=1";                     query.returnGeometry = false;                     query.outFields = window.outFields;                     qt.execute(query, function (results) {                         var data = array.map(results.features, function (feature) {                             return {                                 "OBJECTID": feature.attributes[window.outFields[0]],                                 "NAME": feature.attributes[window.outFields[1]],                                 "OWNER": feature.attributes[window.outFields[2]],                                 "COUNTY": feature.attributes[window.outFields[3]],                                 "LATITUDE": feature.attributes[window.outFields[4]],                                 "LONGITUDE": feature.attributes[window.outFields[5]]                             }                         });                         window.grid.renderArray(data)                     });                 }                 // fires when a row in the dgrid is clicked                 function selectState(e) {                     // select the feature                     var fl = map.getLayer("states");                     var query = new Query();                     query.objectIds = [parseInt(e.target.textContent)];                     //query.objectIds = [parseInt(e.target.innerHTML)];                     fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) {                         if (result.length) {                             // re-center the map to the selected feature                             //window.map.centerAt(result[0].geometry.getExtent().getCenter());                             window.map.centerAt(result[0].geometry);                         } else {                             console.log("Feature Layer query returned no features... ", result);                         }                     });                 }                  // fires when a feature on the map is clicked - ORIGINAL CODE                 function selectGrid(e) {                     var id = e.graphic.attributes.OBJECTID;                     // select the feature that was clicked                     var query = new Query();                     query.objectIds = [id];                     var states = map.getLayer("states");                     states.selectFeatures(query, FeatureLayer.SELECTION_NEW);                     // select the corresponding row in the grid                     // and make sure it is in view                     grid.clearSelection();                     grid.select(id);                     grid.row(id).element.scrollIntoView();                 }               });            });

[HTML] <body class="claro">
      <div id="mainWindow"
          data-dojo-type="dijit/layout/BorderContainer"
          data-dojo-props="design:'headline', gutters:false"
          style="width: 100%; height: 100%;">

      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="title">Pier and Bank Locator</div>

        <div id="queries">
            <button id="pierBtn" class="buttons" type="button">Pier</button>
            <button id="bankBtn" class="buttons" type="button">Bank</button>
            <button id="handicapBtn" class="buttons" type="button">Handicap Access</button>
            <button id="restroomBtn" class="buttons" type="button">Restrooms</button>
        </div>
        <div id="search" class="search">
            <input id="queryNameTxt"type="text" placeholder="Enter Name Here" >
            <button id="queryNameBtn" class="queryButton" type="button">Search</button>
        </div>

        <div id="filterDropDown" data-dojo-type="dijit/form/DropDownButton">
            <span>Choose Filter</span>
            <div data-dojo-type="dijit/TooltipDialog">
                <label for="name">Handicap Access</label><br>
                <label for="hobby">Restrooms</label>
                <label for="hobby">Picnic Shelter</label>
                <label for="hobby">Restrooms</label>
            </div>
        </div>
      </div>
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
          <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
              <div id="legendPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend', selected:true">
                <div id="legendDiv"></div>
              </div>
            </div>
            <div id="logo" class="logo">
                <img src="images/DNRcolorRGB.jpg" width="40" height="50">
            </div>
      </div>
      <div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
        <div id="grid"></div>
      </div>
    </div>
</body>[/HTML]

Re: Feature Layer not populating dgrid

GaneshSolai_Sambandam — Mon, 30 Sep 2013 15:26:58 GMT

Hi Geoff
I have looked at your code, but there are 2 errors in you code.

(i) Missing bracket and ;

map.addLayer(tiledMapServiceLayer);

(ii) window.statesUrl =""; is empty at the moment.
if you are referencing a feature layer or map service layer for the window.statesUrl variable, then you need to reference or the feature layer service to your map. At the moment, it is empty.

try this see and if it works.

ganesh

Re: Feature Layer not populating dgrid

GeoffSchwitzgebel — Mon, 30 Sep 2013 15:59:51 GMT

Hi Ganesh,
I have left out my map service url's since they are only available internally. I did add the semicolon, but the grid is still not populating. I have also referenced a couple other threads related to the dgrid, added the suggested changes, but it still does not work.

Thanks,
Geoff

Re: Feature Layer not populating dgrid

JonathanUihlein — Mon, 30 Sep 2013 20:40:37 GMT

Can you post your require block as well?

I see you are using renderArray instead of a store; are you refreshing the grid after?

Are there any error messages?

If no error messages, have you tried a 'Try/Catch' block around the suspected problem?

Re: Feature Layer not populating dgrid

GeoffSchwitzgebel — Sat, 11 Dec 2021 19:42:17 GMT

Jonathan,
I am not refreshing the grid after. It did not appear that I was having any refresh issues before migrating it over to my application. I am also not receiving any error messages. I just know that an empty array is being returned:
{"objectIdFieldName":"OBJECTID","globalIdFieldName":"","features":[]} is being returned in Firebug.

I have not tried a "Try/Catch" block. I'm new to Javascript, so I will try this out tonight.

Thanks.

Require Block:

        require([
          "dojo/data/ObjectStore",
          "esri/symbols/SimpleFillSymbol",
          "esri/tasks/QueryTask",
          "esri/tasks/query",
          "dojo/_base/declare",
          "dojo/number",
          "dijit/registry",
          "dojo/store/Memory",
          "dgrid/OnDemandGrid",
          "dgrid/Selection",
          "esri/symbols/SimpleLineSymbol",
          "esri/symbols/SimpleMarkerSymbol",
          "dojo/dom-construct",
          "esri/map",
          "esri/layers/FeatureLayer",
          "esri/geometry/Extent",
          "esri/InfoTemplate",    
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dijit/layout/TabContainer",
          "esri/dijit/Legend",
          "dojo/_base/array",
          "dojo/parser",
          "dijit/form/ToggleButton",
          "dojo/dom-style",
          "dojo/dom",
          "esri/dijit/Scalebar",
          "dojo/ready",
          "dojo/on",
          "dijit/form/DropDownButton",
          "dojo/domReady!"
        ], function (
            ObjectStore,
            SimpleFillSymbol,
            QueryTask,
            Query,
            declare,
            dojoNum,
            registry,
            Memory,
            Grid,
            Selection,
            SimpleLineSymbol,
            SimpleMarkerSymbol,
            domConstruct,
            Map,
            FeatureLayer,
            Extent,
            InfoTemplate,
            BorderContainer,
            ContentPane,
            TabContainer,
            Legend,
            arrayUtils,
            parser,
            ToggleButton,
            domStyle,
            dom,
            Scalebar,
            ready,
            on,
            DropDownButton
          )

Re: Feature Layer not populating dgrid

JonathanUihlein — Sat, 11 Dec 2021 19:42:19 GMT

At:

var data = array.map(results.features, function (feature) {
    return {
         "OBJECTID": feature.attributes[window.outFields[0]],
         "NAME": feature.attributes[window.outFields[1]],
         "OWNER": feature.attributes[window.outFields[2]],
         "COUNTY": feature.attributes[window.outFields[3]],
         "LATITUDE": feature.attributes[window.outFields[4]],
         "LONGITUDE": feature.attributes[window.outFields[5]]
    }
});

Is your data variable successfully populated?

Have you considering using a store since you are using an OnDemandGrid?
Essentially, you invoke and pass along the Memory module but don't use it.

Off topic: Is there a specific reason you are storing things globally using the window object? This is fine for debugging but generally not encouraged in a production environment.

Re: Feature Layer not populating dgrid

GeoffSchwitzgebel — Tue, 01 Oct 2013 00:39:56 GMT

It appears the data has populated as it is showing 202 features. However once I step into that function, I am getting a reference error on the array (ReferenceError: array is not defined):

[ATTACH=CONFIG]27903[/ATTACH]

I believe I tried an example from one of your responses from a previous thread where you mentioned using a Store. These are a couple of alternatives that I had commented out for this section. The data grid is still not loading when I tried these.

                        //var memStore = new Memory({ data: data });
                        var memStore = new Memory({ data: data, idProperty: "OBJECTID" });
                        //window.grid.set("store", memStore);
                        //window.grid.renderArray(data)

As for using the window object, it was included with the sample that was using to implement the dgrid. Unfortunately I am just beginning to use the API and these seem to be the necessary growing pains.

Thanks,
Geoff

Re: Feature Layer not populating dgrid

JasonZou — Tue, 01 Oct 2013 02:31:20 GMT

The alias you set for "dojo/_base/array" module is arrayUtils, not array. So

Change:

var data = array.map(results.features, function (feature) {

To:

var data = arrayUtils.map(results.features, function (feature) {

Remember to change all array operations accordingly.

Re: Feature Layer not populating dgrid

GeoffSchwitzgebel — Tue, 01 Oct 2013 13:54:53 GMT

Jason,
I made the changes from array to arrayUtil, but the grid is still not loading.

Geoff

Re: Feature Layer not populating dgrid

JonathanUihlein — Tue, 01 Oct 2013 14:13:00 GMT

Hey Geoff,

I tried to make a demo using your code but I don't have enough context to do it successfully (need your css, and a ArcGISTiledMapServiceLayer with a spacial reference of wkid: 3361)

Could you replicate your problem in a jsfiddle so us forum-goers can have a better chance of successfully fixing the problem.

One thing I noticed while trying to build a demo: the parser is potentially being called too early.
Make sure your map and dgrid are created before invoking parser.parse();
Hard to say if that matters in the context of this application without seeing the error in action.

Re: Feature Layer not populating dgrid

GeoffSchwitzgebel — Tue, 01 Oct 2013 15:06:10 GMT

Hey Jon,
Unfortunately we don't have any public facing services, they are all inside our network. So I replaced the feature service and field information with the one that was used in the sample https://developers.arcgis.com/en/javascript/jssamples/fl_dgrid.html.

Here is a link to the fiddle:
http://jsfiddle.net/gschwitz/8RvcR/5/

I also moved the parser down after the map and grid loaded and nothing changed.

Thanks,
Geoff

Re: Feature Layer not populating dgrid

JonathanUihlein — Tue, 01 Oct 2013 15:28:52 GMT

http://jsfiddle.net/8RvcR/8/

Fixed. Made a number of small changes.

If you use a different dataset, you have to change the column definitions and the outFields for the new dataset.

Also, if your code fails silently, use try/catch blocks to identify the source of the error.
This is the best JS advice anyone ever gave me.

Re: Feature Layer not populating dgrid

GeoffSchwitzgebel — Tue, 01 Oct 2013 17:30:16 GMT

Thanks for your assistance Jon. So it looks like you moved the map, grid and memstore outside of the ready function and added the line window.grid.set("store", memStore); into the populateGrid function?

Geoff

Re: Feature Layer not populating dgrid

JonathanUihlein — Tue, 01 Oct 2013 17:32:09 GMT

Thanks for your assistance Jon. So it looks like you moved the map, grid and memstore outside of the ready function and added the line window.grid.set("store", memStore); into the populateGrid function?

Geoff

I also changed a leftover reference from 'array' to 'arrayUtils,' made sure you were setting the correct idProperty for the store and removed a reference to a div with an id of 'container' that did not exist.