grid.stopHover not called

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.0d_2020-10-23/AllModules Development Only (built 2020-10-23)
and
SmartClient Version: v12.1p_2020-10-27/AllModules Development Only (built 2020-10-27)

Chrome 86.0.4240.111 (x86_64) on OSX

Hello, please try this test case:

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital", showIf:"false"},
        {name:"continent", title:"Continent"}
    ],
    canReorderFields: true,
    stopHover: function(){ isc.logEcho("stopHover"); }
})

You'll see that stopHover is not called when you leave a cell, or even the grid.

[Isomorphic]

Hovers aren't enabled at all - see canHover/showHover.

[claudiobosticco]

Of course you're right, thanks for the heads up.

I was using rowOver instead of rowHover so I was wondering why the stopHover wasn't called.

Actually I think that what I'm trying to do is best accomplished using rowOver and maybe mouseOut.

But I think I've found a problem with mouseOut.

I'm trying to use rollOverControls, but at a cell level, and I also want the over effect on the entire record.

This was almost working (run it in the replaceStyle sample):

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true, canDragSelect: true,
    sortField: 1,
    data: countryData,
    baseStyle:"cell",
    alternateFieldStyles:false,
    fields:[
        {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"},
        {name:"population", title:"Population", type:"number"}
    ],
    rowNumPrev:-1,
    rowOver: function(record, rowNum, colNum){
        if (this.rowNumPrev !== rowNum) {
            var temp = this.rowNumPrev
            this.rowNumPrev = rowNum;
            if (temp >= 0)  {
                this.refreshRow(temp);
            }
            this.refreshRow(rowNum);
        }
    },  
    mouseOut: function() {
        var temp = this.rowNumPrev;
        this.rowNumPrev = -1;
        this.refreshRow(temp);
        return this.Super("mouseOut", arguments)
    },
    useCellRollOvers:true,
    showRollOverCanvas:true,
    showRollUnderCanvas:false, // disable the rollUnderCanvas because we're not using it
    rollOverCanvasConstructor:isc.HLayout,
    rollOverCanvasProperties:{
        snapTo:"R", height:20, width:55,
        members:[
            {_constructor:"Button", title:"+",
             click:"isc.say('Expanded record:' + this.echo(this.parentElement.record))",
             height:20, width:27},
            {_constructor:"Button", title:"-",
             click:"isc.say('Collapsed record:' + this.echo(this.parentElement.record))",
             height:20, width:27}
        ]
    },
    getBaseStyle: function (record, rowNum, colNum) {
        if (this.rowNumPrev === rowNum) {
            return "myHighGridCell";
        } else {
            return this.baseStyle;
        }
    }

})

But it seems that mouseOut is called when hovering near and hover the rollOver Buttons.

So I'm not sure it's the right path...do you think that it's better to use rowHover and stopHover with canHover: true ?

[Isomorphic]

You're going to be getting bubbled mouseOuts from both the rollover Canvas and the ListGrid body, so you'd need to look at the target of the event to understand which kind you are getting.

It's not really clear what you're trying to achieve here, though. It looks like you want to change styling on rollover? But there's already a distinct rollover style - it's the one with the "Over" suffix. So you shouldn't need this additional mechanism.

[claudiobosticco]

I'm trying to have the rollover style for the entire row (while the rollover controls remains for single cell).