Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jack
185
MouseOver on cells of a particular column
posted

I am trying to set a mouseover client-side event in the server-side "InitializeRow" event.

I want to display an image when a certain column is mousedover.

Each row of course has a different image based on the data.

In a gridview for example I can do something such as:



string URL = ((DataRowView)(e.Row.DataItem)).Row["URL"];


e.Row.Cells[0].Attributes.Add("onmouseover", "return ShowImage(\'" + URL + "\');"));


e.Row.Cells[0].Attributes.Add("onmouseout", "return HideImage();");

How can I do something like this with UltraWebGrid?

 

Thanks

  • 1923
    Verified Answer
    posted

    Likely you can do that, but it would be far easier to move your logic entirely to the javascript...

    The grid has a ClientSideEvent called: MouseOver which provides a number of variables such as what the mouseOver item is...

    From this information, you can easily determine which column and cell the mouse is over...grab the value from the URL column (hide that column on the server side if necesary) and then pass the value to your ShowImage function

    Likewise, use the MouseOut with the same logic to call the HideImage function...

    Something like the following:

    function UltraWebGrid1_MouseOverHandler(gridName, id, objectType) {
        // 0 is a cell
        // -- make sure it is a cell
        if (objectType == 0) {
            // Are we over a cell
            var cell = igtbl_getCellById(id);
            if (!cell) return;
            var column = cell.Column;
            if (!column) return;
       
        // make sure we are over the column etc
            if (column.Key == 'MY_COLUMN') {
           
            // get the URL from another cell in this row
            // -- hide the column server side if necessary
                var row = cell.getRow();
                var imageUrl = row.getCellFromKey('URL').getValue();
           
            // pass the value to your function
            return ShowImage(imageUrl);
            }
        }

        return;
    }

    function UltraWebGrid1_MouseOutHandler(gridName, id, objectType) {
       
        // we need to test for the mouse out being the same
        // object otherwise you get terrible flickering as
        // you move the mouse...

        // 0 is a cell
        // -- make sure it is a cell
        if (objectType == 0) {
            // Are we over a cell
            var cell = igtbl_getCellById(id);
            if (!cell) return;
            var column = cell.Column;
            if (!column) return;

            if (column.Key == 'MY_COLUMN') {
                return HideImage();
            }
        }

        return;
    }