steinj14

Grid does not render after setStore

Discussion created by steinj14 on May 15, 2013
Latest reply on May 16, 2013 by steinj14
Hi, I am trying to show a grid in a dialog box to display the results of a query task. The query task returns results and the "store" gets created with the correct data in it. But when the dialog box displays, the grid does not show up. I have similar code in the app that works, but I can't figure out why the grid doesn't show with the code below. I have made sure there are no duplicate html ids and parseOnLoad = true.

Is there something obvious I'm missing?

Thanks,
Joan

Here's the HTML:

[HTML]     <div dojoType="dijit.Dialog" id="paresultsDialog" title="Plan Amendment Results" data-dojo-props="draggable:false">
      <div id="parowcountdisplay"></div><br \>
      <div>Click on column heading to sort the list.<br />Click on a row(s) to zoom to the plan amendment area(s) on the map.</div>
      <div id="pasearchresults" class="panel_content" dojoType="dijit.layout.ContentPane" >
          <!-- <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'10', rowSelector:'5px', selectionMode:'single'"> -->
          <table data-dojo-type="dojox.grid.EnhancedGrid" data-dojo-id="gridpastore" id="gridpa" data-dojo-props="rowsPerPage:'10', rowSelector:'5px', selectionMode:'single', plugins:{exporter:true}">         
            <thead>
              <tr>
                <th width="100px" field="OBJECTID">Result Id</th>            
                <th width="100px" field="JURISDICTION">Jurisdiction</th>
                <th width="150px" field="NAME">Plan Amendment</th>
              </tr>
            </thead>
          </table>    
      </div>     
     </div>[/HTML]

Here's the javascript:

function showPAResultsGrid(results) {
 console.log("-->inside showPAResultsGrid");

   var resultcount = results.features.length;
   console.log("# of query result objects passed into function: " + resultcount);
   var features = results.features;

 //Close the 'searching' dialog box. 
 dijit.byId("searchingDialog").hide();
 
 if (resultcount > 0) {
  //console.log("-->inside resultcount loop");
    
   //Open the dialog box to display results in a grid.   
  dijit.byId("paresultsDialog").show();
  
  //Display number of results in the dialog box header.
  dojo.byId('parowcountdisplay').innerHTML=resultcount+" results.<br/>"+ configOptions.selectpanote + configOptions.maxrecordcount + ".";
 
  //Don't clear graphics because that wipes out the buffer graphic.
  //map.graphics.clear();
  //clearAllGraphicsLayers();
  
  //var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98, 194, 204]), 2), new dojo.Color([98, 194, 204, 0.5]));
  var symbol = new esri.symbol.SimpleFillSymbol(resultfillSymbol);
 
  // //create array of attributes and add graphic to map.
  var items = dojo.map(features, function(feature){
   var graphic = new esri.Graphic(feature.toJson());
   //Setting the symbology here sets it for all features in results.
   graphic.setSymbol(symbol);
   map.graphics.add(graphic);
   //console.log("after adding graphic");
   return feature.attributes;
  });
  
  //Create data object to be used in store
  var data = {
   identifier: "OBJECTID", //This field needs to have unique values
   label: "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
   items: items
  };
  console.log(data.items);
     
  //Create data store and bind to grid.
  var store = new dojo.data.ItemFileReadStore({ 
   data: data
  }); 
  console.log(store);
     
  //Grid used in the results pop-up dialog.
  var gridpa = dijit.byId('gridpa');
  gridpa.setStore(store);
 }
 //Alert user in case plan amendment is not found, 5/15/13 jms.
 else {
  dialogAlert("Search Plan Amendment", "No plan amendment(s) found.");
 }    
}

Outcomes