I'm creating a jsf which contains a rich:tree. When the tree is going to render, data is pulled from a database to render the tree.
Next to the tree is a chart. The charts content is linked to the selected node in the tree.
When the tree is rendered, no node is selected -> no chart.
Is it possible to select the root node as default selected node and how can I achieve this?
Thanks in advance
You may use the adviseNodeSelected attribute of the tree.
MethodBinding pointing at a method accepting an org.richfaces.component.UITree with return of java.lang.Boolean type. If returned value is: java.lang.Boolean. TRUE, a particular treeNode is selected; java.lang.Boolean.FALSE, a particular treeNode is unselected; null, a particular treeNode saves the current state
http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?tab=info
Related
In my app, I'm trying to make sure the selected treenode is shown, meaning it is expanded all the way down, and also scrolled into view.
How can I programmatically implement this (meaning all the tree node's parent nodes are expanded, and it's scrolled into view)?
A tree node only has a reference to its children, not its parent, and there's no way I could find to scroll the tree to a node.
I have tried to look for ITreeNode.EnsureVisible method or similar, but in vain.
I have a page with a huge tree component (scrollable) and an edit component where I can edit the selected node. After I edit the selected node in the edit window, I have an ajax event that updates the tree component.
My problem is that the tree updates 100% but the selected node is now scrolled out of view. How can I scroll back to the selected node. Or is there a way to update just the selected node in the tree instead of updating the tree completely?
If the treenode is still selected you could try calling this after the edit
document.getElementsByClassName("ui-treenode-selected")[0].scrollIntoView()
I encountered exactly the same situation, here's my solution, based on JavaScript:
$('.scrollable-tree-container').each(function(index) {
var position = $(this).find('.ui-state-highlight').position();
if (typeof position != 'undefined') {
$(this).scrollTop(position.top + $(this).scrollTop() - 300);
}
});
How does it work?
Specify the container providing the scroll bar
Look for a highlighted node
Read its position and scroll there
You might want to add additional selectors to avoid side effects on other components. I've subtracted 300px here since I had a total tree height of 800px. This way, the selected node will be somewhere in the middle (and not on top).
The undefined check is only necessary if you cannot asure that there's always one node selected when calling the function.
I want to list the faculties at the university.Then I want to list the departments at the selected faculty,then I want to list the lessons at the selected department.
Faculties>|selected faculty|>departments>|selected dept|> list of lesson
What should I use to view for this structure?Which datatable/uicomponent is more suitable for me? I use Primefaces 5.0 in the view layer.
Datatable
You will have to implement some listeners (i.e. to fetch your next list based on the selected value) but that won't be a tough task since PrimeFaces datatables provide selection features (row click, button, ...) Just look at the showcase links below to get an overview.
Showcase:
http://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml
Master Detail
This is part of Primefaces Extension but seems to fit your needs because most of the logic is ready to use out of the box (ajax: update list view, update breadcrumbs, ...)
Showcase: http://www.primefaces.org/showcase-ext/sections/masterDetail/basicNavigation.jsf
Tree
Either horizontal (http://www.primefaces.org/showcase/ui/data/htree/basic.xhtml) or vertical (http://www.primefaces.org/showcase/ui/data/tree/basic.xhtml). If you want to display your data within a table, consider using the TreeTable (http://www.primefaces.org/showcase/ui/data/treetable/basic.xhtml).
However this will require to handle a TreeNode and it will, IMO, be way more difficult to build the TreeNode dynamically
I am using Primefaces 3.4.1 with the 2.2.0-m05 milestone build of Oracle's JSF 2.2 implementation. I am also using Spring 3.1 for dependency injection and some AOP.
I am trying to use the Primefaces tree component to display a composite of logical filter rules (and allow the user to create composite/leaf nodes at any depth within the composite structure).
Example composite filter:
((location = 'cal') AND (description contains 'test')) OR (project = 'someProject')
Example tree markup:
<p:tree value="#{form.rootComponent}" var="filterComponent" animate="true">
<p:treeNode type="composite">
<!-- some composite specific components -->
</p:treeNode>
<p:treeNode type="leaf">
<!-- some leaf specific components -->
</p:treeNode>
</p:tree>
Although the "value" attribute on the element accepts the root TreeNode (retrieved from a managed bean), the "var" attribute points to the actual data present in the current tree node, rather than the node itself. I would like a way to access the current tree node, not its wrapped data, either in mark-up or programmatically.
If I can access it in mark-up, I can pass it as a method argument to a managed bean. If there's no way of accessing it in the mark-up, can I gain direct programmatic access through a model object? (presumably by gaining access to the underlying tree model?).
I know you can use an expression which resolves to an underlying DataModel instead of the data collection directly as the "value" of h:dataTable, but I believe you can only use the root node itself with p:tree.
I could include a reference to the tree node in the wrapped data object, but I'd really rather avoid nasty circular references if at all possible.
In the absence of a better alternative, I tried using the "binding" attribute to bind the p:tree element directly to a Tree instance in the managed bean (Tree being the UIComponent class for p:tree), which allows me to access the current node via the getTreeNode() method, but I would prefer to avoid this given the lifecycle mismatch between managed beans and view components. It is not working perfectly as is, and I assume there must be a much better, simpler solution.
I also tried using a jsf data table - with nested data tables to handle the composite part - but decided against it given the difficulty in creating a conditionally recursive structure within jsf markup (I believe the "rendered" attribute is not evaluated at view build time so it's difficult to avoid infinite recursion).
Just to clarify, I am only interested in the current tree node containing the data referred to by "var", not the node currently selected by the user.
PF Lead just added a new attribute called "nodeVar" for the p:treeTable (dunno if p:tree is included) as in PF 5.1.10 / 5.2. This feature will allow to get a hold of the actual TreeNode instead of it's data. Hence, one can now perform extra method calls on the node itself, such as TreeNode.isLeaf().
Well, there is an attribute called "selection" in the tree component. You just need to provide a reference to the managed bean method.
For e.g., in your xhtml define the attribute the following way:
selection="#{myManagedBean.selectedNode}"
And with the definition of the above attribute, you will have to provide the usual setter and getter methods in the managed bean that references to org.primefaces.model.TreeNode instance.
I have a JSF page that displays a RichFaces Treeview, from a TreeNodeImpl model generated in the backing bean.
Now I want the page to display initially with a specific node expanded / selected.
Preferrably this expansion should be controlled from the backing bean (no javascript wizardry)
The whole tree has been generated at the time of initialization of the backing bean
Is this possible? I have seen mentioning of TreeState, is that the way to go?
<rich:tree> has a property called adviseNodeOpened (check here)
It should contain a javax.el.MethodExpression. The target method signature must match
java.lang.Boolean adviseNodeOpened(org.richfaces.component.UITree)
This is documented as:
MethodBinding pointing at a method accepting an org.richfaces.component.UITree with return of java.lang.Boolean type. If returned value is: java.lang.Boolean. TRUE, a particular treeNode is expanded; java.lang.Boolean.FALSE, a particular treeNode is collapsed; null, a particular treeNode saves the current state