views:

356

answers:

5

I've got a tr:table that I need to style using CSS. All the normal style functions of a table are working, but row banding and row selection aren't coming up. When I view the rendered source, I'm not seeing a difference in the rows for an id or class to grab on to, and the official documentation doesn't have any attributes for declaring a style class for either. Is this possible and if so what do I need to do to get my CSS to grab onto it?

<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
</tr:table>

Edit

Let me try to clairfy what's happening.

First, using the declaration above tells jsf to generate a table, and the attribute rowBandingInterval tells it to give each row alternating colors (If it was set to 2, then it would do 2 rows one color, 2 rows another, 2 rows the original, etc.)

Once the page gets rendered into standard html, trinidad (and jsf) apply their own classes and IDs to the html. My normal procedure is to look at the rendered html, find the class that it is appling and add CSS rules for it. However in this case, no additional styles are added (nothing in the rendered html denotes one row to be different from another).

So the question is, how do I tell trinidad to either give alternating rows and the user selected row different classes/IDs for me to grab on to with CSS?

Edit 2

Just to keep anybody paying attention posted, there are no changes to the actual td elements either

Edit 3

After having switched all the attributes around and then stripping all the code down to it's bare bones, I found the row banding attribute. Trinidad classes are rather convluted, and unless you reformat the code and pull out all the noise you won't see it. Trinidad adds the class .af_column_cell-text-band to the banded rows, where as the normal rows have just .af_column_cell-text. So that's half the problem solved. I still need to know the selector for a user selected row, for which I'll happily give all the marbles to anybody that can give me an answer to just that.

+1  A: 

This is not directly answering your question, but why not use the CSS3 pseudo-class nth-child to achieve this effect ? For instance :

tr:nth-child(2n)
{
background-color:red;
}
Andrei
The site I'm developing is an internal site to my company, which only allows the use of IE6.
Alex Larzelere
Thought so :)...But there are many Javascript libraries that provide CSS3 selectors for IE 6, I don't see any reason not to use them and rely on server-side technologies to do what is essentially presentational work.
Andrei
have a look at Dean Edwards IE9.js library (http://ie7-js.googlecode.com/), this enables via javascript a range of fixes for missing selector support in IE 5-8 including nth-child.
SpliFF
A: 

I will refer you to the trinidad documentation. http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html In their example they declare the banding as row banding="row" I would assume the reason you do not get anything is that you have not declared if it is row or column banding.

Jonathan Park
both `banding="row" bandingInterval="1"` and `rowBandingInterval="1"` (which is on the same page listed under attributes) both do nothing to the rendered html.
Alex Larzelere
+2  A: 

There is a nice and simple jquery code to do the row highlighting located here.

The jQuery is as follows

<script type="text/javascript">
  $(document).ready(function(){
    $(".stripeMe tr")
      .mouseover(function() { $(this).addClass("over");})
      .mouseout(function() { $(this).removeClass("over");
      });
    $(".stripeMe tr:even").addClass("alt");
  });
</script>

Then a bit of css

tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }

btw I took all that code from the following site where you can also view the demo.

corymathews
Solves another problem I was going to tackle but not quite what I'm after. When the user clicks a button in the row, that is actually sent back to the server where JSF builds and renders the page, the question is how do I get jsf to tell the rendered html which row has been selected by the user.
Alex Larzelere
A: 

Hi, put these selectors in your trinidadskin.css-file(smSkin.css in my case): .AFTableCellDataBackgroundColor:alias { background-color: #F5F5DC; }

.AFTableCellDataBandedBackgroundColor:alias { background-color: #FFFFFF; }

Configuration of trinidad-skins.xml

<skin>
    <id>
        sm.desktop
    </id>
    <family>
        sm
    </family>
    <render-kit-id>
        org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
        skins/sm/smSkin.css
    </style-sheet-name>
</skin>

lkdg
We ended up scrapping the whole trinidad skin idea, but your's is the closest to what we were looking for
Alex Larzelere
A: 

Hi, I made something wrong during the registration process, so this is a new answer instead of a comment.

To deal with the trinidad-skinning topic you need to do the following:

In your web.xml you need to set this parameter to true while developping:

<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>

Get firebug for your firefox. With that add-on you can determine which trinidad-selector is used on a component.

There is no selector for a user selected row. I did it this way: Give your object something like a "highlight property", which you change if it is the selected one.

<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>

Do that for all columns of your table and you are done.

lkdg