topic Re: Programmatically create a datagrid from the results of a querytask in ArcGIS JavaScript Maps SDK Questions

Programmatically create a datagrid from the results of a querytask

TracySchloss — Tue, 13 Aug 2013 18:42:06 GMT

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?

Re: Programmatically create a datagrid from the results of a querytask

KenBuja — Tue, 13 Aug 2013 19:44:12 GMT

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.

Re: Programmatically create a datagrid from the results of a querytask

TracySchloss — Sun, 12 Dec 2021 00:14:18 GMT

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

Re: Programmatically create a datagrid from the results of a querytask

TracySchloss — Tue, 13 Aug 2013 20:27:15 GMT

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?

Re: Programmatically create a datagrid from the results of a querytask

VinayBansal — Wed, 14 Aug 2013 02:44:44 GMT

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();

Re: Programmatically create a datagrid from the results of a querytask

TracySchloss — Wed, 14 Aug 2013 13:14:34 GMT

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.

Re: Programmatically create a datagrid from the results of a querytask

zhengniu1 — Thu, 23 Jul 2015 14:48:38 GMT

hi Tray

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

Thanks alot

Re: Programmatically create a datagrid from the results of a querytask

TracySchloss — Thu, 23 Jul 2015 15:17:35 GMT

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