setAlternateBodyStyleName is having no effect

[dbscott525]

I am trying to use two styles to affect the alternate record styles in a ListGrid.

Here is my test code

[B]public[/B] [B]class[/B] AlternateRecordStyleTest [B]extends[/B] ListGrid {
 
    [B]private[/B] [B]static[/B] [B]final[/B] [B]int[/B]    [B][I]NUMBER_OF_RECORDS[/I][/B] = 3;
    [B]private[/B] [B]static[/B] [B]final[/B] String [B][I]FIELD_NAME[/I][/B]        = "Field";
 
    [B]public[/B] AlternateRecordStyleTest() {
 
        setAlternateRecordStyles([B]true[/B]);
        setAlternateBodyStyleName("AlternateBodyStyleName");
        setBaseStyle("BaseStyle");
 
        setFields([B]new[/B] ListGridField([B][I]FIELD_NAME[/I][/B]));
        ListGridRecord[] records = [B]new[/B] ListGridRecord[[B][I]NUMBER_OF_RECORDS[/I][/B]];
        [B]for[/B] ([B]int[/B] i = 1; i <= [B][I]NUMBER_OF_RECORDS[/I][/B]; i++) {
            ListGridRecord record = [B]new[/B] ListGridRecord();
            record.setAttribute([B][I]FIELD_NAME[/I][/B], "Record " + i);
            records[i - 1] = record;
        }
 
        setData(records);
    }
 
}

Here is the CSS

[I].BaseStyle[/I]{
    color: [I]red[/I];
}
 
[I].AlternateBodyStyleName[/I] {
    color: [I]blue[/I];
}

I have attached a screen capture of the resulting display.

As you may be able to see, the text color of the second row is black rather blue as specified by the CSS AlternateBodyStyleName style class.

[Isomorphic]

Your settings are correctly styling the ListGrid body. Then, styles applied to the cells are overriding the color setting on the body.

[dbscott525]

Your settings are correctly styling the ListGrid body. Then, styles applied to the cells are overriding the color setting on the body.

What style settings do I use to have the style apply to the alternate rows. There are over 20 style settings and it is not clear to me which style settings to use to have one style apply to even numbered records and another style apply to odd number records.

The only documentation I could find for setAlternateBodyStyleName(String alternateBodyStyleName) is :Optional css style to apply to the body if alternateRecordStyles is true for this grid." In my code I tried to follow this documentation but its not having the apparent documented effect.

[Isomorphic]

See docs for alternateRecordStyles, or getCellStyle() or the CellStyleSuffixes overview - they all cover this and are interlinked.

[carlossierra]

dbscott525 I don't know it this is the most efficient way to do this, but I handle this type of customization by including this override to ListGrid's getCellCSSText() method. You can easily change the desired code to get your desired effect:

@Override  
protected String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {  
    if (isAlternateRecord(rowNum)) {  
        return "color:blue;";
    } else {  
        return "color:red;";
    }  
}

// wrapper for readability 
private boolean isAlternateRecord(int rowNum) {
    return rowNum % 2 == 1;
}

I think this works because of this:

Return CSS text for styling this cell, which will be applied in addition to the CSS class for the cell, as overrides.

[dbscott525]

See docs for alternateRecordStyles, or getCellStyle() or the CellStyleSuffixes overview - they all cover this and are interlinked.

I was able to find this document: http://www.smartclient.com/smartgwte...eSuffixes.html. This was useful and I have been able to find the control over the cell styles that I need.

Now I’m trying to find a similar document for the method setHeaderBaseStyle. It doesn’t seem have the same set of states that the cells do. Specifically, there is a state where a header has been clicked and/or the cursor is over the header that I can’t seem to control.

If there is such a document please provide the URL.

[dbscott525]

… I handle this type of customization by including this override to ListGrid's getCellCSSText() method. You can easily change the desired code to get your desired effect:

This works if you call setAlternateRecordStyles(false). Otherwise, the default behavior still tries to take over and the results are somewhat anomalous.


With setAlternateRecordStyles(true) I found that the following CSS works:

[I].Row[/I][B],[/B]
[I].RowOver[/I][B],[/B]
[I].RowSelected[/I][B],[/B]
[I].RowSelectedOver[/I]
 {
    background: [I]rgb(255,[/I] [I]255,[/I] [I]255)[/I];
    border: [I]1px[/I] [I]solid[/I] [I]rgb(187,[/I] [I]187,[/I] [I]187)[/I];
    color: [I]rgb(51,[/I] [I]51,[/I] [I]51)[/I];
}
 
[I].RowDark[/I][B],[/B]
[I].RowOverDark[/I][B],[/B]
[I].RowSelectedDark[/I][B],[/B]
[I].RowSelectedOverDark[/I]
 {
    background: [I]rgb(245,[/I] [I]245,[/I] [I]245)[/I];
    border: [I]1px[/I] [I]solid[/I] [I]rgb(170,[/I] [I]170,[/I] [I]170)[/I];
    border-width: [I]0px[/I] [I]1px[/I] [I]0[/I] [I]1px[/I];
    color: [I]rgb(51,[/I] [I]51,[/I] [I]51)[/I];
}

[Isomorphic]

If you look at the docs for Button.baseStyle, there is a prominent link to StatefulCanvas.getStateSuffix, which has a big discussion of the different states and what they mean.

So just to make sure - the last time we had someone missing prominent links like this, it turned out that they had a browser extension involved which literally caused the links to render like normal text. So, when you look at the docs for Button.baseStyle, are you able to see the link to getStateSuffix()?

About the "somewhat anomalous" results from getCellCSSText(), we don't have any reported bugs against this API, please let us know if you see a problem where the framework is not behaving as documented.