dgrid not populated with Memory - querytask results

[TracySchloss]

I have found multiple threads about populating a dgrid from results of a query task, but I still can't figure out what is wrong with the way I have my dGrid and Memory created. 

I have multiple queries getting executed, and each of the query results will be put in a separate Title Pane within a Floating Pane.  The title panes are getting created and I see that my Memory is populated, but I must not have this formatted correctly, because when I use it as the store for my dGrid, I get an empty grid.  The loop that reads the attribute names to create the columns look right.

function queryGeometryResultsHandler_toGrid(results, idx) { //format the data for the data grid var dataList = {};     dataList.data = arrayUtils.map(results.features, function(feature){              return feature.attributes;     });     var currentMemory = new Memory({data:dataList.data, idProperty:'OBJECTID'});      var gridcolumns = [];          for (attName in dataList.data[0]) {             if (attName != "Shape" && attName !== "Shape.area" && attName !== "Shape.len") {                 var objects = {};                 objects.label = attName;                 objects.field = attName;                 gridcolumns.push(objects);             }         }  //create a titlePane in the floatingPane for each visible layer     var currentLayerId = qTaskNameList[idx];//a list of layers created in query task functions     var paneTitle = (currentLayerId.split('_').join(' '))+"  ("+results.features.length+")";//formats string to look nice     tp = new TitlePane({ id: 'gridPane_'+currentLayerId, title: paneTitle, splitter:true, class:'reportTitlePane'});     registry.byId("reportContainer").addChild(tp);     tp.startup();  // Create Grid using structure and data defined above     grid = new Grid({id:currentLayerId+'_grid', autoHeight:true, columns:gridcolumns, store:currentMemory} ); //dgrid              grid.startup();            if (results.features.length > 0) {            tp.set("content", grid);         }else {             tp.set("content", "No features found");         }     }

I had this working in non-AMD style, but there I was using ItemFileReadStore and Dojox.Grid.DataGrid, so I know my theory is basically sound, just not the syntax.

Here's a link.  You have to turn on some layer other than legislative districts, like schools,  and then enter a district number to initiate the query.  https://ogitest.oa.mo.gov/LEGIS/LegislativeAnalysis/index.html

[TracySchloss]

I missed the ColumnHider part in your declaration before.  That works well, thanks.  I had a problem with my Floating Pane looking like it was scrolled all the way to the bottom, instead of the top, but adding the overflow style on the TitlePane seems to have fixed it both that issue as well as putting the scrollbars where they needed to be. 

The last thing I need to get working is the column is "zoom" buttons I used to have, which was a formatted way of showing the Object ID column.  I have those functions commented out because I wasn't ready to tackle that yet, especially because that was a dojox/grid/datagrid and now I'm using onDemandGrid.  Hopefully there's still a way to add a formatter on a field.

[KenBuja]

Take a look at this thread on StackOverflow on adding widgets to a dgrid

[TracySchloss]

I hate to mark any particular reply as the answer to my posting, but I'm always looking for the green 'A' to know the posting did had a resolution.    I'll continue to pursue my formatting a zoom button question, but mark this answered since my grid now has data in it.

[KenBuja]

I hate to mark any particular reply as the answer to my posting, but I'm always looking for the green 'A' to know the posting did had a resolution.    I'll continue to pursue my formatting a zoom button question, but mark this answered since my grid now has data in it.

You could indicate which postings were helpful in your final solution 🙂

[KenBurcham]

Glad you found a solution.  Sorry for putting you on the wrong trail!

[DavidColey]

Hi Tracy-
I am a bit new to the JavaScript world, having recently migrated over from the flex api world in the last three months.  I began working quite a bit with Jeff Pace recently, whom I'm sure you recognize from this forum, he's in a neighboring county.  On a recent project returning feature query results to an onDemand Grid, I used the following. It's all AMD, so hopefully this will help, please forgive the length of my post.  BTW, nice app. :

Requires (dgrid specific):
"dojo/data/ItemFileReadStore",
"dojo/store/DataStore",
"dojo/store/Memory",
"dojo/date/locale",
"dgrid/OnDemandGrid",
"dgrid/Selection", //only for dgrid with attribute fields from feature layer

(obviously I requrie array, on, dom etc)

Aliases:
ItemFileReadStore
DataStore
Memory
locale
declare
array

In my ready function, initialize the the grid, store it in a div:  Some column formatters are inlcuded (are project specific)

/*var gridEvac = new (declare([Grid, Selection, TextSymbol]))({
      bufferRows : Infinity,
      noDataMessage : "No Evacuation Zone!",
      columns : {
      EvacuationZone : "Evacuation Zone",
        /*datetime : {
          "label" : "Date/Time",
          "formatter" : function(dtStorm) {
            return locale.format(new Date(dtStorm));
          }
        },*/
        SurgeHeight : "Surge Height Range",
        Hyperlink : {
         "label" : "Emergency Services",
         "formatter" : function(link) {
          return "<a target='_blank' href=https://www.scgov.net/AllHazards/Pages/default.aspx>Click Here</a>";
         }
          }
        }
    }, "divGrid");

setting an output fields array to pass to return array from our feature results query in a results function e.g:

var outFieldsEvac = ["EvacuationZone", "SurgeHeight"];

function populateGrid(results) {
var dataEvac = array.map(results.features, function(feature) { //Reference the attribute field values and set up the return to pass to the grid
   return {
    "EvacuationZone" : "Zone " + feature.attributes[outFieldsEvac[0]],
                    "SurgeHeight" : feature.attributes[outFieldsEvac[1]]
          };
       });

//Then     
     // Pass the data to the grid
     var memStore = new Memory({
      data : dataEvac
       });
       gridEvac.set("store", memStore);
       gridEvac.renderArray(dataEvac);
    } //populateGrid function close

Lastly, if you wish to clear items from the grid:

function removeInfoGraphics() {
  //mapMain.infoWindow.hide();
  //mapMain.graphics.clear();
  var clearStore = new ItemFileReadStore({data: {identifier: "",  items: []}});
  gridEvac.setStore(clearStore); //clears the grid, kudos Michael!
};

Then some simple styling in a separte css file:
#divGrid {
  width: 100%;
}
.dgrid {
  border: none;
}
.field-EvacuationZone {
  width: 20%;
}
.field-SurgeHeight {
  width: 20%;
}
.field-Hyperlink {
  width: 20%;
}

Thanks-
David

[KenBuja]

Tracy, I'd also like to compliment you on your site. It has a very good look and feel, without some of the typical Esri-centric jargon (basemap) to help the casual user.