ListGrid hover component is going off the screen

[argopm]

Hello,

We have implemented custom Component based Hover in TreeGrid and custom component is a VLayout with single member as HTMFLow. Refer images at URL. My problem is that when mouse is moved at bottom of screen Hover goes off the screen and does not adjust it's position to go above the row so that it is always shown.

Hover Normal - https://dl.dropboxusercontent.com/u/...ver-normal.png
Hover cutoff - https://dl.dropboxusercontent.com/u/...er-cut-off.png

it's happening with all Browsers and SmartClient (client side only) version is - Version v9.0p_2013-10-18/LGPL Deployment (2013-10-18)

hoverAlign:"center", //have tried with other values too
    //hoverVAlign:"top",
    canHover: true,
    showHover: true,
    hoverWidth:150,
    // allow hoverComponents
    showHoverComponents: true,
    // override the builtin getCellHoverComponent() method so we can return a component of our
    // choosing - in this case, create a DetailViewer, populate it with the entire record from
    // the server and return it for display
    getCellHoverComponent : function (record, rowNum, colNum) {
  
        if(showHoverCustom == false){
            if(record !=null && record !='undefined')
                return record.label +" - Right click for more options";
            else
                return "Right click for more options";
        
        }
        if(!isNullOrEmpty(record) && record.isFolder)
            return record.label +" - Right click for more options";//record.label;
        
        if(hoverLatestRecord!=null&&record.stationId!=hoverLatestRecord.station)
        {
            hoverLatestRecord=null;
            fetchStationHoverData=true;
        }

        allAgentViewLoadSpeedTestDataForHover(record);
        //wfslog("top of this row is "+this.getRowTop(rowNum));
        var component =  stationHoverWindow(record,hoverLatestRecord);//station-hover-windows.js
        //component.top = this.getRowTop(rowNum);
        this.cellHoverComponent = component;
        return this.cellHoverComponent;
        }
    
});

stationHoverWindow function create a vlayout with HTMLFlow and htmlflow is just custom html to create above Hover.

Mahesh.

[argopm]

Can anybody please help?

[Isomorphic]

Well, your method stationHoverWindow(), which you have not shown, obviously does not work.

We don't know what implementation approach you took in that method, but the method Canvas.placeNear() can be used to place something near a point while keeping it onscreen.

[argopm]

Thanks for the reply and possible hint to use Canvas.placeNeaer(). Below is the complete code that generates Hover component -

function stationHoverWindow(record,hoverRecord)
{
    isc.HTMLFlow.create({
        ID:"stationHoverHtmlFlow",
        width:360,
        contents:getRowTempleteForStationHoverWindow(record,hoverRecord)
    });


    var vl=isc.VLayout.create ({
        ID:"stationHoverLayout",
        height:"98%",
        width:"100%",
        autoDraw:false,
        overflow:"visible",
        bodyOverflow:"visible",
        members:[stationHoverHtmlFlow]

    });

     return vl;
                
}


function getRowTempleteForStationHoverWindow(record,hoverRecord)
{

        
    var isActive = record.stationActive;
    var color = getRGBColorCodesForAgentsName(record.deviceStatus,isActive);
    var stationIcon=getStationIcon(record);
    
    var isWirelessScanIcon='wifi-scanner-na.png';
    if(record.wirelessScanner)
        isWirelessScanIcon='wifi-scanner.png';

    var isWirelessCaptureIcon='packet-capture-na.png';
    if(record.wirelessCapture)
        isWirelessCaptureIcon='packet-capture.png';


    var isSpeedTestIcon='speed-tester-na.png';
    if(record.speedTest)
        isSpeedTestIcon='speed-tester.png';

    var isGPSCoordinatesIcon='GPS-na.png';
    if(record.devicePresentOnMap)
        isGPSCoordinatesIcon='GPS.png';

    var signal='N/A';
    var txRate='N/A';
    var ping='N/A';
    var speedDown='N/A';
    var speedUp='N/A';
    var pingTime='N/A';
    if(hoverRecord!=null)
    {
        //console.log('signal'+hoverRecord.signal);
        signal=hoverRecord.signal;
        txRate=hoverRecord.txRate;
        ping=hoverRecord.ping;
        pingTime=hoverRecord.pingTime;
        if(hoverRecord.download_speed!=0.0)
        speedDown=hoverRecord.download_speed+" Mbps";
        if(hoverRecord.uploadSpeed!=0.0)
        speedUp=hoverRecord.uploadSpeed+" Mbps";

    }

    

    var template="<div class='addClearBackgroundToDiv' style='border:1px solid #808080;height:100%;width:100%;background-color:white;'>";
        
        
        template+="<table style='width:355px;border:0px solid red;margin:8px 8px 8px 0px;'><tr>";
        template+="<td ><div style='width:50px;text-align:right;'><img src='resource/images/"+stationIcon+"' height='25' width='25'></div></td>";
        template+="<td style='width:75px;'><div style='color:"+color+";font-weight:bold;margin-left:10px;vertical-align:center;width:90px;word-wrap:break-word;'>"+record.label+"</div></td>";
        template+="<td></td>";
        template+="<td style='width:90px;'><div style='vertical-align:center;'>";
        template+="<img src='resource/images/"+isWirelessScanIcon+"' height='20' width='20'>";
        template+="<img src='resource/images/"+isSpeedTestIcon+"' style='margin-left:5px;' height='20' width='20'>";
        if(showPacketCapture=='true'){                        
            template+="<img src='resource/images/"+isWirelessCaptureIcon+"' style='margin-left:5px;' height='20' width='20'>";
        }
        template+="<img src='resource/images/"+isGPSCoordinatesIcon+"' style='margin-left:5px;' height='20' width='20'>";
        template+="</div></td>";
        template+="</tr>";
        template+="<tr style='height:10px;'></tr>";
        template+="<tr>";
        template+="<td style='width:50px;text-align:right;'><div style='font-weight:bold;'>SSID </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+record.connectedSSID+"</div></td>";
        template+="<td style='width:75px;'></td>";
        template+="<td style='width:90px;'></td>";
        template+="</tr>";
        template+="<tr>";
        template+="<td style='width:50px;text-align:right;border:0px solid yellow;'><div style='font-weight:bold;'>Channel </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+record.connectedChannel+"</div></td>";
        template+="<td style='width:75px;text-align:right;'><div style='font-weight:bold;'>Last Seen </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+record.lastSeen+"</div></td>";
        template+="</tr>";
        template+="<tr>";
        template+="<td style='width:50px;text-align:right;'><div style='font-weight:bold;'>BSSID </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+record.connectedBSSID+"</div></td>";
        template+="<td style='width:75px;text-align:right;'><div style='font-weight:bold;'>First Seen </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+record.firstSeen+"</div></td>";
        template+="</tr>";
        template+="<tr style='height:15px;'></tr>";
        template+="<tr>";
        template+="<td></td>";
        template+="<td style='width:75px;text-align:left; text-decoration:underline;'><div style='margin-left:-30px;font-weight:bold;padding:5px;' >Local Area Network</div></td>";
        template+="<td></td>";
        template+="<td style='width:50px;text-align:left;text-decoration: underline;'><div style='margin-left:-35px;font-weight:bold;'>Wide Area Network</div></td>";
        template+="</tr>";
        template+="<tr>";
        template+="<td style='width:50px;text-align:right'><div style='font-weight:bold;'>Signal </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+signal+"</div></td>";
        template+="<td style='width:75px;text-align:right;'><div style='font-weight:bold;'>Speed Down </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+speedDown+"</div></td>";
        template+="</tr>";
        template+="<tr>";
        template+="<td style='width:50px;text-align:right;'><div style='font-weight:bold;'>Tx Rate </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+txRate+"</div></td>";
        template+="<td style='width:75px;text-align:right;'><div style='font-weight:bold;'>Speed Up </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+speedUp+"</div></td>";
        template+="</tr>";
        template+="<tr>";
        template+="<td style='width:50px;text-align:right;'><div style='font-weight:bold;'>Ping </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+ping+"</div></td>";
        template+="<td style='width:75px;text-align:right;'><div style='font-weight:bold;'>Ping Time </div></td>";
        template+="<td style='width:75px;'><div style='margin-left:10px;'>"+pingTime+"</div></td>";
        template+="</tr>";
        template+="</table>";


        
        template+="</div>";

        return template;
}



function getStationIcon(record)
{
    var isActive = record.stationActive;
    var status=record.deviceStatus;
    var stationType=record.stationType;
    if(stationType=='Win7'||stationType=='Win8'||stationType=='XP'||stationType=='Vista')
        stationType='Windows';

    if(status=='online'&&isActive=='yes')
    {
        return stationType+"-OnA.png";
    }
    if(status=='online'&&isActive=='no')
    {
        return stationType+"-OnI.png";
    }
    if(status=='offline'&&isActive=='yes')
    {
        return stationType+"-OffA.png";
    }
    if(status=='offline'&&isActive=='no')
    {
        return stationType+"-OffI.png";
    }


}

[argopm]

Any suggestion based on above code?

[Isomorphic]

Why would there need to be a new suggestion? You are not using placeNear() and you have no code of your own to do anything similar. So just to reiterate: either use placeNear() or implement a similar behavior yourself.

[argopm]

As per my understanding SmartClient should automatically make use of placeNear() to avoid such behaviour. I have seen same issue with SmartClient explorer (http://www.smartclient.com/smartclie...l#hoverDetails).

[Isomorphic]

Your code and the sample code have the same problem: the component is automatically placed onscreen by placeNear(), but then the component changes size at some later time (due to content loading) causing it to stick off the screen. That's why you need a call to placeNear() after your content has loaded.

Note: as the docs for getCellHoverComponent() tell you, the default is to auto-destroy hover components, so you should check the canvas.destroyed flag before attempting to call placeNear() on your hover component.

[Isomorphic]

Note that we've fixed this issue as noted in the Feature Explorer, for builds of 11.0+ dated February 17 and later - hover components will now be automatically moved back on-screen following a resize, in normal circumstances. See the updated docs for ListGrid.getCellHoverComponent() and Canvas.adjustForContent() for specifics.

[argopm]

Sounds good, Thanks. I will try to implement it and would let you know.