Very Simple Populate dgrid

[PaulWilner_II]

Hi folks:

I'm trying to use a query task to populate a dgrid... That's it; I don't want it to do anything else. I just want the data to be there in table form. I may and possibly will expand functionality in the future, but for now I just want to data to display. I know there are a lot of samples out there of this, but many of them have a lot of added functionality, and some use older versions of the API and some others are using dataGrid which is apparently the old version of dgrid. I'm just having trouble weeding through the samples to get to the basic functionality I want and I'm getting frustrated.

I'm a very new programmer and was hoping someone could provide a fiddle of how to do this very basic task.

Here is my relevant code:

 var tableVal = response.features.attributes.SOC2010Code;
            var tableQuery = new Query();
            tableQuery.where = "SOC_Code = " + tableVal;
            tableQuery.returnGeometry = false;
            tableQuery.outFields = ["SOC_Code", "Title", "Employment", "Average_Annual_Openings"];
            var tableQueryTask = new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/2"+ "?returnDistinctValues=true");
            tableQueryTask.execute(tableQuery,populateTable);

Queries the table in the map service


and then the call back:

        function populateTable(SOC)
        {
          var data = [];
          data = (SOC.features, function(feature)
          {
            return{
              'SOC_Code': feature.attributes.SOC_Code};
            //rest of relevant output here
            
          });
          console.log(data);
          grid = new dgrid.Grid(
            {
              renderRow:renderTable,
              showHeader: false
            }, "grid");
            grid.renderArray(data);
         
        console.log(data);
        }

As you can see I'm in the middle of figuring out exactly how to code this. I know the call back and query are executing exactly how I want them to, it is really just a matter of getting that data into a grid.

Any help would be greatly appreciated. These forums are a wonderful resource.

[JonathanUihlein]

You're almost there.

You need to do three more things:

1) Set up the columns
2) Set up the store
3) Connect the grid to the store.


To set up the columns, use the SOC.fields object in your populateTable function.
Since you've already created your data object, use that to populate the store.
Make sure to set the idProperty on your store (MANY people forget).
Connect the grid directly to the store (I don't use renderArray).

function populateTable(SOC){

  var data = [];
  data = (SOC.features, function(feature){
      return{
        'SOC_Code': feature.attributes.SOC_Code
      };
      //rest of relevant output here   
  });

  grid = new Grid({
    renderRow:renderTable,
    showHeader: false
  }, "grid");

  grid.set("columns", generateColumns(SOC.fields)); // Step 1

  var memStore = new Memory({ data: data, idProperty: "unique_id_field_goes_here"}); // Step 2

  grid.set("store", memStore); // Step 3
  
  grid.startup();

}


function generateColumns(fields){
  var columns = [];
  fields.forEach (function (field){
    var objects = {};
    objects.label = field.alias;
    objects.field = field.name;
    objects.resizable = true;
    columns.push(objects);
  });
  return columns;          
}

I like to use dgrid extensions so this is what your grid object may end up looking like:

        var StandardGrid = declare([ Grid, DijitRegistry, Selection, ColumnHider, ColumnResizer, Pagination]);
        var grid = new StandardGrid({
          cellNavigation: false,
          escapeHTMLInData: false,
          noDataMessage: "",
          loadingMessage: "",
          selectionMode: "single",
          query: complexQuery(),
          pageSizeOptions: [100, 500, 1000],
          rowsPerPage: 100,
          sort:"name",
          sortable: true,
          columns: getColumns(),
          store: new Memory({data: "", idProperty: "uID"})
        }, "grid");

[PaulWilner_II]

This is great, thanks for your response; I didn't feel close at all! I've built your code into mine, Can you tell me what dojo modules are required for your method of building the data grid? That issue seems to be throwing several errors at me at the moment.

I'm also posting my full code so you can see the whole program.

Here's what it currently does: Queries ad table and returns the schools that have a specific academic program based on user input; and puts those ones the map, then it will also return job opportunities available for that program in a table(the part I'm trying to do now)

<!DOCTYPE html>
<html>
<head>
  <title>Find a Program</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/Grid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  
  <script src="http://js.arcgis.com/3.8/"></script>
  <script>
  
  // Initializes map
    var map, defPopSymbol;
    require(["esri/map", "esri/tasks/query", "esri/tasks/QueryTask", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane", "dgrid/Grid", "dojo/store/Memory", "dojo/_base/declare", "dijit/registry","dojo/dom", "dojo/on","dojo/domReady!"], 
      function(Map, Query, QueryTask, SimpleMarkerSymbol, InfoTemplate, Color, BorderContainer, ContentPane,Grid, Memory, declare, DijitRegistry,  dom, on) { 
        map = new Map("mapDiv", {
            basemap: "streets",
            center: [-75.498,42.981], // long, lat
            zoom: 7,
            sliderStyle: "small"
        });
        
        SchoolPopSymbol = new SimpleMarkerSymbol().setColor(new Color([255,255,128, .85])); 
  // Query 1 the related to get campus IDs of program
  
          var queryTask = new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/1"+ "?returnDistinctValues=true");
          var query = new Query();
          query.returnGeometry = false;
          query.outFields = ["Primary_SUNY_Institution_ID", "SOC2010Code"];
          
          
        
      on(dom.byId("execute"), "click", execute);

      
        
        function execute () 
        {
          map.graphics.clear();
          var sel = dom.byId("AcademicProgram").value;
          query.where = "Academic_Program_Name ='" + sel +"'"; 
          queryTask.execute(query).then(getDetails);
        
        
 // Initialize and execute query 2 which takes IDs obtained from query 1 and queries the Campus layer
 
        function getDetails(response)
        {
          if (response.features.length>0)
          {
           for(var i=0, il=response.features.length; i<il; i++)
           {
            var queryVal = response.features.attributes.Primary_SUNY_Institution_ID;
            var query = new Query();
            query.where = "SUNYINSTCODE = " + queryVal;
            query.returnGeometry = true;
            query.outFields= ["SUNYINSTCODE"];
            var queryTask = new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/0");
            queryTask.execute(query,addPointsToMapX);
            
            var tableVal = response.features.attributes.SOC2010Code;
            var tableQuery = new Query();
            tableQuery.where = "SOC_Code = " + tableVal;
            tableQuery.returnGeometry = false;
            tableQuery.outFields = ["SOC_Code", "Title", "Employment", "Average_Annual_Openings"];
            var tableQueryTask = new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/2"+ "?returnDistinctValues=true");
            tableQueryTask.execute(tableQuery,populateTable);
                 
            
            }
            
          }
        
        }

   
       function addPointsToMapX(featureSet) {
       var featuresX = featureSet.features;
       var featureX;
       for (var i=0, il=featuresX.length; i<il; i++) {
          featureX = featuresX;
           map.graphics.add(featuresX.setSymbol(SchoolPopSymbol));
           

        
        }

        }
        
        function populateTable(SOC)
        {
          var data = [];
          data = (SOC.features, function(feature)
          {
            return{
              'SOC_Code': feature.attributes.SOC_Code
              };
            
            
          });
          console.log(data);
          grid = new Grid(
            {
              renderRow:renderTable,
              showHeader: false
            }, "grid");
            grid.set("columns", generateColumns(SOC.fields));
            var memStore = new Memory({data: data, idProperty: "SOC_Code"});
            grid.set("store, memStore");
            grid.startup();
         
        console.log(data);
        }
        
        function generateColumns(fields){
        var columns = [];
        fields.forEach (function (field){
        var objects = {};
        objects.label = field.alias;
        objects.field = field.name;
        objects.resizable = true;
        columns.push(objects);
        });
        return columns;  
        } 
        
          var StandardGrid = declare([ Grid, DijitRegistry, Selection, ColumnHider, ColumnResizer, Pagination]);
          var grid = new StandardGrid({
          cellNavigation: false,
          escapeHTMLInData: false,
          noDataMessage: "",
          loadingMessage: "",
          selectionMode: "single",
          query: complexQuery(),
          pageSizeOptions: [100, 500, 1000],
          rowsPerPage: 100,
          sort:"name",
          sortable: true,
          columns: getColumns(),
          store: new Memory({data: "", idProperty: "uID"})
        }, "grid");       
        
        }
        //Query for populating Combo box
        //var CMBOqueryTask = new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/1"+ "?returnDistinctValues=true");
        //var CMBOquery = new Query;
        //CMBOquery.where = "1 = 1";
        //CMBOquery.returnGeometry = false;
        //CMBOquery.outfields = ["Academic_Program_Name"];
        //CMBOqueryTask.execute(query).then (popDrop);
        


        
        
});  
      
  </script>

[MichaelVolz]

Paul:

Are you sure you posted all your code with this thread?  I'm interested in taking this code and making it work in my environment, but it seems like their is missing code.

[PaulWilner_II]

Paul:

Are you sure you posted all your code with this thread?  I'm interested in taking this code and making it work in my environment, but it seems like their is missing code.

Unfortunately our server is not public facing yet so it is  likely you'll not be able to do much with it;

That said, I did leave off the html at the end of the code.

Here's something updated.

<!DOCTYPE html>
<html>
<head>
  <title>Find a Program</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dojox/grid/resources/Grid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  
  <script src="http://js.arcgis.com/3.8/"></script>
  <script>
  
  // Initializes map
    var map, defPopSymbol;
    require(["esri/map", "esri/tasks/query", "esri/tasks/QueryTask", "esri/symbols/SimpleMarkerSymbol", "esri/InfoTemplate", "dojo/_base/Color", "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane", "dgrid/Grid", "dojo/store/Memory", "dojo/_base/declare", "dijit/registry","dojo/dom", "dojo/on","dojo/domReady!"], 
      function(Map, Query, QueryTask, SimpleMarkerSymbol, InfoTemplate, Color, BorderContainer, ContentPane,Grid, Memory, declare, DijitRegistry,  dom, on) { 
        map = new Map("mapDiv", {
            basemap: "streets",
            center: [-75.498,42.981], // long, lat
            zoom: 7,
            sliderStyle: "small"
        });
        
        SchoolPopSymbol = new SimpleMarkerSymbol().setColor(new Color([255,255,128, .85])); 
  // Query 1 the related to get campus IDs of program
  
          var queryTask = new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/1"+ "?returnDistinctValues=true");
          var query = new Query();
          query.returnGeometry = false;
          query.outFields = ["Primary_SUNY_Institution_ID", "SOC2010Code"];
          
          
        
      on(dom.byId("execute"), "click", execute);

      
        
        function execute () 
        {
          map.graphics.clear();
          var sel = dom.byId("AcademicProgram").value;
          query.where = "Academic_Program_Name ='" + sel +"'"; 
          queryTask.execute(query).then(getDetails);
        
        
 // Initialize and execute query 2 which takes IDs obtained from query 1 and queries the Campus layer
 
        function getDetails(response)
        {
          if (response.features.length>0)
          {
           for(var i=0, il=response.features.length; i<il; i++)
           {
            var queryVal = response.features.attributes.Primary_SUNY_Institution_ID;
            var query = new Query();
            query.where = "SUNYINSTCODE = " + queryVal;
            query.returnGeometry = true;
            query.outFields= ["SUNYINSTCODE"];
            var queryTask = new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/0");
            queryTask.execute(query,addPointsToMapX);
            
            var tableVal = response.features.attributes.SOC2010Code;
            var tableQuery = new Query();
            tableQuery.where = "SOC_Code = " + tableVal;
            tableQuery.returnGeometry = false;
            tableQuery.outFields = ["SOC_Code", "Title", "Employment", "Average_Annual_Openings"];
            var tableQueryTask = new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/2"+ "?returnDistinctValues=true");
            tableQueryTask.execute(tableQuery,populateTable);
                 
            
            }
            
          }
        
        }

   
       function addPointsToMapX(featureSet) {
       var featuresX = featureSet.features;
       var featureX;
       for (var i=0, il=featuresX.length; i<il; i++) {
          featureX = featuresX;
           map.graphics.add(featuresX.setSymbol(SchoolPopSymbol));
           

        
        }

        }
        
        function populateTable(SOC)
        {
          var data = [];
          data = (SOC.features, function(feature)
          {
            return{
              'SOC_Code': feature.attributes.SOC_Code
              };
            
            
          });
          console.log(data);
          grid = new Grid(
            {
              renderRow:renderTable,
              showHeader: false
            }, "grid");
            grid.set("columns", generateColumns(SOC.fields));
            var memStore = new Memory({data: data, idProperty: "SOC_Code"});
            grid.set("store, memStore");
            grid.startup();
         
        console.log(data);
        }
        
        function generateColumns(fields){
        var columns = [];
        fields.forEach (function (field){
        var objects = {};
        objects.label = field.alias;
        objects.field = field.name;
        objects.resizable = true;
        columns.push(objects);
        });
        return columns;  
        } 
        
          var StandardGrid = declare([ Grid, DijitRegistry, Selection, ColumnHider, ColumnResizer, Pagination]);
          var grid = new StandardGrid({
          cellNavigation: false,
          escapeHTMLInData: false,
          noDataMessage: "",
          loadingMessage: "",
          selectionMode: "single",
          query: complexQuery(),
          pageSizeOptions: [100, 500, 1000],
          rowsPerPage: 100,
          sort:"name",
          sortable: true,
          columns: getColumns(),
          store: new Memory({data: "data", idProperty: "SOC_Code"})
        }, "grid");       
        
        }
        //Query for populating Combo box
        //var CMBOqueryTask = new QueryTask("http://w7hp348/arcgis/rest/services/Testservice/XTest/MapServer/1"+ "?returnDistinctValues=true");
        //var CMBOquery = new Query;
        //CMBOquery.where = "1 = 1";
        //CMBOquery.returnGeometry = false;
        //CMBOquery.outfields = ["Academic_Program_Name"];
        //CMBOqueryTask.execute(query).then (popDrop);
        


        
        
});  
      
  </script>

</head>
<body class="claro">
      <div id="main" 
            dojotype="dijit.layout.BorderContainer"
            design="headline" 
            gutters="true">
      <div id="header"
             dojotype="dijit.layout.ContentPane"
             region="top"
             style="height:55px;">
     <input type="text" id="AcademicProgram" value="Program">
    <input id="execute" type="button" value="Get Details">
      </div>
  <div id="mapDiv"></div>
  


        <div id="map"
            data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region:'center'"
            style="overflow: hidden;">
        </div>
    </div>

</body>
</html>

[JonathanUihlein]

Check out this jsfiddle example using a featureLayer to populate a dgrid (no map involved):
http://jsfiddle.net/wWTVL/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>dynamic dgrid columns</title>
    <link rel="stylesheet" href="https://community.esri.com//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dgrid/css/dgrid.css">
    <style type="text/css">

    body, html{
        margin:0;
        padding:0;
        height:100%;
        width:100%;
    }
    #grid{
        border:0px;
        width:100%;
        height:100%;
    }
        
  </style>
    <script src="http://jsdev.arcgis.com/3.7/"></script>
    
    <script>
        require([
            "dojo/_base/declare", 
            "dgrid/OnDemandGrid", 
            "dgrid/Keyboard", 
            "dgrid/Selection", 
            "dojo/ready",
            "dojo/store/Memory",
            "esri/layers/FeatureLayer",
            "esri/tasks/query"
        ],
        function(declare, OnDemandGrid, Keyboard, Selection, ready, Memory, FeatureLayer, Query){

            ready(function () {
                
                var dataStore;
                var CustomGrid = declare([ OnDemandGrid, Keyboard, Selection ]);

                var grid = new CustomGrid({
                    selectionMode: "single", 
                    cellNavigation: false
                }, "grid");
                    

                var featureLayerURL = "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/usultras/FeatureServer/0";
            
                var featureLayer = new FeatureLayer(featureLayerURL, {
                    mode: FeatureLayer.MODE_SELECTION,
                    outFields: ["*"]
                });
              
                featureLayer.on("load", function() {

                    var featureArray = [];
                    var query = new Query();
                    query.where = "1 = 1";
                    featureLayer.queryFeatures(query).then(function(featureSet) {
          
                        console.log("query succeeded..", featureSet);
                        console.log("number of features:", featureSet.features.length);
            
                        for(var i=0; i<featureSet.features.length; i++){
                            //var featureID = featureSet.features.attributes[featureLayer.objectIdField];
                            var feature = featureSet.features.attributes;
                            featureArray.push(feature);
                        }
            
                        // Set Columns
                        grid.setColumns(getGridColumns(featureSet));
                        
                        // If you use a store...
                        dataStore = new Memory ({"data": featureArray, "idProperty" : featureLayer.objectIdField});
                        grid.set("store", dataStore);
                        
                        // If no store...
                        //grid.renderArray(featureArray);
                        
                        grid.startup();

                    });
                });

                function getGridColumns(featureSet){
                    var columnsTemplate = [];
                    // Generate Dynamic Columns based on Feature Layer data
                    for(var i=0; i<featureSet.fields.length; i++){
                        var columnObj = {label: featureSet.fields.name, field: featureSet.fields.alias};
                        columnsTemplate.push(columnObj);
                    }
                    return columnsTemplate;
                }
            });
        });
    </script>
</head>
<body class="tundra">
    <div id="grid"></div>
</body>
</html>

[JonathanUihlein]

Ran out of space in the other post.

Here is a more advanced sample with click interaction between the grid and map.

<!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.7/js/dojo/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dgrid/css/skins/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/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.7/"></script>
  <script>
    // Debug Globals
    var map, grid, memStore, myFeatureLayer;
    var statesUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/4";
    var outFields = ["OBJECTID", "NAME", "MEDNW_CY", "NW500_CY"];
  
    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", 
      "dgrid/extensions/ColumnResizer",
      "dijit/layout/BorderContainer", 
      "dijit/layout/ContentPane"
      
      ], function(
        ready,
        Grid, 
        Selection, 
        Memory, 
        array,
        domStyle,
        registry,
        Map, 
        FeatureLayer, 
        SimpleFillSymbol,
        QueryTask,
        Query,
        declare, 
        dojoNum, 
        on, 
        parser,
        ColumnResizer
      ) { 
        ready(function() {
        
          parser.parse();

          // Create the grid 
          var StandardGrid = declare([Grid, Selection]);
            grid = new StandardGrid({
            bufferRows: Infinity,
            cellNavigation: false,
            escapeHTMLInData: false,
            noDataMessage: "",
            loadingMessage: "",
            selectionMode: "single",
            sortable: true
          }, "grid");
          grid.startup();
          
          // add a click listener on the ID column
          grid.on(".field-id:click", function(e){
          // select the feature
            var fl = map.getLayer("states");
            var query = new Query();
            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());
              } else {
                console.log("Feature Layer query returned no features... ", result);
              }
            });
          });
          
          // Create the map object
          map = new Map("map", {
            basemap: "gray",
            center: [-101.426, 42.972],
            zoom: 4
          });
          
          // Map Load Event
          map.on("load", function( evt ){
            console.log('map loaded');
            domStyle.set(registry.byId("container").domNode, "visibility", "visible");
            populateGrid();
          });
          
           var fl = new FeatureLayer(statesUrl, {
            id: "states",
            mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
            outFields: outFields
          });

          fl.on("load", function(data) {
            fl.maxScale = 0; // show the states layer at all scales
            fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
            
            console.log('feature layer loaded', data);
            console.log('data.layer.fields', data.layer.fields);
            
            map.addLayer(fl);
          });
          
          fl.on("click", function(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();
            
          });

          // change cursor to indicate features are click-able
          fl.on("mouse-over", function() {
            map.setMapCursor("pointer");
          });
          fl.on("mouse-out", function() {
            map.setMapCursor("default");
          });


          function populateGrid() {

            var qt = new QueryTask(statesUrl);
            var query = new Query();
            query.where = "1=1";
            query.returnGeometry = false;
            query.outFields = outFields;
            qt.execute(query, function(results) {
            
              console.log('results.features', results.features);
            
              var data = array.map(results.features, function(feature) {
                return {
                  // property names used here match those used when creating the dgrid
                  "OBJECTID": feature.attributes[outFields[0]],
                  "NAME": feature.attributes[outFields[1]],
                  "MEDNW_CY": feature.attributes[outFields[2]],
                  "NW500_CY": feature.attributes[outFields[3]]
                }
              });
              grid.set("columns", generateColumns(results.fields));
              var memStore = new Memory({ data: data, "idProperty": "OBJECTID" });
              grid.set("store", memStore);
            });

          }
          
          // Returns Columns object for dgrid store
          function generateColumns(fields){
            var columns = [];
            fields.forEach (function (field){
                var objects = {};
                objects.label = field.alias;
                objects.field = field.name;
                columns.push(objects);
            });
            return columns;          
          }
          
        });// End Ready
        
        
    });
  </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>