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]

[GeoffSchwitzgebel]

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

[JonathanUihlein · Accepted solution]

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.

[GeoffSchwitzgebel]

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

[JonathanUihlein]

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.