CODEWITHSUNDEEP
dojodojox.grid.datagrid
Hackie
Hackie

Reputation: 125

dojo datagrid only show one line

I meet a headache problems, when I use dojo to develop a frontend UI. I have google this problem for a long time. So does the mailist and bugtracker.

When I open a page with TabContainer and swith to a Tab, the DataGrid in the Tab didn't properly displayed.Now I switch to another Tab and switch back again, the grid properly displayed.I implement this in Declarative dojo. Only one line javascript code.

<script>
    function imgFormatter(s) {
        return '<img src="' + s + '"/>';
    }
</script>

situation is like this: Open the page https://i.sstatic.net/QGeid.png

switch to another Tab and siwtch back again https://i.sstatic.net/OWQxR.png

code:

<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center'">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="tab1">
         tab1
    </div>
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="Hosts">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
            <div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props="url: dojo.config.api2Path + '/GangliaHostMetric', urlPreventCache:true, clearOnClose:true" data-dojo-id="gangliaHostSummaryStore"></div>
            <table data-dojo-type="dojox.grid.DataGrid" data-dojo-props="region: 'center', query : {}, store:gangliaHostSummaryStore" data-dojo-id="gangliaHostSummaryGrid">
                <thead>
                    <tr>
                        <th field="hostname">hostname</th>
                        <th field="load_report" width="300" formatter="imgFormatter">Load</th>
                        <th field="mem_report" width="300" formatter="imgFormatter">Memory</th>
                        <th field="network_report" width="300" formatter="imgFormatter">Network</th>
                        <th field="cpu_report" width="300" formatter="imgFormatter">CPU</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

Upvotes: 0

Views: 609

Answers (1)

PEM
PEM

Reputation: 1978

IF the grid si the only thing displayed in the tab, then you don't need all these BorderContainers and ContentPanes, put the grid as directChild of the TabContainer.

Otherwise, it is a famous problem, one way to solve this is to create the grid programmatically after the tab onLoad. Tha means basically connecting to tab onLoad event, and create the grid here. Another way to fix it is to play around with doLayout, isLayoutContainer, and specify the size of the parent widget also.

With all of this you should find a suitable solution to your problem. If you want more guidance, I'd recommand joining irc freenode #dojo. There you'll maybe find someone to guide you step by step :)

Upvotes: 1

Related Questions