JSF Primefaces treetable expand not working when updated through ajax

StackOverflow https://stackoverflow.com/questions/20813989

Question

In my first page I show a command button which loads a treetable.

The treetable is displayed but expand node is not working.

I am using primefaces 4.0, jsf 2.2

Here is my code,

First page backing bean

@ManagedBean(name="loadBean")
public class AjaxLoadBean {
private boolean show;
private String currentPage;

public boolean isShow() {
    return show;
}

public void setShow(boolean show) {
    this.show = show;
}

public String getCurrentPage() {
    return currentPage;
}

public void setCurrentPage(String currentPage) {
    this.currentPage = currentPage;
}

public void newPage() {
    show = true;
    currentPage = "treeTable.xhtml";
}
}

first page

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

<h:head></h:head>
<h:body>
<h:form>
    <p:commandButton value="Show" actionListener="#{loadBean.newPage}"
        update=":content" />
</h:form>

<h:panelGroup id="content">
    <h:panelGroup rendered="#{loadBean.show}">
        <ui:include src="#{loadBean.currentPage}"></ui:include>
    </h:panelGroup>
</h:panelGroup>
</h:body>
</html>

treeTable.xhtml

I stripped the ui:composition tag,

<h:form styleClass="form-horizontal">
<p:treeTable value="#{treeTableBean.root}" var="dataElement"
                id="table">
<p:column headerText="No.">
    <h:outputText value="#{dataElement.no}" />
</p:column>

<p:column headerText="Name">
    <h:outputText value="#{dataElement.name}" />
</p:column>

<p:column headerText="select">
    <p:selectBooleanCheckbox value="#{dataElement.select}" />
</p:column>
</p:treeTable>
</h:form>

TreeTableBean 

@ManagedBean
public class TreeTableBean implements Serializable{
private static final long serialVersionUID = 1L;
private TreeNode root;

public TreeTableBean() {
    root = new DefaultTreeNode("root", null);

    new DefaultTreeNode(new TreeTableData(2, "N2", true), root);
    new DefaultTreeNode(new TreeTableData(3, "N3", true), root);
    new DefaultTreeNode(new TreeTableData(4, "N4", true), root);

    TreeNode subNode = new DefaultTreeNode(new TreeTableData(5, "N5", true), root);
    new DefaultTreeNode(new TreeTableData(1, "N5.1", true), subNode);
    new DefaultTreeNode(new TreeTableData(2, "N5.2", false), subNode);
    subNode.setExpanded(true);
}

public TreeNode getRoot() {
    return root;
}
}
Was it helpful?

Solution

I changed both the beans to ViewScoped and it is working.

Viewscoped is the minimum that is needed to support ajax calls in components like datatable, tree, etc

I posted in primefaces forums and got that info.

http://forum.primefaces.org/viewtopic.php?f=3&t=35620#p113774

OTHER TIPS

I also had this issue. I did resolve with steps below: Step 1: move your XHTML files into webcontent folder. Step 2: Since all the files in webcontent are allowed for public access, you need to add the below entry in web.xml for security reason.

Please follow the link for security restrictions: JSF 2: Composite components inside WEB-INF

Without any api library simple solution code here. Using JSF 2.X, Facelets recursive ui:include ...

Main page code is file name : WHPlaceResults.xhtml

<ui:composition template="/Templates/frm.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:p="http://primefaces.org/ui">
<ui:define name="FRM_NW">
    <!-- TODO -->
</ui:define>
<ui:define name="FRM_NC">
    <!-- TODO -->
</ui:define>
<ui:define name="FRM_C">
    <!-- TODO -->
    <a4j:outputPanel rendered="#{WHMBean.places.hasResults}" layout="block">
        <table width="100%" cellpadding="5" cellspacing="1" class="res">
            <ui:fragment rendered="#{WHMBean.placeSearcher.viewAsIsTREE}">
                <tr class="hdr">
                    <td width="25"></td>
                    <td>
                        <h:outputText value="#{cmn['lbl.name']}" />
                    </td>
                    <td width="125">
                        <h:outputText value="#{cmn['lbl.status']}" />
                    </td>
                    <td width="125">
                        <h:outputText value="#{cmn['lbl.date.reg']}" />
                    </td>
                </tr>
                <c:forEach items="#{CoreMBeanUtilities.getWHPlaces(WHMBean.placeSearcher.statusType, null)}" var="entity">
                    <tr class="row">
                        <td>
                            <h:outputText value="#{WHMBean.places.pager.offset + rowKey + 1}" title="#{entity.id}" />
                        </td>
                        <td style="text-align: left">
                            <a4j:commandLink value="#{entity.shorTitle}" />
                        </td>
                        <td>
                            <h:outputText value="#{cmn[entity.statusTypeBundle]}" />
                        </td>
                        <td>
                            <h:outputText value="#{entity.regDate}">
                                <f:convertDateTime timeZone="#{CoreMBeanUtilities.systemTimeZone}" pattern="#{CoreMBeanUtilities.datePatternResults}" />
                            </h:outputText>
                        </td>
                    </tr>
                    <ui:include src="#{entity.pageTreeRecurs}">
                        <ui:param name="lvl" value="#{1}" />
                        <ui:param name="parent" value="#{entity}" />
                    </ui:include>
                </c:forEach>
            </ui:fragment>
            <ui:fragment rendered="#{WHMBean.placeSearcher.viewAsIsTABLE}">
                <!-- TODO -->
            </ui:fragment>
        </table>
    </a4j:outputPanel>
    <a4j:outputPanel rendered="#{!WHMBean.places.hasResults}" layout="block" styleClass="frm_info">
        <h:outputText value="#{WHMBean.placeSearcher.hasConditions?cmn['msg.res.none.conditions']:core['lbl.wh.place.res.none']}" />
    </a4j:outputPanel>
</ui:define>
<ui:define name="FRM_SW">
    <!-- TODO -->
</ui:define>
<ui:define name="FRM_SC">
    <!-- TODO -->
</ui:define>
<ui:define name="FRM_SE">
    <!-- TODO -->
</ui:define>

Included Recursive page code is file name : WHPlaceRecursiveResults.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:p="http://primefaces.org/ui">
<c:forEach items="#{parent.childrens}" var="child">
    <tr class="row">
        <td />
        <td style="text-align: left; padding-left: #{lvl*20}px">
            <a4j:commandLink value="#{child.shorTitle}" action="#{WHMBean.doPlaceDetails(child)}" render="NAV, ACTION, PAGE" status="CMN" execute="@this" />
        </td>
        <td>
            <h:outputText value="#{cmn[child.statusTypeBundle]}" />
        </td>
        <td>
            <h:outputText value="#{child.regDate}">
                <f:convertDateTime timeZone="#{CoreMBeanUtilities.systemTimeZone}" pattern="#{CoreMBeanUtilities.datePatternResults}" />
            </h:outputText>
        </td>
    </tr>
    <ui:include src="#{child.getHasChildrens() ? 'WHPlaceRecResults.xhtml' : '../../../CMN/none.xhtml'}">
        <ui:param name="lvl" value="#{lvl+1}" />
        <ui:param name="parent" value="#{child}" />
    </ui:include>
</c:forEach>

Example Here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top