The views expressed on this blog are my own do not necessarily reflect the views of my employer.

Tuesday, June 18, 2013

JavaScript Solution for ADF/Web Center Table select all and deselect all rows.

This blog will explains how to do "select all" / "Deselect all"  in ADF Table using java script.

Steps to implement this :

1. We need to define client listener , client attributes in the table where we want to implement this.
2. We need to add java script to Jspx page .

Step 1:

                af:table value="#{bindings.sometable.collectionModel}"
                 var="row"  rows="#{bindings.sometable.rangeSize}"
                 emptyText="#{bindings.sometable.viewable ? 'No data to display.' : 'Access Denied.'}"
                 fetchSize="#{bindings.sometable.rangeSize}" clientComponent="true"
                 styleClass="AFStretchWidth"  rowBandingInterval="0" id="t1" >
                 
                    af:column sortProperty="#{bindings.sometable.hints.Empname}"
                                       sortable="false"
                                         headerText="#{bindings.sometable.hints.Empname.label}"
                                         id="c34">
                                       af:selectBooleanCheckbox  value="#{row.searchRefined}"
                                                                  id="sbc1" clientComponent="true"/>
                                             f:facet name="header">
                                                     af:selectBooleanCheckbox 
                                                            id="selectAll"  clientComponent="true" >
                                                         af:clientListener method="selectRows" type="click"/>
                                                          af:clientAttribute name="tableLocator" value="::t1"/>
                                                         af:clientAttribute name="checkboxLocator" value=":sbc1"/>
                                                   /af:selectBooleanCheckbox>
                                     /f::facet>
                         /af:column>
       
         ...... other columns
/table>

Step 2:


        function selectRows(event) {
            var checkbox = event.getSource();
            var checkboxLocator = checkbox.getProperty("checkboxLocator");
            var tableLocator = checkbox.getProperty("tableLocator");
            var table = checkbox.findComponent(tableLocator);
            var nbRows = parseInt(table.getRows());
            var tableAbsLocator = table.getAbsoluteLocator();
            var i=0;
            while (nbRows > i) {
                var checkBoxABSLocator = tableAbsLocator + "[" + i + "]" + checkboxLocator;
                var rowCheckbox = AdfPage.PAGE.findComponentByAbsoluteLocator(checkBoxABSLocator);
                if (checkbox.getValue() != rowCheckbox.getValue()) {
                    rowCheckbox.setValue(checkbox.getValue());
                }
                i = i+1;
            }
        }


This Code will work any Table and it depends on only 2 attributes which we pass as af:clientAttribute (tableLocator,checkboxLocator).

Note : what ever i marked strings in Bold , make sure that it should not change.
Sortable =  false
 and clientAttribute= true.

1 comment:

  1. I reffered the other blog to get this work.
    http://technology.amis.nl/2013/05/07/adf-client-side-architecture-select-all/

    ReplyDelete