ListGrid removeField SVG icon doesn’t inherit color from hilites or styles

[claudiobosticco]

SmartClient Version: v13.1p_2026-01-26/AllModules Development Only (built 2026-01-26)


Hi, in the Shiva skin, I noticed that SVG icons such as the removeField one do not inherit the text color defined in a hilite:

// array of hilite-objects to apply to the grid
var hiliteArray =
    [
        {
            fieldName: "area",
            cssText: "color:#FF0000;",
            criteria: {
                fieldName: "area",
                operator: "greaterThan",
                value: 5000000
            }
        },
        {

            cssText: "color:#FFFFFF;background-color:#639966;",
            criteria: {
                _constructor: "AdvancedCriteria",
                operator: "and",
                criteria: [
                    {
                        fieldName: "gdp",
                        operator: "greaterThan",
                        value: 1000000
                    },
                    {
                        fieldName: "area",
                        operator: "lessThan",
                        value: 500000
                    }
                ]
            }
        }
    ];

isc.ListGrid.create({
        ID: "countryList",
        canRemoveRecords:true,
        width:600, height:250,

        dataSource: "countryDS",
        autoFetchData: true,
        canAddFormulaFields: true,
        canAddSummaryFields: true,
        fields:[
            {name:"countryCode", title:"Flag", width:65, type:"image", imageURLPrefix:"flags/24/",
                imageURLSuffix:".png"
            },
            {name:"countryName", title:"Country"},
            {name:"capital", title:"Capital"},
            {name:"population", title:"Population"},
            {name:"area", title:"Area (km&sup2"},
            {name:"gdp"}
        ],
        hilites: hiliteArray
    });

nor the one defined via getBaseStyle:

isc.ListGrid.create({
    ID: "countryList",
canRemoveRecords:true,
    width:500, height:224, canDragSelect: true,
    sortField: 1,
    data: countryData,
    baseStyle:"cell",
    // turn off alternateFieldStyles so the custom styles are properly applied
    alternateFieldStyles: false,
    fields:[
        {name:"countryCode", title:"Flag", width:65, type:"image", imageURLPrefix:"flags/24/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"population", title:"Population", type:"number"}
    ],

    getBaseStyle: function (record, rowNum, colNum) {
            if (record.population > 1000000000) {
                return "myHighGridCell";
            } else if (record.population < 50000000) {
                return "myLowGridCell";
            } else {
                return this.baseStyle;
            }

    }

})

nor the one added with getCellCSSText:

isc.ListGrid.create({
    ID: "countryList",
canRemoveRecords:true,
    width:500, height:224, canDragSelect: true,
    sortField: 1,
    data: countryData,
    fields:[
        {name:"countryCode", title:"Flag", width:65, type:"image", imageURLPrefix:"flags/24/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"population", title:"Population", type:"number"}
    ],

    getCellCSSText: function (record, rowNum, colNum) {
            if (record.population > 1000000000) {
                return "font-weight:bold; color:#d64949; background-color:yellow;";
            } else if (record.population < 50000000) {
                return "font-weight:bold; color:#287fd6;";
            }

    }

})

[Isomorphic]

hi Claudio,

In Shiva, many places that use icons are provided the default "icon" style, so that icon-colors are consistent by default, framework-wide.

In this case, you can clear those styles via a few attributes on ListGrid:

isc.ListGrid.addProperties({
    removeIconStyle: null,
    // and if you want to
    groupIconStyle: null,
    expansionFieldImageStyle: null
});

[claudiobosticco]

Thanks a lot for the heads-up! It works perfectly in all three cases.