I have a simple WebGrid and I would like to add a thumbnail preview on mouse over row a given row of the webgrid. Usually HTML enabled tooltips are capable of doing that but in the WebGrid it allows only text.
I was thinking of creating a hidden WebDialog and passing coordinates of the cell to enable the Dialog which will dynamicaly fetch an image on mouse over however now I am running into issues where the Dialog is running out of bounds (not to mention code below doesnt even work in FireFox). Is there a more elegant solutions on displaying a simple HTML enabled popup which contain images and/or other readonline information.
dialog.set_windowState($IG.DialogWindowState.Normal);
dialog.set_left(cell.offsetLeft + 100);
dialog.set_top(cell.offsetTop + 50);
How do I do that?
Hello,
You will probably be better off using a Div since all you need is a container to dynamically display something. You may want to check if the Id of WebDialogWindow is correct (no added names because of a container element), but a regular div is probably the way to go on this one.
So in other words I have to write my own logic to position the div in relation to the cell? Because the code above even thought it works partially in IE still has the problem of not working in FireFox. I was hoping there was a way to some how invoke a "template" of the bands of the cell on rollover as opposed to a click. Is there w ay to do that?
By template do you mean the RowEditTemplate so that you can put say an image in there and show it when you mouseover? You can certainly show the RowEditTemplate with the javascript funtion editRow exposed by the row object. Call endEditRow to close the template. However, this is intended as an editting means only, it is not recommended here.
The MouseOver event should give you enough information to display a Div at a specified position. Once over the item that you want, you should be able to figure out its position and set the position on the div.