hilite icon not working?

[claudiobosticco]

Hello, I was trying this sample
https://www-demos.smartclient.com/sm...izeIncrease=10

and noticed that the icon in the hilite is added using htmlAfter, but in the docs I see an icon attribute (and a ListGrid.hiliteIconPosition).

So I tried to remove the html after and add icon:"[SKIN]/actions/exclamation.png", but nothing shows.

Is it a bug or am I missing something?

[claudiobosticco]

note that I'm asking because I usually define a formatCellValue when I want to add an icon or entirely replace the value with an icon, but this feature seems perfect to avoid this (at least if it's possible to define a criteria) and also seems to have an advantage in respect to filtering.

[Isomorphic]

hi Claudio - your file-path is wrong - you want [SKINIMG], or [SKIN]images/

[claudiobosticco]

thanks for the heads up! Now it's working. Is it expected that to display only the icon, I've got to use replacementValue: " ", as the empty string doesn't seem to work?

[Isomorphic]

hi Claudio - yes, that is the way things work right now.

But you can stick the icon straight in the replacementValue if you want to:

    replacementValue: isc.Canvas.imgHTML("[SKINIMG]/actions/exclamation.png", 16, 16)

[claudiobosticco]

Thanks! As I'm actually thinking of using an SVG, does one of the two approaches has an advantage?

[Isomorphic]

Not really - applied to replacementValue, hiliteIconPosition doesn't really have a purpose, but not much else is different. Note that, in the example shown and Shiva, the png will map to SVG via the stockIcons system - if your actual icon is an SVG of your own, you can specify the sizes in the src-string to get automatic scaling.

However - we *will* have a quick look at why we don't show the hilite-icon when there's no value (which is what setting replacementValue to "" resembles).

[claudiobosticco]

Hello, please try this modified test case:

var ds = isc.DataSource.get("countryDS");

var spriteFile = "[ISOMORPHIC]system/reference/inlineExamples/svg/mediaPlayer.svg";
// the special prefix "sprite:svg:" causes the browser to access the spriteFile svg file to
// re-<use> the template <symbol> tags defined there
var spritePrefix = "sprite:svg:" + spriteFile;
// array of hilite-objects to apply to the grid
var hiliteArray =
    [
        {
            fieldName:[
                "area",
                "gdp"
            ],
            replacementValue: "&nbsp;",
            icon:spritePrefix+"#icon-forward;size:16,16;",
            criteria: {
                _constructor: "AdvancedCriteria",
                operator: "and",
                criteria: [
                    {
                        fieldName: "gdp",
                        operator: "greaterThan",
                        value: 1000000
                    },
                    {
                        fieldName: "area",
                        operator: "lessThan",
                        value: 500000
                    }
                ]
            }
        }
    ]
;

isc.VLayout.create({
    ID:"layout",
    width:600, height:250,
    membersMargin: 5,
    members: [
        isc.HLayout.create({
            ID:"buttonLayout",
            width:"*", height:30,
            membersMargin: 10,
            members: [
                isc.IButton.create({
                    ID: "editHilitesButton",
                    autoFit: true,
                    title: "Edit Hilites",
                    click: "countryList.editHilites();"
                }),
                isc.IButton.create({
                    ID: "stateButton",
                    autoFit: true,
                    title: "Recreate from State",
                    click: function () {
                        var state = countryList.getHiliteState();

                        countryList.destroy();
                        // don't include the hilite array in the create statement to demonstrate
                        // re-application from state via setHiliteState()
                        recreateListGrid(false);
                        countryList.setHiliteState(state);
                    }
                })
            ]
        })
    ]
});

// Create the initial ListGrid. See comment below for parameter description.
recreateListGrid(true);

// Function to create a new ListGrid. On the first call, passes "true" as the parameter, such
// that the hiliteArray above is included in the create() statement. Subsequent calls pass false,
// meaning no hiliteArray is included and a separate call to setHiliteState() is used instead.
function recreateListGrid(includeHilites) {
    layout.addMember(isc.ListGrid.create({
        ID: "countryList",
        width:"100%", height:"*",

        dataSource: ds,
        autoFetchData: true,
        canAddFormulaFields: true,
        canAddSummaryFields: true,
        fields:[
            {name:"countryCode", title:"Flag", width:60, type:"image", imageURLPrefix:"flags/24/",
                imageURLSuffix:".png"
            },
            {name:"countryName", title:"Country"},
            {name:"capital", title:"Capital"},
            {name:"population", title:"Population"},
            {name:"area", title:"Area"},
            {name:"gdp"}
        ],
        hilites: includeHilites ? hiliteArray : null
    }));

}

you'll see that the svg icon sits low and gets clipped on the bottom. When using formatCellValue it was centered and I could make it even bigger without clipping.

[Isomorphic]

Yes, that's strange - we'll take a look.

Note that doing this does not clip the image

replacementValue: isc.Canvas.imgHTML(spritePrefix+"#icon-forward;size:16,16;")

[Isomorphic]

hi Claudio,

On the first issue, we've fixed so that replacementValue: "" works as expected.

For the icon-clipping - when using the hilite.icon attribute, you'll need to set grid.hiliteIconSize to a size big enough for your SVG - the default is 12px - we've made hiliteIconSize scale with density in Shiva, so it'll increase in line with the "size" attribute in your src-string - again, given hiliteIconSize, a size-attribute on the src-string is probably then unnecessary, unless you want the graphic to be smaller than the hiliteIconSize.

Please retest with today's build, dated July 14, or a later one.

[claudiobosticco]

Now it's working, thank you very much!

[claudiobosticco]

Hello, is it expected that in hilites doesn't work to specify just the icon name, ie icon:"Cancel" ?

Also, now that all icons are scaling with densities, in my application I see that the default hilite icon size seems smaller than that of a Button for example, is it intended like this?

[Isomorphic]

hi Claudio,

We've fixed stockIcon-name mapping for the Hilite.icon property (and other valueIcons).

As for the hiliteIconSize, it's always defaulted to 12px, since it's displayed inline in cells - we'll have a look at increasing the default by a couple of px in Flat skins, and you can do it yourself in load_skin, if you have a custom skin.

Please retry with tomorrow's builds.

[claudiobosticco]

hi Claudio,

We've fixed stockIcon-name mapping for the Hilite.icon property (and other valueIcons).

SmartClient Version: SNAPSHOT_v13.1d_2024-09-25/AllModules Development Only (built 2024-09-25)

I see it's fixed, thank you very much