Delimiting Frozen Columns and Header Spans in ListGrid

[gchan]

Two questions:

(1) Our customers want to visually delimit both Frozen Columns and Header Spans. How do we, for example, show a vertical line to the rightmost of any frozen columns, and a vertical line to the left of each header span?

See the attached PNG which shows the following code (modified from your Feature Explorer), with vertical lines added in photoshop. The mockup shows the vertical line extending through both column header and list grid body, but having the line in the list grid body only would be sufficient.

isc.ListGrid.create({
    ID: "countryList",
    width:750, height:224, alternateRecordStyles:true,
    headerHeight: 100,
    dataSource: countryDS,
    autoFetchData: true,
    fields:[
        {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", frozen:true, imageURLSuffix:".png"},
        {name:"countryName", title:"Country", frozen:true},
        {name:"capital"},
        {name:"government"},
        {name:"independence", title:"Nationhood"},
        {name:"population", title:"Population", formatCellValue:"isc.Format.toUSString(value)"},
        {name:"area", title:"Area (km²)", formatCellValue:"isc.Format.toUSString(value)"},
        {name:"gdp", formatCellValue:"isc.Format.toUSString(value)"}
    ],
    headerSpans: [
        {
            fields: ["capital", "government", "independence"], 
            title: "Government & Politics"
        },
        {
            fields: ["population", "area", "gdp"], 
            title: "Demographics"
        }
    ]
    
})

(2) Also, the PNG illustrates that when the ListGrid headerHeight is set above the default (for example, to accommodate very long, wrapped column header titles), the header menu button (down arrow) is stretched abnormally. How do we ensure that the button image does not appear stretched?

Browser: Firefox 7
SmartClient version: 8.1

Thanks very much!

[Isomorphic]

The easiest way to achieve this is probably custom css on the field to the left of the "boundary" you want to delimit.
You could use an override to getCellCSSText() or getBaseStyle() to achieve this.

[gchan]

Thanks for your answer to part (1). Figured you might say that, but hoped there was an easier way...

Part (2) Also, the PNG illustrates that when the ListGrid headerHeight is set above the default (for example, to accommodate very long, wrapped column header titles), the header menu button (down arrow) is stretched abnormally. How do we ensure that the button image does not appear stretched?

Thanks.

[Isomorphic]

The stretched appearance of that image is caused by the way the button is styled.
In the Enterprise skin you'll see the "headerMenuButtonSrc" is set to an image which is sized for the default sized header and includes the background and the arrow icon. This is the image that is stretching for you and looking odd.

We will be fixing this in an upcoming nightly build on the 8.2 branch by using the "headerMenuButtonIcon" attribute for the arrow icon -- the icon will not stretch as the button's height changes.
You could wait for this change, or apply a similar change yourself (so have headerMenuButtonSrc set to media for the background of the button, and headerMenuButtonIcon set to media for an "arrow" type indicator).