Data Grid - Image Hovering Events

This example demonstrates how to capture the onBeforeHover and onAfterHover events for the image hovering feature. To capture these events, you need to place the following event shell in your dax_loginSuccess function.

    myGrid.onBeforeHover = function(athis){
        // Do something here
    }

    myGrid.onAfterHover = function(athis){
        // Do something here
    }

The input parameter is the object reference to the internal image object. It can be used to obtain many information regarding the image and current grid row.

In this example, the onBeforeHover event captures the information about the hovered image. The information will then be applied to the <IMG id="mypreview">.

    myGrid.onBeforeHover = function(athis){
        var imgcontainer = document.getElementById('mypreview');
        imgcontainer.src = athis.aContent;
        imgcontainer.width = athis.parent.picWidth;
        imgcontainer.height = athis.parent.picHeight;
    }

The onAfterHover is used to assign a blank image to the image source in <IMG id="mypreview">.

    myGrid.onAfterHover = function(athis){
        var imgcontainer = document.getElementById('mypreview');
        imgcontainer.src = 'blank.png';
    }