Icons not displaying in ListGrid column in IE8

[satya_paul]

Smartclient version: v10.0p_2015-06-17/Enterprise Deployment

We have recently upgraded from 8.2 to 10.0. After upgrading to 10.0, for some of the records of a column in ListGrid, we are displaying an icon which is not coming in IE8 but works fine for every other browser.

Please refer to "Icons missing in IE8.jpg" and "Icons displaying in firefox.jpg" files.

For this ListGrid we have overridden the getBaseStyle method to provide a custom style for some of the ListGrid records of a column. Below is the code for that

if (this.getFieldName(colNum) == 'FileName')
{
return "replayedCell";
}
else {
return this.Super("getBaseStyle",arguments);
}

In above code , "replayedCell" is the customized style which we are using to display the icons for some records of a column. Below is the css code we have added in the skin_styles.css file for "replayedCell".

.replayedCell {
padding-left: 2em;
background-image: url(images/FGimages/Replayed_16.png);
background-repeat: no-repeat;
background-position: 0 -2;
font-family: Verdana, Bitstream Vera Sans, sans-serif;
font-size: 11px;

}

Replayed_16.png is the image which we are displaying in ListGrid. But this image is not getting displayed in the Internet Explorer 8.
Can you please take a look into this issue?

[Isomorphic]

Take a look at what, if any, requests you are seeing from IE8 to load the images. If you see that there are requests to load the image, but the paths are wrong, take a look at the docs for ListGrid.fastCellUpdates.

[satya_paul]

I tried using ListGrid.fastCellUpdates for our list grid but it didn't worked.
There are requests to load the image and the path of the image is also correct but still image is not getting displayed.
This issue is occurring only in IE8 and for other IE versions it works fine.
Also, this issue is not present when we use smartclient 8.2 libraries.

Looks like this issue is related to smartclient updgrade only.

Is there any chance that this issue is related to "css multiple backgrounds issue with IE8"?
http://stackoverflow.com/questions/2...ect-in-ie8-gwt
http://stackoverflow.com/questions/5...working-on-ie8

[Isomorphic]

It's possible that this is a case where the SmartClient framework has changed to make use of a standard HTML feature which works by itself but happens to break your particular usage in IE8 only.
We'll take a look and see if anything jumps out at us.
However, a neater way to achieve what you are after is probably to make use of the ListGrid 'valueIcon' subsystem anyway.
If you simply override getValueIcon() you can use the valueIcons feature to render out your icons rather than relying on the background-image applied via styling as you are currently doing.

Regards
Isomorphic Software

[Isomorphic]

A follow up on this.
Our recommendation to override 'getValueIcon()' still stands. This is a supported API intended for embedding an icon into a cell, giving you pretty much exactly the appearance you are after.

However we did also attempt to reproduce the problem using IE8 running on Windows 7, without success.
Here is our test case (obviously embedded in an HTML file with the appropriate doctype, which loads the SmartClient libraries):

<style>

.replayedCell {
    padding-left: 2em;
    /* background-image: url(images/FGimages/Replayed_16.png); */
    /* edited to pick up a "known good" URL */
    background-image: url(http://localhost:8080/isomorphic/system/reference/exampleImages/flags/16/US.png);
    background-repeat: no-repeat;
    background-position: 0 -2;
    font-family: Verdana, Bitstream Vera Sans, sans-serif;
    font-size: 11px;
}
    
</style>

<script>
    isc.ListGrid.create({
        ID:"testGrid",
        alternateRecordStyles:false,
        // fastCellUpdates has no impact one way or another
        //fastCellUpdates:false,
        fields:[
            {name:"Field1"},
            {name:"FileName"}
        ],
        data:[
            {Field1:"value1", FileName:"value1a"},
            {Field1:"value2", FileName:"value2a"}
        ],
        
        getBaseStyle : function (record, rowNum, colNum) {
            if (this.getFieldName(colNum) == 'FileName')
            {
                return "replayedCell";
            }
            else {
                return this.Super("getBaseStyle",arguments);
            }        
        }
    })
</script>

This is working for us - we see the image show up in each replayedCell field.
If you would like us to take another look, please show us a complete (and minimal) runnable test case, similar to the above, which does demonstrate the problem.

Regards
Isomorphic Software