how to get different background colour for row in a table

[anilellendula]

Hi All,

i have AsyTable it have 4 standard columns ,it is set it to the updatable content provider,it list all the values, it has one of the status column , if status is pending than i need to higlight the particular row background with differenent colour, i need to use style sheet for this, can any one help me how can i effective of this stylesheet in run-tinme if status=pending to that row background.

Regards,
Anil Kumar Ellendula

[system]

The rowCSS property on a table will alternate rows between all the supplied css classes that you define on the property. For instance, if you set the property to be: .normal-row, .alternate-row, .alternate-row-two then every third row will have the css class of .normal-row.

If you want to style the row based on business data, then the following will make more sense.

(This is reposted from an internal forum):

To color-code a particular cell in a table, put a BlockPanel in the
cell (and the rest of the content of the cell in the BlockPanel), and
bind the BlockPanel’s (expert Display) CSS Style property value to a
getter in your page bean that returns a css declaration like
“background-color: green;”.

For example, in your page bean you could create the following getter,
which looks up the task search results provider, and gets the value of
the current row’s “taskPriority” property value (or some arbitrary row
property value), and returns a css declaration based on that value:

public String getTaskPriorityStyle() {
ITableContentProvider provider = getTaskSearchProvider();
int taskPriority = provider.getValue(“taskPriority”;

if (taskPriority == 1) {
return “background-color: #fcc;”; // red
} else if (taskPriority == 2) {
return “background-color: #ffc;”; // yellow
} else if (taskPriority == 3) {
return “background-color: #cfc;”; // green
}

return “”;
}

You’d bind this to the BlockPanel’s CSS Style property value.

To color-code a particular row in a table, bind the table’s (expert
Display) Custom Row CSS Class property value to a getter in your page
bean that returns a css class name; define those custom class names in a
custom .css file your create somewhere within the WebContent directory
of the project; and include that .css file onto the page via an (Output
category) Include Stylesheet control.}

For example, in your page bean you could create the following getter,
which looks up the task search results provider, and gets the value of
the current row’s “taskPriority” property value (or some arbitrary row
property value), and returns a css class name (that you invent) based on
that value:

public String getTaskPriorityClass() {
ITableContentProvider provider = getTaskSearchProvider();
int taskPriority = provider.getValue(“taskPriority”;

if (taskPriority == 1) {
return “priority-high”;
} else if (taskPriority == 2) {
return “priority-medium”;
} else if (taskPriority == 3) {
return “priority-low”;
}

return “”;
}

You’d bind this to the table’s Custom Row CSS Class property value.
Then, you’d create a custom .css file, say
“/WebContent/MyTaskInboxResults/custom.css”, and declare some css rules
that style those classes:

…priority-high {
background-color: #fcc; /* red /
}
…priority-medium {
background-color: #ffc; / yellow /
}
…priority-low {
background-color: #cfc; / green */
}

Finally, you’d include that file onto the page with an IncludeStylesheet
control which has its value property set to
“/WebContent/MyTaskInboxResults/custom.css”.

[anilellendula]

Hi Mimel,

Thanks for valuable reply.
it is working now.

in above you explained for cell and rows, can you please explain me if i have 6 standard columns in table, if i want to display 2 colums in differenet back-ground colour irespective of logic, how can i achieve it

Regards,
Anil Kumar Ellendula

[anilellendula]

Hi Mimel,

Can you please reply me if i have 6 standard columns in table, if i want to display 2 colums in differenet back-ground colour irespective of logic, how can i achieve it .

Regards,
Anil Kumar Ellendula

[system]

You would set the ‘columnClasses’ property on the table. The online docs provide more information about that property as well.