CODEWITHSUNDEEP
javascriptdojo
dan
dan

Reputation: 515

dojox DataGrid not displaying

I have a contentPane/tabContainer declared in html markup. The 3rd tab holds a dojox.grid.DataGrid, which is hidden by default.

After findTask.execute, the dataStore is set and dojox.grid.DataGrid is filled, but I can't get it to display.

here's a jsfiddle:

http://jsfiddle.net/dbecker88/BhNEa/2/

At the bottom of the html markup, if you remove the "searchStatus" div and re-run the jsfiddle, the results display fine.

Any advice?

Thanks!

Upvotes: 0

Views: 744

Answers (1)

mschr
mschr

Reputation: 8641

Reason is, that the ContentPane layout container evaluates if there's a single child - or multiple. It handles sizing differently - and will know if 'isSingleChild' and child == widget. If it reckognizes a widget, it calls its resize function.

To go abouts this, you need to call resize manually - with the dimensions of the ContentPane which houses your grid. Here's one way, via markup

      <div id="searchCol" dojoType="dijit.layout.ContentPane" title="Find Results">


<script event="onShow" type="dojo/connect">
  // onShow connect is 1 ms too early to connect, adding 'whenIdle'
  setTimeout(function() {
    dijit.byId('grid').resize(
        dojo.getMarginBox('searchCol')
    );
  },1);
</script>



          <!--REMOVE the searchStatus element and the dataGrid displays? -->
          <div id="searchStatus"></div>
          <!--REMOVE the searchStatus element and the dataGrid displays? -->

          <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
                  <thead>
                    <tr>
                      <th field="PARCELID">Parcel ID</th>
                      <th field="OWNERNME1" >Owner 1</th>
                      <th field="OWNERNME2">Owner 2</th>
                      <th field="RESYRBLT ">Year Built</th>
                      <th field="SITEADDRESS" width="100%">Address</th>
                    </tr>
                  </thead>
                </table>

          <button id="clearSearch" dojoType="dijit.form.Button" type="button" onclick="clearSearchResults()" title="Clear Search Results" label="Clear Results"
                    iconClass="clearSearchBtn" style="position:absolute; bottom:7px;cursor:pointer; visibility:hidden"></button>
      </div>

Off course, this will consume the full size and leave out nothing for button and searchstatus. You would need a calculation to do that. Something similar to:

var size = dojo.getMarginBox('searchCol');
size.h = size.h 
   - dojo.getMarginBox(dojo.byId('searchStatus')).h
   - dojo.getMarginBox(dojo.byId('clearSearch')).h;
dijit.byId('grid').resize(size);

Upvotes: 1

Related Questions