Easily disable sorting in PrimeFaces 3′s DataTable

16 January 2012, by: Development

PrimeFaces provides a convenient and easy to use sorting facility for its DataTable. Together with Facelets, this facility allows us to create re-usable columns that are natural sortable by default. E.g.:

  1. <ui:composition xmlns="http://www.w3.org/1999/xhtml" 
  2.     xmlns:h="http://java.sun.com/jsf/html"
  3.     xmlns:ui="http://java.sun.com/jsf/facelets" 
  4.     xmlns:p="http://primefaces.org/ui"
  5. >
  6.     <p:column headerText="#{headerText}" sortBy="#{value}">
  7.         <h:outputText id="#{id}" value="#{value}" />
  8.     </p:column>    
  9. </ui:composition>

Such a column can be used on a page inside a DataTable as follows:

  1. <my:sortableColumn id="foo" value="#{someBean.someValue}" />

The problem

The above is only a simple example, and real-life usage can be more complex with e.g. default styles and cell editing capabilities added. With such complex tags, it might be desirable to turn off sorting for certain columns programmatically. By default this does not seem to be possible in PrimeFaces. Setting the value attribute in the above example to null or the empty string via an expression prevents sorting, but still renders the sorting icon.

The reason for this is that the PrimeFaces renderer (org.primefaces.component.datatable.DataTableRenderer) checks for the presence of a value expression to determine whether the icon should be rendered, regardless of whether this expression evaluates to something non-empty. So nothing you pass into the value attribute of the above showed tag can make the value expression itself null, nor can any extra attribute accomplish this in the tag’s definition.

Custom helper tag

One solution is to build a simple helper tag that takes a parameter and based on that sets the value expression of its parent component to null. This tag can be nested inside a column. Taking it one step further, we can nest the tag inside a table and programmatically disable sorting on all columns. The following shows the implementation of such a tag:

  1. public class ColumnSorterDisabler extends TagHandler {
  2.  
  3.     public ColumnSorterDisabler(TagConfig config) {
  4.         super(config);
  5.     }
  6.  
  7.     @Override
  8.     public void apply(FaceletContext ctx, UIComponent parent) throws IOException {
  9.         Boolean disableSorting = getRequiredAttribute("disableSorting").getBoolean(ctx);
  10.         if (disableSorting) {
  11.             if (parent instanceof Column) {
  12.                 parent.setValueExpression("sortBy", null);
  13.             } else if (parent instanceof DataTable) {
  14.                 for (UIComponent child : parent.getChildren()) {
  15.                     if (child instanceof Column) {
  16.                         child.setValueExpression("sortBy", null);
  17.                     }
  18.                 }
  19.             }
  20.         }        
  21.     }    
  22. }

After declaring this in a *-taglib.xml, we can use it as follows inside a Facelets tag:

  1. <ui:composition xmlns="http://www.w3.org/1999/xhtml" 
  2.     xmlns:h="http://java.sun.com/jsf/html"
  3.     xmlns:ui="http://java.sun.com/jsf/facelets" 
  4.     xmlns:p="http://primefaces.org/ui"
  5. >
  6.     <my:columnSorterDisabler disableSorting="#{disableSorting}" />
  7.  
  8.     <p:column headerText="#{headerText}" sortBy="#{value}">
  9.         <h:outputText id="#{id}" value="#{value}" />
  10.     </p:column>    
  11. </ui:composition>

We can now disable sorting on a per-column basis as follows:

  1. <my:sortableColumn id="foo" value="#{someBean.someValue}" disableSorting="true" />

or for an entire table:

  1. <p:dataTable value="#{someBean.someValues}" var="something">
  2.     <my:sortableColumn id="foo" value="#{something.foo}" />
  3.     <my:sortableColumn id="bar" value="#{something.bar}" />
  4.     <my:columnSorterDisabler disableSorting="true" />
  5. </p:dataTable>

One caveat to remember, TagHandlers exist only at ‘build-time’, so when using expressions to do the disabling the data these point to has to be available during build-time.

The f:attributes tag

Another solution, contributed by my co-worker Bauke Scholtz, is taking advantage of the <f:attribute> tag. This tag does the same thing as an actual tag attribute, but contrary to an actual attribute this one can be conditionally excluded using <c:if>. In that case the implementation of our re-usable column becomes this:

  1. <ui:composition xmlns="http://www.w3.org/1999/xhtml" 
  2.     xmlns:h="http://java.sun.com/jsf/html"
  3.     xmlns:ui="http://java.sun.com/jsf/facelets" 
  4.     xmlns:p="http://primefaces.org/ui"
  5. >
  6.     <p:column headerText="#{headerText}">
  7.         <c:if test="#{empty sortable or sortable}">
  8.             <f:attribute name="sortBy" value="#{value}"/>
  9.         </c:if>
  10.         <h:outputText id="#{id}" value="#{value}" />
  11.     </p:column>    
  12. </ui:composition>

Notice how the tag attribute sortBy has been replaced by a child tag. This approach is really convenient since it simply uses JSF’s build-in functionality. To disable sorting for all columns at once, the helper tag based approach is still useful though. Note that just like the helper tag, a <f:attribute> tag only exists at build-time, so here too only data that’s available during that time can be used.

Arjan Tijms

5 comments to “Easily disable sorting in PrimeFaces 3′s DataTable”

  1. aditya says:

    good stuff .. thanks

  2. Oleg says:

    Hi Arjan,

    Found you post today :-) There is a third method as well. In conjunction with c:if.

  3. Oleg says:

    Sorry, code was truncated

    <p:column headerText="#{headerText}">
        <c:if test="#{empty sortable or sortable}">
            <c:set target="#{component}" property="sortBy" value="#{value}"/>
        </c:if>
        ...
    </p:column>
  4. arjan tijms says:

    There is a third method as well. In conjunction with c:if.

    That’s an interesting way indeed. Thanks for sharing!

  5. Daniel says:

    Great post!!!
    Choose the first approach…
    Thanks!

Type your comment below:


six + = 9

css.php best counter