-
1. Re: DataTable - Vertical Scroll Bar
nbelaevski Mar 30, 2010 8:30 PM (in response to sincanvin)Hi Vinny,
Have you tried rich:extendedDataTable?
-
2. Re: DataTable - Vertical Scroll Bar
jobor Mar 31, 2010 5:24 AM (in response to sincanvin)Hi,
I'm using a datatable with vertical scrollbar. The extended datatable is nice but takes more time in redrawing on responding to node selects of a tree. The "old" datatable is reacting more smooth because its less complex.
What I did was using 2 datatables on top of each other. One for the header and one for the rows. The rows datatable is wrapped in a DIV with scrollbars. At the end I'm also using a dummy column using as much space as the widest scrollbar in different browsers. Then al the colomn dividers of the top header table and colomn table will stay on each other.
You can also see the use of a background-image. That is a one pixel line with the same colour as the border of the datatable.
I you give the rows div a height you normaly won't see a left border. Now the background image is simulating the left border of the rows table beacause the background image is in line with the left border of the datatable.
This is useful if your table contains only a few rows and does not occupy all the vertical height.
Hope that it's useful for you!
Johan
The code:
<div id="production-list-header-div">
<rich:dataTable columns="3" columnsWidth="80,300" style="width: 100%;">
<rich:column sortable="false">
<f:facet name="header">
<h:outputText value="Projectnr." />
</f:facet>
</rich:column>
<rich:column sortable="false">
<f:facet name="header">
<h:outputText value="Gidstitel" />
</f:facet>
</rich:column>
<rich:column sortable="false">
<f:facet name="header">
</f:facet>
</rich:column>
</rich:dataTable>
</div>
<div id="production-list-rows-div" style="background-image: url('../images/div-border-left.jpg'); background-repeat: repeat-y; height: 400px; overflow: scroll;">
<rich:dataTable value="#{productionHandler.productions}" var="prod"
columns="3" columnsWidth="80,300"
style="border-top-width: 0px; width: 100%;">
<rich:column sortable="false" >
<h:outputText value="#{prod.code}" />
</rich:column>
<rich:column sortable="false">
<h:outputText value="#{prod.broadcastTitle}" />
</rich:column>
<rich:column sortable="false">
</rich:column>
</rich:dataTable>
</div>