After search Dojo data Grid won't show the result and weird behavior

[Anonymous User]

Original User: dexconor

So, this is my search
[ATTACH=CONFIG]25556[/ATTACH]
I type 5 into search box and the results are highlighted but no result shows
[ATTACH=CONFIG]25557[/ATTACH]
Below is the weird thing, if I change size of browser then it shows top of rows other wise
remains above
[ATTACH=CONFIG]25558[/ATTACH]

        findTask = new esri.tasks.FindTask("http://localhost:6080/arcgis/rest/services/fc/agr/MapServer");

        dojo.connect(map, "onLoad", function() {
          //Create the find parameters
          findParams = new esri.tasks.FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [2];
          findParams.searchFields = ["OBJECTID","Number","Abbrev","CampusCode"];
          findParams.outSpatialReference = map.spatialReference;
          console.log("find sr: ", findParams.outSpatialReference);
        });  
  
      }

function doFind() {
     findParams.searchText = dojo.byId("searchField").value;
        findTask.execute(findParams,showResults);
      }

      function showResults(results) {
        map.graphics.clear();
        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 items = dojo.map(results,function(result){
          var graphic = result.feature;
          graphic.setSymbol(symbol);
          map.graphics.add(graphic);
          return result.feature.attributes;
        });
        var data = {
          identifier: "OBJECTID", 
          label: "OBJECTID", 
          items: items
        };
        store = new dojo.data.ItemFileReadStore({ data:data });
  var grid = registry.byId('grid');
  grid.setStore(store);
        map.centerAndZoom(center, zoom);
      }

      function onRowClickHandler(evt){
        var clickedTaxLotId = grid.getItem(evt.rowIndex).OBJECTID;
        var selectedTaxLot;

        dojo.forEach(map.graphics.graphics,function(graphic){
          if((graphic.attributes) && graphic.attributes.OBJECTID === clickedTaxLotId){
            selectedTaxLot = graphic;
            return;
          }
        });
        var taxLotExtent = selectedTaxLot.geometry.getExtent();
        map.setExtent(taxLotExtent);
      }

<div class ="toggle" id="menu_subA">Enter building number, name and abbreviation<br>
  <input type="text" id="searchField" size="30" value="" /><button data-dojo-type="dijit.form.Button"  onClick="doFind();" value="Search">
        Search
      </button>
<table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'10px'">
      <thead>
        <tr>
          <th field="Number" width="50">Num</th>
          <th field="Abbrev" width="50">Abbr</th>
          <th field="CampusCode" width="50">Camp</th>
        </tr>
      </thead>
    </table>
  </div>

I presume it's because of div that surrounded data grid?
and the div is a slide menu using jquery.
is there any way that I can fix both?

[BenFousek]

Try resizing your grid after setting the store

grid.resize();

Also check out the api reference http://dojotoolkit.org/api/ for dojox/grid/DataGrid and look at the sizing/display properties like autoHeight and autoWidth. Grids are inexplicably temperamental. Depending on the type of container it's in or how it's created (programmatic or declarative) make a difference in rendering.

Also, try wrapping the grid in a plain dijit/layout/ContentPane with no padding. I'm not sure if jquery is causing problems, but this should help if it is.

[Anonymous User]

Original User: dexconor

Try resizing your grid after setting the store

grid.resize();

Also check out the api reference http://dojotoolkit.org/api/ for dojox/grid/DataGrid and look at the sizing/display properties like autoHeight and autoWidth. Grids are inexplicably temperamental. Depending on the type of container it's in or how it's created (programmatic or declarative) make a difference in rendering.

Also, try wrapping the grid in a plain dijit/layout/ContentPane with no padding. I'm not sure if jquery is causing problems, but this should help if it is.

Thanks Ben, but unfortunately didn't work about I'll check that reference

I've tried

  grid.set("store",store);
  dijit.byId(grid).resize();
  grid.placeAt("grid");
  grid.startup();
  grid.resize();

all these but nothing happened.