CODEWITHSUNDEEP
treeprimefaces
vladiastudillo
vladiastudillo

Reputation: 407

Primefaces Tree: click event on node's label when selectionMode='checkbox'

I'm using the primefaces[3.4] showcase with tree and checkbox selection:

http://www.primefaces.org/showcase-labs/ui/treeSelectionCheckbox.jsf

Is it possible to attach a p:ajax event for click on node's label??

I need to update a panel with children objects when user click over tree's nodes labels, not necessarily when user select them (click on checkbox).

Thanks in advance.

Upvotes: 1

Views: 12094

Answers (3)

siebz0r
siebz0r

Reputation: 20329

The p:tree element is capable of handling 4 events:

+----------+----------------------------------------+----------------------------+
| Event    | Listener Parameter                     | Fired                      |
+----------+----------------------------------------+----------------------------+
| expand   | org.primefaces.event.NodeExpandEvent   | When a node is expanded.   |
| collapse | org.primefaces.event.NodeCollapseEvent | When a node is collapsed.  |
| select   | org.primefaces.event.NodeSelectEvent   | When a node is selected.   |
| unselect | org.primefaces.event.NodeUnselectEvent | When a node is unselected. |
+----------+----------------------------------------+----------------------------+

The select event is what you want.

EDIT: This won't work when using checkboxes in the tree.

Upvotes: 0

snotmare
snotmare

Reputation: 75

You should never have to call the server to do something as simple as showing/hidding other elements on the page. Primefaces should do a better job with this. In the meantime, consider this javascript code...

<p:treeNode type="parent" styleClass="parent">
    <h:outputText value="#{myLabel}"/>
</p:treeNode>

...

<script>
jQuery(".parent > .ui-tree-selectable > .ui-treenode-label").each(function(){
    var label = jQuery(this);

    label.click(function(){
        label.siblings(".ui-tree-toggler").click();
    });
});
</script>

Upvotes: 2

vladiastudillo
vladiastudillo

Reputation: 407

This is how I workaround this, just adding a checkbox inside the treeNode template and changing the selectionMode to single.

<p:tree value="#{treeBean.root}" var="node" dynamic="true" cache="false"  
            selectionMode="single"  selection="#{treeBean.selectedNode}" id="tree">  

        <p:ajax event="select" update=":form:messages" listener="#{treeBean.onNodeSelect}" />  

        <p:treeNode>  
            <p:selectBooleanCheckbox  id="treeCheck" value="#{node.selected}"/> 
            <h:outputText value="#{node.name}" />  
        </p:treeNode>  
    </p:tree>

Consider that you have to code manually the logic to check/uncheck parent/childs nodes when it should.

Thanks.

Upvotes: 0

Related Questions