Skip to main content

Column Sorting in ADF TreeTable

Sorting of columns are not supported in ADF TreeTable by default. 
The documentation of 12c says :
Unlike the Table, the TreeTable does not support automatic sorting. The underlying TreeModel must support sorting by implementing it's sorting logic in the setSortCriteria(List criteria) method of the TreeModel.

But my client wanted sorting on the tree table on few columns. It was a good challenge and this is how I solved it.

Steps :
1. The treeModel is based on a managed bean. You cannot have the tree based on ADF-BC bindings. Simply because you need to override setSortCriteria().
2. Added a few Comparators required for sorting of the columns.

Assumptions :
1. Code is in Java 8, using one of the lamda methods of Collections.

Lets get into the implementation details

1. Tree is based on a simple POJO. 

public class UCMContent {    
    // tree hierarchy in the list of child
    private List<UCMContent> children = new ArrayList<>();    
    // attribute I need to explain for sorting
    protected String name;
    protected String creator;
    protected String lastModified;   
    // other attributes...
   
2.  Custom TreeModel class extends org.apache.myfaces.trinidad.model.ChildPropertyTreeModel. This one has the custom implementation of setSortCriteria(). 
FYI : I am handling the decending sorting is little bit differently, ideally you can do a "Collections.reverse()", but in my case I wanted to do it this way. And it is much better than doing the reverse of the list, save me time and increase the performance.

public class Dossierboom extends ChildPropertyTreeModel {    
    public Dossierboom() {
        super();
    }    
    public Dossierboom(List<UCMContent> instance, String childProperty) {        
        super(instance, childProperty);        
        if(!instance.isEmpty()) {
            setRootNodeTitle(instance.get(0).getName());
        }
    }
    @Override
    public void setSortCriteria(List<SortCriterion> list) {
        super.setSortCriteria(list);
        if(list != null || !list.isEmpty()) {
            SortCriterion sortCriterion= list.get(0);
            sortTreeModel((List<UCMContent>)getWrappedData(), getComparator(sortCriterion));
        }
    }    
    private DossierboomComparator getComparator(SortCriterion sortCriterion) {
        DossierboomComparator comparator = null;
        if(sortCriterion.getProperty().equals("did")) {
            comparator = new DIdComparator();
        } else {
            if(sortCriterion.getProperty().equals("creator")) {
                comparator = new CreatorComparator();
            } else {
                comparator = new LastModifiedDateComparator();
            }
        }        
        comparator.setAscending(sortCriterion.isAscending());
        return comparator;
    }    
    private void sortTreeModel(List<UCMContent> treeModel, DossierboomComparator comparator) {
        if(!treeModel.isEmpty()) {
            Collections.sort(treeModel, comparator);
            treeModel.forEach(treeNode -> sortTreeModel(treeNode.getChildren(), comparator));
        }
    }
}

3. Comparators : 
I have an Abstract Class "DossierboomComparator", which implements java.util.Comparator and all other custom comparators evnetually extends this abstract class.

public abstract class DossierboomComparator<T> implements Comparator<UCMContent> {    
    private boolean ascending;    
    public DossierboomComparator() {
        super();
    }
    public void setAscending(boolean ascending) {
        this.ascending = ascending;
    }
    public boolean isAscending() {
        return ascending;
    }
}   

4. Custom comparators. 
All of them are quite similar, so I will just put one of them as an example. 

public class CreatorComparator extends DossierboomComparator<UCMContent> {
public CreatorComparator() {
super();
}
@Override
public int compare(UCMContent ucmContent1, UCMContent ucmContent2) {
int compare = 0;
if(isEmptyOrNull(ucmContent1.getCreator()) && !isEmptyOrNull(ucmContent2.getCreator())) {
compare = -1;
} else {
if(isEmptyOrNull(ucmContent2.getCreator())) {
compare = 1;
} else {
compare = ucmContent1.getCreator().compareTo(ucmContent2.getCreator());
}
}            
if(!isAscending()) {
compare = compare * -1;
}
return compare;
}

5. Why not doing Collections.reverse(). 

Normally the above compare() returns a value which is suitable for Ascending sort. And while doing a descending I needed to reverse the list after sorting or add another comparator for Descending sort. But instead I reverse the result based on the abstract class property.
It is easier and save me time and also increases the performance.

6. Populate the treeModel in managed bean :
So I have a pageFlow scope TreeBean, which takes care of populating the tree.
FYI : You need to implement your own version of "getTreeData()". Either from DB or Webservice.

    public Dossierboom getTreeModel() {
        if (this.treeModel == null) {
            List<UCMContent> treeData = getTreeData(); // this is the method you need to implement 
            this.treeModel = new Dossierboom(treeData , "children"); 
        }
        return treeModel;
    }

7. In the page, how the tree looks like 

<af:treeTable value="#{pageFlowScope.TreeBean.treeModel}" var="node" rowSelection="multiple" id="tt1" initiallyExpanded="true" fetchSize="-1" columnStretching="multiple" styleClass="AFStretchWidth" width="100%" summary="Dossierboom" expandAllEnabled="true">
<f:facet name="nodeStamp">
<af:column id="c1" headerText="Naam" width="50%" rowHeader="unstyled">
<af:outputText value="#{node.name}" id="ot1"/>  
</af:column>
</f:facet>
<f:facet name="pathStamp">
<af:outputText value="#{node}" id="ot2"/>
</f:facet>                       
<af:column id="c4" headerText="Doc. nr" width="5%" sortable="true"  sortProperty="did">
<af:outputText value="#{node.did}" id="ot5"/>
</af:column>
<af:column id="c5" headerText="Auteur" width="10%" sortable="true" sortProperty="#creator">
<af:outputText value="#{node.creator}" id="ot6"/>
</af:column>
<af:column id="c6" headerText="Laatst bewerkt" width="10%" sortable="true" sortProperty="lastModified">
<af:outputText value="#{node.lastModified}" id="ot7"/>
</af:column>
<f:facet name="contextMenu"></f:facet>
</af:treeTable>


And this works like a charm :)

Happy coding. 

x

Comments

  1. hi i have table inside column i am using <f:facet header="name" because of this i am getting error in export excel is "Export is incomplete due to error" Please give me suggestion i am getting this error in jdeveloper 12c.

    ReplyDelete

Post a Comment

Popular posts from this blog

Rich Text Editor - Oracle JET

Oracle JET has a lot of excellent UI components, but according to Murphy's law, client always comes up with something which you don't have at your disposal. So, driven by one of my client's requirements, I created a Rich Text Editor or WYSIWYG editor for Oracle JET. This is based on Quill JS and fully customizable. Github project download: https://github.com/sohamda/JET-Web-Components/tree/master/rich-text-editor I will explain in this blog, on how to integrate it in your own Oracle JET project. 1. Create and initialize your JET application and then put the downloaded web component inside "src\js\jet-composites" folder. 2. Once copied update your viewModel first. Add a snippet for passing the default content to be displayed by the editor after load. 3. Update view to load this editor Above you can see the "toolbar-options" property, that controls which options you should display to user on the editor. Those are basically the forma...

Exception Handling in ADF

This blog will give you an overview on how you can successfully deal with unhandled Runtime exceptions in an ADF application. This will give you an idea of: How to catch the unhandled exceptions. Write a separate log file with stacktrace and thread dumps. Redirect the user to an static error page #1. Catch unhandled exceptions :  Create a class "MyExceptionHandler" which extends : oracle.adf.view.rich.context.ExceptionHandler. Override handleException() method.     public void handleException(FacesContext facesContext, Throwable throwable, PhaseId phaseId) throws Throwable {         // this method is going to create a separate file with stacktrace and thread dumps         writeException(throwable);         // redirect to error page         redirectToErrorPage(facesContext);     }  Create a fo...

Layout Management & CSS Classes with Oracle JET

Oracle JET provides automatic responsive layout using CSS classes. So that, from large screens to small screens the application fits itself the best possible way. JET’s layout management are based on 2 types of CSS classes “Responsive Grid” and “Flex”. Responsive grid classes which deals with size, number of columns and functions of a particular <div>. Naming convention of these classes are oj- size - function - columns sizes can be: sm, md, lg, xl functions can be: hide, only-hide columns can be: any number between 1 to 12.   Just like Bootstrap, JET also divides the width of the available space into 12 columns, so for example, if you want a section of your page should take up atleast 5 columns if you divide the available screen into 12 columns, you need use : oj- size -5. Now comes the size part, you need to define that for each size of the screen, from hand-held mobile devices to large or extra large desktop screens. With combination with theses gr...