Hello all,
this is my second post on af:treeTable, first post was about creating and overriding tree table selection listener to get node value in managed bean, see
Tree Table Component in Oracle ADF(Hierarchical Representation)
In this post i am going to explain how to
this is my second post on af:treeTable, first post was about creating and overriding tree table selection listener to get node value in managed bean, see
Tree Table Component in Oracle ADF(Hierarchical Representation)
In this post i am going to explain how to
- use multiple detail column in treeTable
- design better UI
- manage child rows
- use link,image,checkbox in treeTable conditionally
- I have created a treeTable using following details of Employees VO
- Now on running my page it is looking like this, very odd and complex view
<af:treeTable value="#{bindings.Departments1.treeModel}" var="node" selectionListener="#{bindings.Departments1.treeModel.makeCurrent}" rowSelection="single" id="tt1"> <f:facet name="nodeStamp"> <af:column id="c1" width="500"> <af:outputText value="#{node}" id="ot1"/> </af:column> </f:facet> <f:facet name="pathStamp"> <af:outputText value="#{node}" id="ot2"/> </f:facet> </af:treeTable>
- It shows that all details of employees are clubbed in one column that is nodestamp, now to show details in different columns i have added 5 columns in treeTable, and seperate detail in each column as Email, FirstName,LastName etc
To add column right click on treeTable and insert-
- Now run page and see, there is now 5 column with different details but still that clubbed value is shown.
- Now to remove that clubbed detail, go to nodestamp facet of treeTable and see value of output text inside column, it is set to #{node} ,due to this all values available in node are clubbed and displayed in page, now we have to set its value to any of Master table's (Departments) attribute
- Now run page , only department name is displayed on header, and corresponding value for detail is blank
- We are done with this part, now try to make its UI somewhat better using some styles, so i have used different background color for header and detail part of treeTable conditionally
- To do this i have set inline style property conditionally , because i have to change color of same column according to master and detail data, see condition
- Now see how to get selected child row without over-riding treeTable's selection listener, to do this i have added a image link in treeTable and created a action listener on that to show current selected detail row
- Bind tree table to managed bean and create two methods to get selected RowIterator and node Key
- Now to get currently selected node and row pass Iterator and Node key in this method- see
- Now Run application and click on link to see selected row -
#{node.DepartmentName!=null ? 'background-color:darkgreen' : 'background-color:rgb(239,255,213);' }
/**Tree Table Binding in managed bean*/ private RichTreeTable treeTabBind; public void setTreeTabBind(RichTreeTable treeTabBind) { this.treeTabBind = treeTabBind; } public RichTreeTable getTreeTabBind() { return treeTabBind; } /**Method to get Iterator*/ public RowIterator getSelectedNodeIterator() { if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) { for (Object rKey : getTreeTabBind().getSelectedRowKeys()) { getTreeTabBind().setRowKey(rKey); return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowIterator(); } } return null; } /**Method to get Node Key*/ public Key getSelectedNodeKey() { if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) { for (Object rKey : getTreeTabBind().getSelectedRowKeys()) { getTreeTabBind().setRowKey(rKey); return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowKey(); } } return null; }
public void showCurRowDetail(RowIterator ri, Key selectedNodeKey) { Row[] rows = ri.findByKey(selectedNodeKey, 1); FacesMessage msg = new FacesMessage(rows[0].getAttribute("FirstName") + "'s data available in this row"); FacesContext.getCurrentInstance().addMessage(null, msg); }
- You can use checkboxes in treeTable same as link, for CRUD operation in treeTable see Jobinesh blog- http://www.jobinesh.com/2010/05/crud-operations-on-tree-table.html
- Download Sample ADF Application