Programmatically create a datagrid from the results of a querytask

[TracySchloss]

I have set of functions that will execute a series of querytasks based on the current layer visibility.  Now I have a featureset from each querytask, all likely to have different field names, depending on which layer it's from.  This means I need to create both the data source and grid on the fly from the results.

Each queryTask should create one new titlePane in an existing floating pane, and each titlePane is the container for one datagrid. 
The title panes are getting added, but my datagrid isn't getting created properly, so the panes are just empty.  I think I'm so close, but I'm having problems getting all the pieces I need pulled together to properly create and populate the grid.

Elsewhere I created an array of the layer names from the query tasks, while those are getting set up.  I'm using this to have a 'real' name to my titlePane, since I don't see that the original layer name is anywhere in the featureset.  The div 'attributeDiv' existing already in my floatingPane.

function queryGeometryResultsHandler_toGrid(results, idx) {     var myDiv = dojo.byId("attributeDiv");     var currentLayerId = qTaskNameList[idx];  var paneTitle = (currentLayerId.split('_').join(' '));//earlier all spaces were replaced _, now I need spaces for the title  var tp = new dijit.TitlePane({ id: 'gridPane_'+currentLayerId, title: paneTitle});             myDiv.appendChild(tp.domNode);   var itemNames = [];   var featureAttributes = dojo.map(results.features, function(feature){              return feature.attributes;  });       var firstFeature = featureAttributes[0];  for(var fieldName in firstFeature) {    itemNames.push(fieldName);   }   console.log(itemNames);           //gets the field names from the first feature for the grid  // for (fieldName in itemNames[0]) {  var currentLayout = [];  var addField;  dojo.forEach(itemNames, function (fieldName) {        /*     if (fieldName == "FID" || fieldName == "OBJECTID" ) {                 addField = { field: fieldName, formatter: makeZoomButton };                currentLayout.push(addField);              }*/             if (fieldName == "Shape" || fieldName == "FID" || fieldName == "OBJECTID") {                 addField = { field: fieldName, hidden: true };                 currentLayout.push(addField);             }  else {     //console.log("field Name is " + fieldName);                 addField = {                 field: fieldName,                 width: "120px"                };         currentLayout.push(addField);                  }             });     console.log(currentLayout);   var data = {    identifer: "OBJECTID",             items: featureAttributes         };                var currentStore = new dojo.data.ItemFileReadStore({             data: data         });            // Create Grid    var grid = new dojox.grid.DataGrid({             id: currentLayerId+"_grid",             store: currentStore             }, document.createElement('div'));              grid.startup();   var currentPane = dojo.byId('gridPane_'+currentLayerId);            currentPane.appendChild(grid.domNode);   //  tp.appendChild(grid.domName);               // tp.set("content",grid);      // }  } 

1 - I'm not sure the datagrid has the right input to be correct.  Setting breakpoints, I see there is information in the variable 'currentStore'.
2- I'm not sure that appendChild is the correct command to add the grid to the newly created titlePane, so it might be failing there?

[KenBuja]

This may not help at all, but in my project, I am running an identifyTask on the visible layers when the user clicks on the map. I use a TabContainer to hold the results, which will have a varying number of tabs, depending on how many layers are visible. Each tab contains a dGrid that shows all the results from a layer. Since each of the layers has different fields, I am building everything programmatically, with nothing hard-coded. Here's a Fiddle that show how to do that.

Although the fiddle renders the tabs a little oddly, it shows the grids properly in their individual tabs.

[TracySchloss]

That's different enough from what I have that I don't think I want to pull apart what I have.  It seems really close.  I don't think I have the definition right on the itemfilereadstore.  I changed what I had a bit, so I created the datagrid without parameters and then used setStore and setStructure. 

When I tried this, I could see that my field names were read correctly.  I have an empty grid, just headers, but no content.

  var grid = new dojox.grid.DataGrid();
  grid.setStructure(currentLayout);  //this gives me the headers I expect on my grid
  grid.setStore(currentStore);  //currentstore doesn't look right, I think it's empty

[TracySchloss]

Here's another spin on it.  Apparently there is data in my datagrid, but I don't see it until I click on a column heading to sort.  Then it appears.  Maybe this is a style problem.  Or maybe the store isn't getting read/loaded until I'm clicking a column because I have something out of sequence?

[VinayBansal · Accepted solution]

Here's another spin on it.  Apparently there is data in my datagrid, but I don't see it until I click on a column heading to sort.  Then it appears.  Maybe this is a style problem.  Or maybe the store isn't getting read/loaded until I'm clicking a column because I have something out of sequence?

Try calling grid.startup after you added the grid.domNode to the contentpane

 var currentPane = dojo.byId('gridPane_'+currentLayerId);            currentPane.appendChild(grid.domNode); grid.startup();

[TracySchloss]

That was it, thank you so much.  I knew the order of the creation mattered, but I didn't realize that startup needed to come after it was added to the pane.  In my mind, it needed to happen first.

[zhengniu1]

hi Tray

will you able to post your code to jsfiddle, please. I am seeking the same solution.

Thanks alot

[TracySchloss]

Since you're replying to a 2 year old thread, a lot has changed since then, including updating to dGrid and AMD.  Here's a sample of how I'm handling it now.

queryTask_dGrid - JSFiddle