myGrid.setStore in nested div

StackOverflow https://stackoverflow.com/questions/21304047

Question

I am trying to develop a ersi map javascript page.

I am creating 

var myData = { items: myItems };
var myStore = new dojo.data.ItemFileReadStore({ data: myData });

These create correctly and have the correct data in

I have a problem updating a dojox.grid.DataGrid with the myGrid.setStore(myStore);

The code I have for the grid is:

                <table dojotype="dojox.grid.DataGrid" jsid="myGrid" noDataMessage="No results found in the current map extent" style="width:100%;height:100%;" selectionMode="none">
            <thead>
                <tr>
                <th field="NAME" width=75%>Neighborhood</th>        
                <th field="ownPct" width=25%>% Own</th>                                 
                </tr>
            </thead>
            </table>

This table in nested in a number of divs in the HTML.

I suspect that when I run myGrid.setStore(myStore); it cannot find the table in the DOM.

If I move the table to be out of any DIV's and have it directly after the <body> tag (see link). the code will work and populate the table. If I move the table to the end of the HTML just before the </body> tag it will work (see link). But when I put the table in the nested Divs then it will not populate (see link). this should be on the policy tab!!

I hope i make sense, this has been driving me crazy

thanks in advance Paul

Was it helpful?

Solution

I think the problem is not with setStore, but one or two other things.

When the DataGrid is instantiated, it attempts to detect the space available (to determine how many rows to render etc). You've told it to be 100% of its parent div, but remember that divs have height 0px by default!

So, you can try to give the grid (or gridDiv) an explicit height. However, the grid is also in an inactive tab so it still detects it has no height (it's invisible, after all!).

So, next you can try to set the grid's tab as the active one (i.e. <div class="tab-pane active" id="policies">). That should give you a rendered grid when the page loads.

Alas, you don't want the grid's tab to be the active one. So the final solution is that you need to explicitly tell the grid to recalculate its height (myGrid.resize()) when the policy tab is being activated. I haven't used bootstrap's tabs, so I don't know exactly how to do that - perhaps you do?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top