Follow by Email

Thursday, 14 April 2016

ADF Skinning: Change Style of ADF Table, Column, Header, Data Cell


After a long vacation I'm back to work :)
This post is about changing look n feel of ADF Faces af:table component

I have seen many questions related to changing table column header style , selected row style, changing row banding styles etc


So this post is all about af:table styling , how can we use ADF Skin to modify default look of table component
Read Previous posts about- ADF Skinning

By Default ADF Table looks like this

Change Table Header Style-


Use column-header-cell-content selector to style af:table column header

af|column::column-header-cell-content {
    color: white;
    font-weight: bold;
    text-align: center;
    background-color: #3f5c9a;
    padding: 3px;
}

And Output is this

Change table data cell and banded data cell style -


When we set RowBandingInterval property of table to greater than zero, it show different background color for rows . 
To set background color of rows we have to set both data-cell and banded-data-cell styles

af|column::data-cell {
    color: black;
    background-color: #aad8ef;
}
af|column::banded-data-cell {
    color: maroon;
}


And Output is this

Change RowHeader column style and Highlighted Row Style


To change style of RowHeader column - Use row-header-cell  selector and for highlighted row use 
af|table::data-row:highlighted

af|column::row-header-cell {
    color: #0080c0;
    font-weight: bold;
}

af|table::data-row:highlighted af|column::data-cell, 
af|table::data-row:highlighted af|column::banded-data-cell {
    color: brown;
    background-color: yellow;
}


And Output is this

Change ADF Table selected Row Style


Doing this a bit tricky ;) We have to apply style for all states (active, busy , inactive etc)


af|table::data-row:selected:inactive af|column::data-cell,
af|column::data-cell:selected,
af|table::data-row:selected:busy,
af|column::data-cell:focus,
af|table::data-row:selected:focused af|column::banded-data-cell,
af|table::data-row:selected:focused af|column::data-cell,
af|table::data-row:selected af|column::data-cell {
    color: white;
    background-color: Red;
}


And Output is this

Cheers :) Happy Learning

9 comments :

  1. Can You Send me Source File at
    Email :ashehzad612@gmail.com
    Thanks

    ReplyDelete
    Replies
    1. Shehzad

      I don't have source file :(
      But why you need that , you can use CSS mentioned in post directly and in case of any issue feel free to ask

      Ashish

      Delete
  2. i have no idea how to change table header style and column header style and where to paste the code that are given by you for column and table header

    ReplyDelete
  3. Have you any video related to this tutorial?

    ReplyDelete
    Replies
    1. Shehzad

      First read this post- ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces)

      After that paste CSS code mentioned in this post in CSS file of your application then drop a table on page and check it

      Ashish

      Delete
  4. Hi Ashish,
    we can traverse through CollectionModel to set selected rows or disclosed rows.

    But can we traverse through RichTreeTable to set properties (inline style) conditionally to rows (output text in the row)

    -Vishnu

    ReplyDelete
    Replies
    1. Vishnu

      For this purpose you can put condition on inline style property
      Suppose you want to hightlight Employees record where Department Id is 100 then you can write this in inline style of table columne like this
      #{row.bindings.DepartmentId==100 ? 'background-color:yellow;' : ''}
      Or if you have to change property of components inside columne then put same condition in output text inside column

      Ashish

      Delete
  5. Well information about change style of adf table.Your post is helps in my Oracle ADF Trainingto understand concepts.

    ReplyDelete