Advanced Fixed Size PrimeFaces Tree

Question

I have a huge tree component in my frontend application. The tree has hundreds of nodes, and I want the tree to have a fixed height in my vertical scroll user interface to navigate through the nodes.

Can someone help me figure this out? Thanks

Answer 1

Put this tree in the panel, and then apply the style to this panel. For instance:

<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 .

: p: layout

:

            <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

, . , , . , , :

. div. divs:

#header {
  height: 24px;
}
#body thead {
  display: none;
}

:

<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>

, - , , . treedata [] , . . , .

. - :

.ui-treetable-tablewrapper {
   overflow-y: scroll;
   height: 290px;
}

. , , . , .

If you place this on the boot panel with a footer and without a pad, it looks good, although 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>

Answer 5

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