Feature Layer not populating dgrid

[GeoffSchwitzgebel]

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]

[GaneshSolai_Sambandam]

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

[GeoffSchwitzgebel]

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

[JonathanUihlein]

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?

[GeoffSchwitzgebel]

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
          )

[JonathanUihlein]

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.

[GeoffSchwitzgebel]

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

[JasonZou]

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.

[GeoffSchwitzgebel]

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

Geoff

[JonathanUihlein]

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.