Grid does not render after setStore

JoanSteinbacher · ‎05-15-2013

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.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.");
 }    
}

derekswingley1 · ‎05-15-2013

Instead of:

gridpa.setStore(store);

Try:

gridpa.set("store", store);

JoanSteinbacher · ‎05-15-2013

gridpa.set("store", store);

Unfortunately that did not work either.

VinayBansal · ‎05-15-2013

Try resizing the grid after setting the store

dijit.byId(gridId).resize()

JoanSteinbacher · ‎05-16-2013

Finally got this to work - CSS (or lack thereof) was the culprit! Data was written to the grid, you just couldn't see it because I hadn't specified the width/height of the dialog box and results div. Added the following classes to the elements and styles in the css file. Thanks to all who responded, I appreciate your time.

css

.gridDialog {width:680px;height:420px}
.gridResults  {width:650px;height:300px}

html

<div dojoType="dijit.Dialog" id="paresultsDialog" class="gridDialog" 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="paresults" class="panel_content, gridResults" dojoType="dijit.layout.ContentPane" >
          <table data-dojo-type="dojox.grid.EnhancedGrid" data-dojo-id="gridpa" id="gridpa" data-dojo-props="rowsPerPage:'10', rowSelector:'5px', selectionMode:'single', plugins:{exporter:true}">          
            <thead>
              <tr>
                <th width="75px" 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>
    </div>