jQuery Grid Plugin - jqGrid

setCell can be used set only title attribute on the corresponding <td> html element like <td title="My ToolTip">. So setting of html code on the place of html attributes will not work.

To implement the behavior which you need you have to bind all <td> elements (grid cells) with mouseover and mouseout functions which will be display the custom tooltips with images. You can do such binding inside of loadComplete event handle.

To make your implementation easy you can try to use some existing ToolTip plugin like http://bassistance.de/jquery-p.....n-tooltip/, http://plugins.learningjquery......l and so on.

Best regards
Oleg 

Hi all,

I used an extension called jquery.qtip plugin to do this in my application.
And it works well with Firefox and IE.
To see the plugin for dynamically loaded thumbnail tooltip, see this example here:

http://craigsworks.com/project...../thumbnail

You can apply the same way in Jqgrid.
To see an example, take the "JSON Data" sample in "Loading data section" section of jqgrid demo.
You want to show a thumbnail tooltip when the cursor is on "Inv No" column.
You define that "inv no" column content is the basename of an image called "<content>.jpg" file.
So, the content "1″ will show in a tooltip the "1.jpg image", "2″ shows in a tooltip the "2.jpg" image and so on…
To do this, on the server side, make a folder "images" containing all the image files 1.jpg to 13.jpg.

In jqgrid, to link  the column "Inv No" content with a thumbnail tooltip, insert the code (in jsonex.js) after ColModel, line 14 with the
"loadComplete" event handle like this:

        loadComplete : function() {
            $("#list2 tr").each(function(){
                    var col1= $(this).find("td:eq(0)"); // First column Inv No
                    var thumbnail_url="images/"+$(col1).html()+".jpg"; // Build image link
                    $(col1).removeAttr("title"); // Remove old title
                    var image='<img src="'+thumbnail_url+'" alt="Chargement imagette…" width=100 height=100 />';
                    $(col1).qtip({
                                 content: image,
                                 position: {
                                    corner: {
                                       tooltip: 'bottomMiddle',
                                       target: 'topMiddle'
                                    }
                                 },
                                 style: {
                                    tip: true, // Give it a speech bubble tip with automatic corner detection
                                    name: 'blue'
                                 }
                    });
                });

               }, // loadComplete

You have to download the jquery.qtip extension at:
http://bazaar.launchpad.net/~c...../1.0/files
Note: you need this special version because it fixes a bug in the ajax content download
(For more explanation: http://craigsworks.com/project.....ax-and-net )
Put the downloaded version in a folder js/jquery.qtip
                              
And declare the jquery.qtip extension in the head of (jqgrid.html) in the javascript section like this:
  <script src="js/jquery.qtip/jquery.qtip-1.0.min.js" type="text/javascript"></script>

To summerize, if your Jqgrid_demoXX is installed on your hard disk on <your path>, the new folders were here:

<your path>Jqgrid_demo36/images

<your path>Jqgrid_demo36/js/jquery.tip

Two files to change: <your path>Jqgrid_demo36/jqgrid.html

                                <your path>Jqgrid_demo36/jsonex.js

Hope this will help.

Dear all,

You gave an example that "inv no" column content is the basename of an image called "<content>.jpg" file.
So, the content "1″ will show in a tooltip the "1.jpg image", "2″ shows in a tooltip the "2.jpg" image and so on…

How if I want to have a thumbnail based on primary ID of a row?

for example a row with primary ID = xxx will show in a tooltip the "xxx.jpg image" and so on...

Best Regards,

Candra

Dear Phil,

Yoou are awesome. It works. It helped me so much.

Thank you very much.

Best Regards,

Candra