Creator Tip: Setting table column or row style

During a meeting with Dick Wall of New Energy at Sun Executive Briefing Center, a question came up. How do I flag (set the colors of the text) of a particular cell in the Table Component based on some predefined condition. Here is a tip on how to do this.

Let's start with a Creator project with single Page and a table component. Drag and drop the person table on to table component. Assume we should color the text of the names column with a light blue background, if the name matches "Black" or "Chen" and the job title with light red background if it matches "VP".

Here is how to do this.

Add two methods "getNameStyleClass" and "GetJobStyleClass"

public String getNameStyleClass() {
  String name = (String) getValue("#{currentRow.value['PERSON.NAME']}");
  if ((name != null) && (name.startsWith("Black") || name.startsWith("Chen"))){
    return "nameStyleClass";
  }else{
    return "noStyleClass";
  }
} 
public String getJobStyleClass() {
  String name = (String) getValue("#{currentRow.value['PERSON.JOBTITLE']}");
  if ((name != null) && (name.startsWith("VP") )){
    return "jobStyleClass";
  }else{
    return "noStyleClass";
  }
}

Tip: "#{currentRow.value['PERSON.JOBTITLE']}" is same as what is set to the text property of the StaticText in the Column of the Table Component in the JSP page. You could simple copy and paste it here.

Add three CSS style classes to the resources/stylesheet.css

.noStyleClass{
}

.nameStyleClass {
  background-color: #ccccff;
  border-color: #0000ff;
  border-style: solid;
  border-width: 1px
}

.jobStyleClass {
  background-color: #ffcccc;
  border-color: #0000ff;
  border-style: solid;
  border-width: 1px
}

Select the StaticText component corresponding to the "Name" TableColumn in the Outline View. Click  the Custom Property Editor ([...] button) of the styleclass. From the "Use binding" panel select the getNameStyleClass. Similarly bind getJobStyleClass to styleclass property of StaticText component of "Job Title" Table Column.

After executing the project the table component should display like

Table with Column Styles

Another trick is to make the table to display odd and even rows with different styles. Add the following method to your Page1.java

    public String getColumnStyle(){
        TableRowDataProvider trdp = (TableRowDataProvider) getBean("currentRow");
        RowKey rowKey = trdp.getTableRow();
        if ((Integer.parseInt(rowKey.getRowId()) % 2) == 0){
            return " ";
        }else{
            return "background-color: #eeeeee";
        }
    }

Now select each table column in the outline and click on the [...] of the "style" property in the property sheet. Using the "Use Binding panel -> Bind to Object" dialog, bind the "style" to the Page1.columnStyle property.

The result may not be visible at design time. But at run time you should see something like

Table with Alternate row Styles

Comments:

Hello, is there a way to set the background of the cell or of the row? Thanks.

Posted by Franco on February 02, 2006 at 05:23 PM PST #

Sorry, vorget my post, non enough read...

Posted by Franco on February 02, 2006 at 08:20 PM PST #

I've tried my best to find a way to alter this method to programmatically run through any table and assign any negative values a red font.....any ideas how to access current cell as opposed to current row so I know who I'm checking and setting font for?

Posted by Aidan on March 05, 2006 at 06:45 PM PST #

Winston, Thanks for the great ideas in your blog!!! I have one problem with this one, the odd-even rows with different styles. If you sort the table (using the table headers) the alternating order is lost, ie. similar rows can end up being next to each other. Do you have any idea how to fix it? Thanks, Andras

Posted by Andras on April 18, 2006 at 04:54 AM PDT #

Hi Prakash, I am trying change row color on the basis of selected rows in JTable. I used getSelectedRows method to get selected rows in table and i also know the column number. Could you post or send me the coding how could i do this. I have already tried the Cell Renderer. Any help will be appreciated. Regards, Ahmed

Posted by Ahmed on August 03, 2006 at 01:23 AM PDT #

Andras, that is because in the code above, the rowkey is used. Instead you could use some integer counter and change the code to

if (counter++ % 2) == 0)

Posted by Winston Prakash on August 04, 2006 at 03:04 AM PDT #

Winston, Have you checked out the method described in the Creator Forum thread http://forum.sun.com/jive/thread.jspa?threadID=48900&messageID=163068 ? How does this compare to the method described here in your blog? Note that the method referenced in the Forum thread is dynamic. Thanks, -Brad

Posted by Brad Mayer on October 07, 2006 at 04:54 AM PDT #

Hi Winston, thanks a lot for your tips, they are helping a lot. Do you know how to select the row when I enter in a textfild in one of them by mouse or key? because in the application I´m trying to make I have to save the data and I cant :( , maybe if I can know when the user leaves a row I can save the data based on if it is new or is and update. I was looking for a tutorial on this but it seems that its not a big issue

Posted by Juan on November 03, 2006 at 08:46 PM PST #

so many useful tips thanks Winston

Posted by Jordan on March 17, 2007 at 07:46 AM PDT #

how to give alternate row colors to a table having many rows and columns using html and jsp's?

Posted by mahatik on May 15, 2007 at 04:09 PM PDT #

Hi Winston, i modified the code you gave above to: private int styleCounter=0; private String style="tableOddRowStyle"; public String getColumnStyle(){ TableRowDataProvider trdp = (TableRowDataProvider) getBean("currentRow"); String even = "tableEvenRowStyle"; String odd = "tableOddRowStyle"; if ((styleCounter++ % (table1.getColumnCount())) == 0){ if (style==odd) style=even; else style=odd; } return style; } and that is working fine for only one table. The problem is that in the page i have more than one table. How do i pass the tableName from JSP to Java? Note that i modified the getColumnStyle() to getColumnStyle(Table tableName) and (table1.getColumnCount()) to (tableName.getColumnCount()) . Thanks in advance George

Posted by George on June 25, 2007 at 07:35 PM PDT #

please add on my previous post this JSP code: <ui:table..... id="table1"> <ui:tableColumn....... id="tableColumn1Tc" styleClass="#{page$Page1.columnStyle}"> </ui:tableColumn> </ui:table> George

Posted by George on June 25, 2007 at 08:00 PM PDT #

Hello Winston. Sorry for my bad english. I've encountered a problem with even/odd row highlighting and row selection. The problem is that when you select a row it does not become highlighted (background is always #eeeeee). I've tried to use "styleClass" instead of "style" but that didn't help. The good news that i found a solution, and it is even more simplier then your :) To make selectable even/odd row highlighting one have to define the following CSS styles:
.evenRow{}
.oddRow{}

table.Tbl tr.evenRow td, table.Tbl tr.evenRow th
{
	background-color: #eeeeee;
}

table.Tbl tr.TblSelRow td, table.Tbl tr.TblSelRow th
{
	background-color:#F4F5BE;
}
and should add this line to "prerender()" method:
tableRowGroup1.setStyleClasses("oddRow, evenRow");
Note about the comma. The selection code is the same as in your selection tutorial That's all.

Posted by Alexander Yastrebov on July 11, 2007 at 10:16 PM PDT #

Hi Alexander, very elegant solution and thanks for sharing it with us.

Posted by Winston Prakash on July 12, 2007 at 01:07 AM PDT #

Hi Winston,

This is a very useful Tip.

How can i set different Colors for my Table Column Headers?
For instance, Red for Table column Headers 1-3, Blue for Table Column Headers 4-5 and so on.

Thanks in advance,

Pasko

Posted by pasko on August 13, 2007 at 10:42 PM PDT #

,lklk

Posted by guest on September 04, 2007 at 09:46 PM PDT #

Hi all,
very efficient solution there Alexander
thanks you!

instead of adding
tableRowGroup1.setStyleClasses("oddRow, evenRow"); in the prerender()

try to add it to JSP inside the RowGroup for each Table
<ui:tableRowGroup styleClasses="oddRow ,evenRow" >

Posted by George on September 06, 2007 at 01:36 AM PDT #

Hello, what will be the html generated codes when doing the example above? Thank you!

Posted by Lei on September 10, 2007 at 04:15 PM PDT #

Hi all,
i develop a web application with netbeans 5.5.1 visual web pack.
how can i highlight table rows on mouse hover?
Regards.
Nana

Posted by Nana on December 16, 2007 at 09:54 PM PST #

muy bueno, excelente... gracias de mucha ayuda........ :)

Posted by Diego Castañeda on January 06, 2008 at 08:18 AM PST #

Hi Winston, I am trying change footerText color in JTable. Could you post or send me the coding how could i do this. Any help will be appreciated. Regards, Jenny

Posted by Jenny on January 17, 2008 at 11:10 AM PST #

very nice

Posted by guest on February 25, 2008 at 07:37 PM PST #

I am working on a scheduling module in netbeans. I have a column of buttons and static text together, and on the button click of "Done"; which means that the task has been accomplished, i want the color of the cell in that particular table to be changed.. Is this possible? m using jsf and cannot even change the table background color, m confused whether vl b able to change the color of only one cell based on the onclick event in the button.. please reply asap... thanks a lot in advance

Posted by Mansi on March 19, 2008 at 02:28 AM PDT #

Hi Winston. Sorry for my bad english.
I have on my page a TextField component and I set in the styleClass property the following style:
.SoloLectura {
border: none;
border-width:0px;
}
like this:
<webuijsf:textField binding="#{reclamos$mantenerreclamos$grp001prcl.ds1pr}" columns="40" id="ds1pr"
onFocus="this.blur()" styleClass="SoloLectura"/>

However when the component is rendered, it is taking a default style (class="TxtFld_sun4 TxtFldVld_sun4") :

<input class="TxtFld_sun4 TxtFldVld_sun4" size="40" name="form1:ds1pr_field" id="form1:ds1pr_field" dojoattachpoint="fieldNode" type="text">

then, How can I override this class element??

Thanks in advance

Posted by rogerzam on July 11, 2008 at 02:26 AM PDT #

yes thanks very much winston as well excellent tips

Posted by sudoku solver on January 09, 2010 at 04:07 PM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
Search

Archives
« July 2015
SunMonTueWedThuFriSat
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
       
Today