Showing number of rows or row count on top and bottom of table in ADF.

Hi Friends,

We will see today how to show the page count on top and bottom of table in ADF.

I am assuming that you all know how to create the table to show data from view object in ADF.

Assume you have a table which contains the information of employees from employees table of HR schema.

Now surround this table with a panel collection.

Now your panel collection has some facet with name "statusbar", "toolbar" etc.

Right click on facet "toolbar" and select "insert after f : facet toolbar and then "Facet Secondary Toolbar" as shown below in image.



Now on facet "statusbar" and "secondaryToolbar" put toolbar component from component pallet.

Then put a output text inside each toolbar as follows:

 <f:facet name="secondaryToolbar">
            <af:toolbar id="t3" stretchId="s2">
              <af:spacer width="10" height="10" id="s2" clientComponent="true"/>
              <af:outputText value="Total Records:#{bindings.EmployeesVO1Iterator.estimatedRowCount}" id="ot2"
                             noWrap="true"/>
            </af:toolbar>
          </f:facet>
          <f:facet name="statusbar">
           <af:toolbar id="t2">
              <af:outputText value="Records:#{(bindings.EmployeesVO1Iterator.rangeStart &lt; 0 ? 1 : bindings.EmployeesVO1Iterator.rangeStart+1) + ( bindings.EmployeesVO1Iterator.currentRowIndexInRange == -1 ? 0 : bindings.EmployeesVO1Iterator.currentRowIndexInRange)}/#{bindings.EmployeesVO1Iterator.estimatedRowCount}" id="ot1"
                             noWrap="true" partialTriggers="t1"/>
            </af:toolbar>
          </f:facet>

give the value of output text as given above. and set the partial target needed.

The facet status bar count will be shown on bottom of table and facet secondaryToolbar count will be shown on top right corner of the table.

when you will run your page you can see the count of rows on top right corner and selected row/Total number of rows on bottom right corner of the table as shown below
.Thats all :) Happy ADF Coding.





Comments

  1. UnknownJune 14, 2014

    Rows Selected is showing 1 (one row selected) but the Records on the bottom right corner shows 2/107. Why?

    ReplyDelete
    Replies
    1. AnonymousJuly 30, 2014

      The selected row index is 2, but number of selected rows is 1.

      Delete
    2. UnknownNovember 05, 2015

      chế, Nhạc Thiên lão tổ dĩ nhiên cũng biết.

      Ở trong đình viện, lúc này đã có một số cường giả của Tứ Đại Nhân Tộc, Tôn Phong lão tổ, Trần Vân lão tổ, còn có Vũ Văn Lê lão tổ nữa, lúc Nhạc Thành đến đại sảnh thì tất cả mọi người đều nhìn về phía hắn.

      - Lão tổ, đã xảy ra đại sự gì?

      Nhạc Thành nhìn nét mặt của mọi người thì cũng biết rằng chuyện nhất định không nhỏ, chẳng lẽ kết giới bị Hắc Ám Thần Điện mở ra được rồi sao?

      - Ngươi đừdongtam
      mu private
      tim phong tro
      http://nhatroso.com/
      nhac san cuc manh
      tổng đài tư vấn luật
      http://dichvu.tuvanphapluattructuyen.com/
      văn phòng luật
      tổng đài tư vấn pháp luật
      thành lập công ty
      http://we-cooking.com/
      chém gió
      trung tâm ngoại ngững vội, là huyền thiên đại lục xảy ra chuyện. Để Nhạc Liệt nói qua với ngươi một chút.

      Nhạc Thiên lão tổ cất tiếng nói với Nhạc Thành, nhưng sau đó ra ý bảo Nhạc Thành ngồi xuống trước.

      Nghe thấy có chuyện ở huyền thiên nội lục, sắc mặt của Nhạc Thành nhất thời trầm xuống, đầu

      Delete
  2. AnonymousSeptember 25, 2014

    good one!

    ReplyDelete
  3. UnknownSeptember 29, 2014

    Hi Kunal Kumar, this is laxman.....i m new to Oracle ADF,can u explain about strechid and EmployeesVO1Iterator in the above code. and From wr i can get strechid value and wt is this EmployeesVO1Iterator.

    Thanks in Adv.

    ReplyDelete
    Replies
    1. Kunal Kumar's BlogSeptember 29, 2014

      By default the item inside toolbar component are left align. To make the component right align we use stretchid property. StretchId is usually set to the id of an af:spacer on the toolbar that you want to stretch to take up any available extra horizontal space.

      The component which you want to stretch must be available on the client. So we specify clientComponent attribute to 'true' to the spacer.

      EmployeesVO1Iterator is the Iterator binding in your pageDef. It allows you to iterate through each rows present in the view object. When you drag and drop any view object from data control on your page as forms then Jdeveloper will create a binding of all the attribute attribute along with the Iterator.
      In the same way if you drag and drop the view object instance from data control as table then it will create a tree binding and associated iterator.

      Delete
  4. UnknownSeptember 29, 2014

    Hi Kunal...thanks for u explanation.......I tried above program ......i getting total no of records at top right corner, but i m not getting bottom right corner results and it showing error in statusbar value i,e af:outputText value="Records:#{(bindings.EmployeesVO1Iterator.rangeStart < 0 ? 1 : in this it showing error at rangeStart with yellow color underlined.
    Pls help me..

    Thanks in Adv.

    ReplyDelete
    Replies
    1. Kunal Kumar's BlogSeptember 30, 2014

      Yellow color is just indicating that, that line has some warning not an error. So nothing to fear. Kindly check your Iterator name if it is pointing to correct Iterator or not.

      If you are still not able to solve kindly send your sample application on my email kumar.kunal2808@gmail.com. I will check it out.

      Delete
  5. UnknownOctober 03, 2014

    hi kunal ji i am new to oracle adf can u give me some suggestions regarding to this ,like what are the books i have to follow and what are the other technologies i should learn with this

    ReplyDelete
    Replies
    1. Kunal Kumar's BlogOctober 04, 2014

      Hi Saleem,

      There are many blogs and tutorial available on Oracle as well as on Google with example and screenshots.

      You can refer these links

      http://www.oracle.com/technetwork/developer-tools/jdev/overview/index-100269.html

      http://docs.oracle.com/cd/E18941_01/tutorials/toc.htm

      To learn ADF you need to have the good knowledge of SQl , PL/SQL and Java.

      Delete
  6. MaheshApril 21, 2015

    Hello Kunal,

    Thanks for the post. I have a quick question. I want to know how you displayed "Rows Selected" on the left bottom corner. I was able to achieve the other counts as displayed but can't get to display the count on the left bottom corner. Please help! Thanks.

    ReplyDelete
    Replies
    1. Kunal Kumar's BlogApril 21, 2015

      Hi Mahesh,

      Row Selected will show when your table will have rowSelection property as Multiple and your table is inside the Panel Collection layout.

      Thanks and Regards,
      Kunal Kumar

      Delete
    2. MaheshApril 21, 2015

      Wow...that's a cool feature! Thanks for the quick response. Also, I have another question. Is there a way, you can show the text 'Records x/xxx' in the place where the 'Rows Selected X' is displayed? I was looking at customize using CSS but looks like I am out of options. Kindly let me know if we can achieve it.

      Thanks

      Delete
  7. DipendraJune 07, 2017

    Hi Kunal,
    I want to increment the ROW SELECTED(at the bottom left) with a selected number of checkbox.
    is there a way to do it? or can we access this internal counter which is being used here?

    ReplyDelete

Post a Comment

Popular posts from this blog

Setting up the environment for Angular2 and Hello World Example in Angular2

Image
Hi All, In this post I am going you to show you how you can set up the environment for Angular2. You may want to run your application in different servers. So here I am going to show you how you can run your Angular2 application in the following two servers: 1. lite-server (static server) 2. Weblogic Server 10.3 Lets do the setup for lite server.  First of all go to any directory in your computer and create a folder in that directory with name "angular2-example". You can do it by the command line also by typing the following command. mkdir  angular2-example Now once the directory is created you need to create three files. 1. tsconfig.json 2. typings.json 3. package.json 1.  tsconfig.json This file is TypeScript compiler configuration file. It guides the compiler to generate JavaScript files after compilation. The content of this file will be as follows: {   "compilerOptions": {     "target": "es6",     "modu...
Read more

Build a Simple ReactJS application using react-cli

Image
Hi All, In this blog we will see how we can create a sample application using react-cli.  It is a command line interface tool that seeks to automate some tasks when working on a React.js project. To starts with you have to install it globally by running following command: npm install -g react-cli The you have to run the following command in command window: npm install -g create-react-app  Now once it is installed you can create any directory where you want to create you sample ReactJS application. I have created a folder with name "TestApp" in my local drive. Now you have to run the following command to create the sample application. create-react-app testapp  While it is creating application and downloading all the artifacts related to this you can see the following things in command line as shown below: So it will create a ReactJS application with name "testapp" under folder "TestApp" as you can see in the above screenshot. On...
Read more