PrimeFaces Tree scrollable fixed size - primefaces

Question

I have a huge tree component in my primefaces application. The tree has hundreds of nodes and I want the tree to have fixed height in my UI with vertical scroll to navigate the nodees.
Can someone help me figure this out?
Thanks

Answer 1

Put that tree in a panel and then apply style to that panel. For example:
<p:outputPanel style="width: 100%;height: 100px;overflow: auto;display: block">
<p:tree value="#{bean.root}">
<p:treeNode>
<h:outputText value="#{doc}" />
</p:treeNode>
</p:tree>
</p:outputPanel>

Answer 2

I use p:scrollPanel
<p:scrollPanel style="height:450px;width:500px;">
<p:tree ...>
</p:tree>
</p:scrollPanel>

Answer 3

p:scrollPanel does not work well.
Use: p:layout
Here an example:
<p:layout style="max-width:800px;min-height:300px;width:800px;height:300px;">
<p:layoutUnit position="north">
<p:panelGrid columns="2" columnClasses="label,value"
style="text-align:left;">
<p:outputLabel value="Nombre:" for="nombre" />
<p:outputLabel id="nombre"
value="#{segPerfilBean.currentObject.segPerNombre}"
title="Nombre" />
</p:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:panelGrid id="catalogContent" style="width: 100%;">
<p:tree value="#{segPerfilBean.rootOpciones}" var="doc"
disabled="true" readOnly="true" selectionMode="checkbox"
selection="#{segPerfilBean.selectedNodes}"
style="width:100%;height:100%;">
<p:treeNode type="perfil">
<h:outputText value="#{doc.segPerNombre}" />
</p:treeNode>
<p:treeNode type="modulo">
<h:outputText value="#{doc.segModNombre}" />
</p:treeNode>
<p:treeNode type="opcion">
<h:outputText value="#{doc.segOpcNombre}" />
</p:treeNode>
</p:tree>
</h:panelGrid>
</p:layoutUnit>
</p:layout>

Answer 4

<p:tree value="#{bean.root}"
style="width: 100%;height: 100px;overflow: auto;display: block">
<p:treeNode>
<h:outputText value="#{doc}" />
</p:treeNode>
</p:tree>`

Answer 5

So I found a way to make this work. However, I will admit upfront it was not my dream solution. But then I have only so much time to play around as this is a bit of a pet project for me:
I created two instances of the table with the same definitions and used fixed header widths. I then placed each table one after the other in individual divs. I then style those divs:
#header {
height: 24px;
}
#body thead {
display: none;
}
and then the I have a sample of simple tables and divs below:
<div id="header">
<p-treeTable [value]="[]">
<p-column field="key" header="Key" [style]="{'width':'30%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.key }}
</ng-template>
</p-column>
<p-column field="key" header="Key" [style]="{'width':'70%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.big }}
</ng-template>
</p-column>
</p-treetable>
</div>
<div id="body">
<p-treeTable [value]="treedata">
<p-column field="key" header="Key" [style]="{'width':'30%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.key }}
</ng-template>
</p-column>
<p-column field="key" header="Key" [style]="{'width':'70%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.big }}
</ng-template>
</p-column>
</p-treetable>
</div>
What I think helped is ensuring I set the width on each column so I could ensure I got the same column width during display. I also set the treedata to [] or empty for the header so I do not process the data two times. This is a bit inelegant. And I would sure have liked to add scrolling directly to the treetable but time is not available.
Also to have the table itself scroll. use something like:
.ui-treetable-tablewrapper {
overflow-y: scroll;
height: 290px;
}
NOTE: I have no idea how to get the height so a row is not a bit clipped. As it seems the row height for expanded rows is not identical to that of unexpanded rows.
If you place this in a bootstrap panel with a footer and no padding it looks good, albeit not perfect:
<div class="panel panel-default">
<div class="panel">
<div class="panel-heading">
...header...
</div>
<div class="panel-body" style="{ padding: '0' }">
...Table...
</div>
<div class="panel-footer">
<div class="row">
....footer...
</div>
<div>
</div>