Performance issue with Tree component in Primefaces

Question

In my application, I need to render a tree where data is present in hierarchy structure and the tree contains multi-select checkbox. The code was working fine so far but a new use case has come up where a large number of data needs to be rendered. I have checked the time consumed at client side and at server side. Server side code is taking less than a second but the client is not able to render the tree and the browser stops working as soon as the server sends the response. I have also tried with TreeTable component but I am facing the same problem. I think the issue is due to server sending the complete data in one go irrespective of the hierarchy where the value is stored. The required initial view is that only the top level data should be shown and the next level data in the hierarchy needs to be displayed on expanding a particular data element. Is it possible that the client should only fetch the top level data in 1st hit and whenever user expands any level, next level data should be fetched only for that particular parent data.

Does primefaces has any other component that can solve the purpose?

<p:dialog widgetVar="treeModal" header="Parameter's Values"
        styleClass="ui-dialog-small-mid" resizable="false" modal="true">
        <p:messages id="myMessagePopup" autoUpdate="true" closable="true"
            escape="false" />
        <h:form id="treeModalForm">
            <div class="ui-dialog-inner parameter_dialog dialog-h400">
                <p:tree value="#{bean.dailogGroupInfo.genericUnitTree}"
                    var="node"
                    rendered="#{bean.dailogGroupInfo.genericTreeRendered}"
                    selectionMode="checkbox"
                    selection="#{bean.dailogGroupInfo.selectedGenericUnitNodes}"
                    paginator="true" rows="5">
                    <p:treeNode>
                        <h:outputText value="#{node.valueName}" />
                    </p:treeNode>
                </p:tree>
            </div>
            <div class="button_row">
                <p:commandButton styleClass="btn btn-primary" value="Add"
                    id="addButton"
                    action="#{action.addValuesToGenericTree}">
                </p:commandButton>
                <p:commandButton styleClass="btn" value="Cancel"
                    onclick="scrollUp();" id="cancelButton"
                    oncomplete="PF('treeModal').hide()" required="true" />
            </div>
        </h:form>
</p:dialog>

Java Code:

List<parameterTO> parameterTOList = bean.getParameterTOlist();
            List<Info> infoTOlist = new ArrayList<Info>();

            for (parameterTO gpTO : parameterTOList) {

                Info info = new Info();
                ParamInitTO paramInitTO = new ParamInitTO();
                paramInitTO.setParameterTO(gpTO);
                serviceRequest.setRequestTO(paramInitTO);
                serviceResponse = facadeRemote.getIntialParamForOrg(serviceRequest);
                genericUnitTOList = (List<GenericUnitTO>) serviceResponse.getResponseTOList();

                info.setParameterTO(gpTO);
                TreeNode genericUnitTree = null;
                if (gpTO.getEntityNameParentLabel() != null) {
                    Map<Integer, List<GenericUnitTO>> genericUnitMap = Helper
                            .converGenericUnitTOIntoMap(genericUnitTOList);
                    genericUnitTree = Helper.convertIntoGenericUnitTree(genericUnitMap, info);
                } else {
                    genericUnitTree = Helper.convertIntoGenericUnitTree(genericUnitTOList, info);
                }
                info.setGenericUnitTree(genericUnitTree);

                infoTOlist.add(groupInfo);
                }
            bean.setInfolist(infoTOlist);

            TreeNode[] selectedGenericNodes = infoTOlist.getSelectedGenericUnitNodes();
            List<valueTO> genericUnitShowList = infoTOlist.getGenricUnitShowList();
            selectedGenericNodes = helper.getActualselectedNodes(selectedGenericNodes, genericUnitShowList);
            infoTOlist.setSelectedGenericUnitNodes(selectedGenericNodes);
            if (selectedGenericNodes != null) {
                helper.SetNodeChecked(infoTOlist.getGenericUnitTree(), infoTOlist.getSelectedGenericUnitNodes());
            }
            bean.setDailogInfo(infoTOlist);

Answer 1

You can implement lazy load subnodes, to reduce the amount of loaded data:

<p:ajax event="expand" process="@this" listener="#{controller.onNodeExpand}" />

public void onNodeExpand(NodeExpandEvent event)
{
    TreeNode node = event.getTreeNode();
    node.getChildren().clear();
    node.getChildren().add(new ....);
}