DataGrid in TabLayoutPanel is empty/filled depending on the order of the tabs

[koma]

Hey,

I posted before about my problems getting data to display after moving from CellTable to DataGrid. I investigated some more. I can get the data to display in the DataGrid when the DataGrid is in the first tab. Switching it to the second tab, the DataGrid appears empty with only the title displaying.

I removed all bells and whistles from the layout and this is what is working :

<ui:style>
.layoutpanel {
border: 1px solid red;
min-widht: 400px;
}
.tablayoutpanel {
border: 1px solid green;
}
</ui:style>
<g:LayoutPanel ui:field="container" height="300px"
addStyleNames="{style.layoutpanel}">
<g:layer>
<g:TabLayoutPanel barUnit='PX' barHeight='30'
height="250px" addStyleNames="{style.tablayoutpanel}">
<g:tab height="100%">
<g:header>history</g:header>
<c:DataGrid ui:field='table' height="100%" />
</g:tab>
<g:tab height="100%">
<g:header>actions</g:header>
<g:HTMLPanel>
<g:Anchor href="#" ui:field="newTicketAnchor">actions
</g:Anchor>
</g:HTMLPanel>
</g:tab>
</g:TabLayoutPanel>
</g:layer>
</g:LayoutPanel>

While exactly the same layout but the order of the tabs swichted is NOT working

<g:LayoutPanel ui:field="container" height="300px"

addStyleNames="{style.layoutpanel}">

<g:layer>

<g:TabLayoutPanel barUnit='PX' barHeight='30'

height="250px" addStyleNames="{style.tablayoutpanel}">

<g:tab height="100%">

<g:header>actions</g:header>

<g:HTMLPanel>

<g:Anchor href="#" ui:field="newTicketAnchor">actions

</g:Anchor>

</g:HTMLPanel>

</g:tab>

<g:tab height="100%">

<g:header>history</g:header>

<c:DataGrid ui:field='table' height="100%" />

</g:tab>

</g:TabLayoutPanel>

</g:layer>

</g:LayoutPanel>

Any ideas ?

[koma]

So for the red code : the DataGrid appears without data, only the header is displayed !

[koma]

Somebody can have a look pls, driving me nuts.

Thinking the HTMLPanel might be the bad guy, I replaced this with a layoutpanel as well :

<ui:style>

@def coloricons #333333;

@def hovercolor orange;

body,html {

padding: 0;

border: 0;

margin: 0;

font-family: 'Droid Sans', sans-serif;

color: coloricons;

}

.layoutpanel {

border: 1px solid red;

min-widht: 400px;

}

.tablayoutpanel {

border: 1px solid green;

}

</ui:style>

<g:LayoutPanel ui:field="container" height="300px"

addStyleNames="{style.layoutpanel}">

<g:layer>

<g:TabLayoutPanel barUnit='PX' barHeight='30'

height="250px" addStyleNames="{style.tablayoutpanel}">

<g:tab height="100%" width="100%">

<g:header>actions</g:header>

<g:LayoutPanel>

<g:layer>

<g:Label>test</g:Label>

</g:layer>

</g:LayoutPanel>

</g:tab>

<g:tab height="100%" width="100%">

<g:header>history</g:header>

<c:DataGrid ui:field='table' height="100%" />

</g:tab>

</g:TabLayoutPanel>

</g:layer>

</g:LayoutPanel>

Still, the DataGrid remains empty while switching both tabs and the DataGrid is showing OK :

<g:LayoutPanel ui:field="container" height="300px"

addStyleNames="{style.layoutpanel}">

<g:layer>

<g:TabLayoutPanel barUnit='PX' barHeight='30'

height="250px" addStyleNames="{style.tablayoutpanel}">

<g:tab height="100%" width="100%">

<g:header>history</g:header>

<c:DataGrid ui:field='table' height="100%" />

</g:tab>

<g:tab height="100%" width="100%">

<g:header>actions</g:header>

<g:LayoutPanel>

<g:layer>

<g:Label>test</g:Label>

</g:layer>

</g:LayoutPanel>

</g:tab>

[koma]

Ok

this seems to fix it 

@UiHandler("tabLayoutPanel")

public void onClick(SelectionEvent<Integer> event) {

table.onResize();

}

but i am not sure wether this is best practice ??

[Magallo]

I have the exact same problem. Did you solve the problem in another way? Anyway I will try the workaround you suggested here...

[Magallo]

It works! Yes, I have to admit that's a little weird. It is definitely a workaround and not a 'feature', but it works! Thanks a lot! If you find a real, good solution, anyway, please let me know.