Hello everyone!
I have a question regarding the skinning of specific cells of a ListGrid.
-- WALL OF TEXT BEGINS --
What I am trying to do
I have a ListGrid where one of the columns represents an amount of money.
I want to customize the way this amount is displayed: for example, when positive, I'd like to have it be in a green color, and, when negative, have it be red and bold.
Possible answers
While searching the documentation and the forums, I found two ways to do this:
- The first way is to override getCellCSSText(), and return additive style attributes
see this SmartGwt ShowCase sample for an example
- The second way is to override getBaseStyle(), and replace the standard CSS class name for this cell with a custom class name (for example, "positiveAmountCell" instead of "cell")
see this SmartGwt ShowCase sample for an example
Problems
Our application will be used by many different customers, and each customer wants to have a different style. For example, some might want positive amounts in blue and italic.
Thus, it is not possible to use the first answer, since it doesn't allow per-customer customization.
What we want to do is have a specific CSS class on the cells, and let the customer customize their style sheets on their own.
The problem we encountered with the second answer, is that the we need to copy over all the CSS properties present in the "cell" class and its associated classes (cellDark, cellOver, cellSelected...):
example from the Showcase's css :
Aside from causing code duplication (and thus problems when upgrading smartclient if these CSS classes are updated) and rendering the CSS harder to maintain / read, it stops us from having one separate CSS file containing all these customer-specific properties while still being able to switch the smartclient skins separately.
Attempted Answers
Our goal was to return an *additional* CSS class, which would be added to the base class, and thus beneficing from CSS inheritance.
Our first idea was to override getBaseStyle(), and to return TWO classes, like so:
But it seems returning two classes doesn't work with getBaseStyle().
Our second idea was to try to do the same at the "getCellStyle()" level, thinking we would be able to return multiple CSS classes at this point.
We tried to understand how to override the getCellStyle() javascript method, copying what was done for getBaseStyle() (both adding the getCellStyle()" method and modifying the ListGrid's onInit() method), but to no avail: getCellStyle() seems to be delegated to the "ListGridRenderer", and it didn't work.
Questions
@readers: Thanks a lot for reading this whole post (if you didn't and simply jumped to the end, shame on you!)
@smartclient/smartgwt devs: thanks a lot for this great API you created! (my coworkers and myself are amazed everyday at all the possibilities we discover in smartclient/smartgwt. We often hear "OMG they allow us to do this and that too! Very cool!")
@people who help: thanks in advance for your help and suggestions!
Cya,
-TG
PS: I am not a native english speaker, and apologize for the eventual grammatical errors
I have a question regarding the skinning of specific cells of a ListGrid.
-- WALL OF TEXT BEGINS --
What I am trying to do
I have a ListGrid where one of the columns represents an amount of money.
I want to customize the way this amount is displayed: for example, when positive, I'd like to have it be in a green color, and, when negative, have it be red and bold.
Possible answers
While searching the documentation and the forums, I found two ways to do this:
- The first way is to override getCellCSSText(), and return additive style attributes
see this SmartGwt ShowCase sample for an example
- The second way is to override getBaseStyle(), and replace the standard CSS class name for this cell with a custom class name (for example, "positiveAmountCell" instead of "cell")
see this SmartGwt ShowCase sample for an example
Problems
Our application will be used by many different customers, and each customer wants to have a different style. For example, some might want positive amounts in blue and italic.
Thus, it is not possible to use the first answer, since it doesn't allow per-customer customization.
What we want to do is have a specific CSS class on the cells, and let the customer customize their style sheets on their own.
The problem we encountered with the second answer, is that the we need to copy over all the CSS properties present in the "cell" class and its associated classes (cellDark, cellOver, cellSelected...):
example from the Showcase's css :
Code:
.myHighGridCell,
.myHighGridCellDark {
font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px; text-overflow:ellipsis;
color:black;
border-bottom:1px solid #ffc0c0; border-top:1px solid #ffc0c0;
background-color:#ffc0c0;
}
.myHighGridCellOver,
.myHighGridCellOverDark {
font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px; text-overflow:ellipsis;
color:black;
border-bottom:1px solid #c0c0c0; border-top:1px solid #c0c0c0;
background-color:#ffe0e0;
}
.myHighGridCellSelected,
.myHighGridCellSelectedDark {
font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px; text-overflow:ellipsis;
color:black;
border-bottom:1px solid #ffc0ff; border-top:1px solid #ffc0ff;
background-color:#ffc0ff;
}
.myHighGridCellSelectedOver,
.myHighGridCellSelectedOverDark {
font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px; text-overflow:ellipsis;
color:black;
border-bottom:1px solid #a0a0a0; border-top:1px solid #a0a0a0;
background-color:#ffe0ff;
}
.myHighGridCellDisabled,
.myHighGridCellDisabledDark {
font-family:Verdana,Bitstream Vera Sans,sans-serif; font-size:11px; text-overflow:ellipsis;
color:#808080;
border-bottom:1px solid #ffc0c0; border-top:1px solid #ffc0c0;
background-color:#ffc0c0;
}
Attempted Answers
Our goal was to return an *additional* CSS class, which would be added to the base class, and thus beneficing from CSS inheritance.
Our first idea was to override getBaseStyle(), and to return TWO classes, like so:
Code:
@Override
protected String getBaseStyle(ListGridRecord record, int rowNum, int colNum) {
String baseStyle = super.getBaseStyle(record, rowNum, colNum);
if (record != null) {
ListGridField field = getField(colNum);
if (field != null && field.getType() == ListGridFieldType.FLOAT) {
Float attributeAsDouble = record.getAttributeAsFloat(field.getName());
if (attributeAsDouble == null || attributeAsDouble < 0) {
return "lowerZero " + baseStyle;
} else {
return "upperZero " + baseStyle;
}
}
}
return baseStyle;
}
Our second idea was to try to do the same at the "getCellStyle()" level, thinking we would be able to return multiple CSS classes at this point.
We tried to understand how to override the getCellStyle() javascript method, copying what was done for getBaseStyle() (both adding the getCellStyle()" method and modifying the ListGrid's onInit() method), but to no avail: getCellStyle() seems to be delegated to the "ListGridRenderer", and it didn't work.
Questions
- Is there a way to override "getCellStyles()" even though it is delegated to the ListGridRenderer?
- Is there a reason for not wanting to allow CSS inheritance and allowing to return multiple CSS styles from getBaseStyle()? (like in GWT's UIObject's addStyleName() method)? Is it due to browser compatibility problems?
- Is there a more elegant way to solve this problem?
@readers: Thanks a lot for reading this whole post (if you didn't and simply jumped to the end, shame on you!)
@smartclient/smartgwt devs: thanks a lot for this great API you created! (my coworkers and myself are amazed everyday at all the possibilities we discover in smartclient/smartgwt. We often hear "OMG they allow us to do this and that too! Very cool!")
@people who help: thanks in advance for your help and suggestions!
Cya,
-TG
PS: I am not a native english speaker, and apologize for the eventual grammatical errors
Comment