Troubles getting DataGrid to show

[koma]

Hi,

I have a TabLayoutPanel and in the second tab, I would like to display a DataGrid (the scrollable, fixed header version of CellTable). I have been reading here a bit about the requirement to put it in a LayoutPanel so I tried (among other things) this :

<g:HTMLPanel ui:field="body" addStyleNames="{style.details}">

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

addStyleNames="{style.tablayoutpanel}">

<g:tab>

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

<g:HTMLPanel>

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

</g:Anchor>

</g:HTMLPanel>

</g:tab>

<g:tab>

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

<g:ResizeLayoutPanel width="100%" height="156px">

<c:DataGrid stylePrimaryName='{style.table}' ui:field='table' height="156px" />

</g:ResizeLayoutPanel>

</g:tab>

</g:TabLayoutPanel>

</g:HTMLPanel>

Unfortunately, only the header is showing, no data.

When I replace DataGrid with CellTable in both the uibinder xml and my code, the table displays without problems.

Anybody ?

[Juan Pablo Gardella]

Hi,

See  http://stackoverflow.com/questions/7874168/solved-gwt-datagrid-automatic-height.

You need in DOM tree, in some point, a fixed region that is the parent of the DataGrid, or attach to html body element the RootLayoutPanel. I had a problem recently, check T.Broyer suggestion at this thread.

Juan

2011/12/1 koma <ko...@koma.be>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/knrykfdWM-UJ.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[koma]

Thx Juan

I made sure now that from the outermost container upto my DataGrid, everything is using layoutpanel like this :

<ui:style>

@def coloricons #333333;

@def hovercolor orange;

body,html {

padding: 0;

border: 0;

margin: 0;

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

color: coloricons;

}

#parent {

position: absolute;

background-color: #f2f2f2;

}

.ticket {

margin-right: 3px;

display: inline-block;

font-size: 22px;

padding-right: 5px;

color: coloricons;

}

.ticket:hover {

font-weight: bold;

font-size: 22px;

color: hovercolor;

cursor: pointer;

cursor: hand;

text-decoration: none;

}

.ticketimage {

padding-right: 1px;

}

.feedback {

position: absolute;

width: 30px;

left: 10px;

top: 10px;

}

.action {

margin: 0px auto;

cursor: pointer;

cursor: hand;

}

.container {

position: absolute;

left: 0px;

top: 0px;

right: 0px;

bottom: 0px;

border: 1px solid #92C845;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

background-color: white;

min-width: 600px;

}

.blockLabel {

position: absolute;

top: 12px;

left: 28px;

min-width: 50px;

display: inline-block;

font-size: 12px;

font-weight: bold;

color: coloricons;

cursor: pointer;

cursor: hand;

}

.blockLabel:hover {

color: hovercolor;

}

.blockActions {

}

.blockActions:hover {

background-color: hovercolor;

}

.blockTickets {

position: absolute;

top: 5px;

right: 10px;

display: inline-block;

}

.details {

position: absolute;

left: 0px;

right: 0px;

top: 42px;

bottom: 200px;

}

.buttonbar {

width: 100%;

height: 100px;

}

.table {

width: 100%;

}

.tablayoutpanel {

position: absolute;

left: 0px;

right: 0px;

top: 0px;

height: 156px;

}

.top {

display: block;

border: 1px solid red;

}

</ui:style>

<g:LayoutPanel styleName="{style.container}" ui:field="container">

<g:layer top="0px" left="0px" right="0px" height="40px">

<g:HTMLPanel ui:field="top" styleName="{style.top}">

<g:HTMLPanel styleName="{style.feedback}">

<g:Image ui:field="action" styleName="{style.action}"></g:Image>

</g:HTMLPanel>

<g:HTMLPanel styleName="{style.blockLabel}">

<g:Label ui:field="label">details</g:Label>

</g:HTMLPanel>

<g:HTMLPanel styleName="{style.blockTickets}">

<g:Image ui:field="newOrOpenImage" styleName="{style.ticketimage}"

altText="new or open tickets" title="new or open tickets" />

<g:Anchor styleName="{style.ticket}" ui:field="newOrOpen" />

<g:Image ui:field="pendingImage" styleName="{style.ticketimage}"

altText="pending tickets" title="pending tickets" />

<g:Anchor styleName="{style.ticket}" ui:field="pending" />

<g:Image ui:field="solvedOrClosedImage" styleName="{style.ticketimage}"

altText="solved or closed tickets" title="solved or closed tickets" />

<g:Anchor styleName="{style.ticket}" ui:field="solvedOrClosed" />

</g:HTMLPanel>

</g:HTMLPanel>

</g:layer>

<g:layer top="41px" left="0px" right="0px" height="200px">

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

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

<g:tab>

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

<g:HTMLPanel>

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

</g:Anchor>

</g:HTMLPanel>

</g:tab>

<g:tab>

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

<c:DataGrid ui:field='table' height="156px" />

</g:tab>

</g:TabLayoutPanel>

</g:layer>

</g:LayoutPanel>

The view is being added to the RootLayoutPanel.... but no luck. Only the DataGrid header is shown but no data itself. CellTable works fine.

Any thoughts ?

A

[koma]

screenshot 

[Juan Pablo Gardella]

Try make a sample (without third dependencies) to reproduce the error and share it.

2011/12/1 koma <ko...@koma.be>

A

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/HVlJPE7rTwgJ.