Please disable your adblock and script blockers to view this page

Search this blog

Wednesday 7 October 2015

ADF Basics: Reorder ADF table column using DisplayIndex property

This post is about a very simple use case that is reordering of af:table column at run time. 
Ordering of columns in af:table is controlled by DisplayIndex property of af:column
Check what docs says-

Default Value: -1

The display order index of the column. Columns can be re-arranged and they are displayed in the table based on the displayIndex. Columns are sorted based on the displayIndex property, columns without displayIndex are displayed at the end, in the order in which they appear. The displayIndex attribute is honored only for top level columns, since it is not possible to rearrange a child column outside of the parent column.
Not supported on the following renderkits: org.apache.myfaces.trinidad.core

We can set DisplayIndex property for all columns in a sequence (1,2,3 etc) that we want to see on page

Here i am using a HashMap to change DisplayIndex of columns at runtime

Let's see implementation part-
  • Prepare Model using Departments table of HR Schema and dropped viewObject as table on page 

  •   Page structure window -
  • Next step is - Create a HashMap and it's acceessors in managed bean

  •     private HashMap reOrderMap = new HashMap();
    
        public void setReOrderMap(HashMap reOrderMap) {
            this.reOrderMap = reOrderMap;
        }
    
        public HashMap getReOrderMap() {
            return reOrderMap;
        }
    

  • Now we will use this HashMap as part of expression in DisplayIndex property
    See af:table xml source-




  • <af:table value="#{bindings.Departments1.collectionModel}" var="row"
                                  rows="#{bindings.Departments1.rangeSize}"
                                  emptyText="#{bindings.Departments1.viewable ? 'No data to display.' : 'Access Denied.'}"
                                  rowBandingInterval="0"
                                  selectedRowKeys="#{bindings.Departments1.collectionModel.selectedRow}"
                                  selectionListener="#{bindings.Departments1.collectionModel.makeCurrent}"
                                  rowSelection="single" fetchSize="#{bindings.Departments1.rangeSize}" id="t1"
                                  partialTriggers="::b1 ::b2">
                            <af:column sortProperty="#{bindings.Departments1.hints.DepartmentId.name}" sortable="true"
                                       headerText="#{bindings.Departments1.hints.DepartmentId.label}" id="c1"
                                       displayIndex="#{viewScope.ReOrderTableBean.reOrderMap['DepartmentId']}">
                                <af:outputText value="#{row.DepartmentId}"
                                               shortDesc="#{bindings.Departments1.hints.DepartmentId.tooltip}" id="ot1">
                                    <af:convertNumber groupingUsed="false"
                                                      pattern="#{bindings.Departments1.hints.DepartmentId.format}"/>
                                </af:outputText>
                            </af:column>
                            <af:column sortProperty="#{bindings.Departments1.hints.DepartmentName.name}" sortable="true"
                                       headerText="#{bindings.Departments1.hints.DepartmentName.label}" id="c2"
                                       displayIndex="#{viewScope.ReOrderTableBean.reOrderMap['DepartmentName']}"
                                       width="120">
                                <af:outputText value="#{row.DepartmentName}"
                                               shortDesc="#{bindings.Departments1.hints.DepartmentName.tooltip}" id="ot2"/>
                            </af:column>
                            <af:column sortProperty="#{bindings.Departments1.hints.ManagerId.name}" sortable="true"
                                       headerText="#{bindings.Departments1.hints.ManagerId.label}" id="c3"
                                       displayIndex="#{viewScope.ReOrderTableBean.reOrderMap['ManagerId']}">
                                <af:outputText value="#{row.ManagerId}"
                                               shortDesc="#{bindings.Departments1.hints.ManagerId.tooltip}" id="ot3">
                                    <af:convertNumber groupingUsed="false"
                                                      pattern="#{bindings.Departments1.hints.ManagerId.format}"/>
                                </af:outputText>
                            </af:column>
                            <af:column sortProperty="#{bindings.Departments1.hints.LocationId.name}" sortable="true"
                                       headerText="#{bindings.Departments1.hints.LocationId.label}" id="c4"
                                       displayIndex="#{viewScope.ReOrderTableBean.reOrderMap['LocationId']}">
                                <af:outputText value="#{row.LocationId}"
                                               shortDesc="#{bindings.Departments1.hints.LocationId.tooltip}" id="ot4">
                                    <af:convertNumber groupingUsed="false"
                                                      pattern="#{bindings.Departments1.hints.LocationId.format}"/>
                                </af:outputText>
                            </af:column>
                        </af:table>
    

  • Added a button on page to change dispaly index (to set value in HashMap), see managed bean code

  •     /**Method to change display order of af:table
         * @param actionEvent
         */
        public void changeOrderAction(ActionEvent actionEvent) {
            reOrderMap.put("DepartmentId", 2);
            reOrderMap.put("DepartmentName", 4);
            reOrderMap.put("ManagerId", 1);
            reOrderMap.put("LocationId", 3);
    
        }
    

  • Run and check application, by default column ordering is this

  •        On click of Change Order button-

  • Now again to reset columns ordering set DisplaIndex to -1 for all columns

  •     /**Method to reset display order of af:table by setting all values to -1
         * @param actionEvent
         */
        public void resetOrderAction(ActionEvent actionEvent) {
            reOrderMap.put("DepartmentId", -1);
            reOrderMap.put("DepartmentName", -1);
            reOrderMap.put("ManagerId", -1);
            reOrderMap.put("LocationId", -1);
    
        }
    

Sample ADF Application-Download
Cheers:) Happy Learning

3 comments :

  1. this did't work for me, only sorted the header, not the content. :s

    ReplyDelete
    Replies
    1. It is not for sorting , It'll change ordering of columns as you can see in snap

      Delete
    2. it is also not working for me it is only sorting the headers

      Delete