Question

I’ve been working with the excellent jqGrid plugin, and it works great. Recently though, I was asked to implement some custom tooltips for the grid. Now, the documentation is very thorough, but it doesn’t address how (if it is at all possible) to accomplish this.

Here’s an example of what I’m looking for:

|col A | col B |…
| data | data |…
| (mouse hover) – data x

I’ve searched through the documentation and source for how/where to define tooltips but the closest I have gotten is custom tooltips for buttons in edit mode. I do have an event handler for the afterInsertRow event – through that I could get the rowId and such, but I’m not sure how to define HTML attributes in that event.

EDIT: to clarify, I’d like to set the title attribute on an individual cell to a particular piece of data (that I already have in the jqgrid model)

EDIT 2: I’ve tried inserting the following into the afterInsertRow event, with no joy, where aData is the JSON model, and ExpirationDate is the model name:

afterInsertRow: function(rowid, aData) {
                grid.setCell(rowid, 'ExpirationDate', '', { title: aData.ExpiredBy });

the following code in the same event handler DOES work, however:

grid.setCell(rowid, 'ExpirationDate', '', { color: 'red' });

EDIT 3: working with redsquare’s excellent suggesstions, I’ve determined that the title attribute is being set sometime after the afterInsertRow event: I’ve stepped through and determined that it is being correctly set by either method outlined in comments, but unfortunately, I get a source code is not available for this location when trying to step further, meaning I can’t see exactly where the title is being changed.

EDIT 4: (thanks for your patience and helping me work through this!) again taking redsquare’s comment about trying the loadComplete event, I was able to successfully get and modify the cell’s attributes, but the title attribute stubbornly remains the same:

loadComplete: function() {
                var ids = grid.getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    grid.setCell(ids[i], 'ExpirationDate', '', { title: 'FOO!'});
                }

FINAL EDIT: please see my answer below – I was able to find the root cause of the issue, with help from redsquare.

Any help would be appreciated

Answer 1

Ok, I found the issue after doing some close inspection of the properties being set. It turns out that I, knuckle-head that I am, didn’t read the documentation for the grid.setCell(…) method closely enough:

This method can change the content of
particular cell and can set class or
style properties. Where: •rowid: the
id of the row,

•colname: the name of the column (this
parameter can be a number beginning
from 0)

•data: the content that can be put
into the cell. If empty string the
content will not be changed

•class: if class is string then we add
a class to the cell using addClass; if
class is an array we set the new css
properties via css

•properties: sets the attribute
properies of the cell

Example :

setCell(“10”, “tax”, ”,
{color:’red’,’text-align’:’center’}’,{title:’Sales
Tax’})

will set the contents of the tax field
in row 10 to red and centered and
change the title to ‘Sales Tax’.

In short, the arguments I was passing into the method were setting css properties (the 4th arg) instead of the attributes (the 5th arg). The result was that two title attributes were added, with one being improperly formatted. The below shows the correct invocation of the method to accomplish what I was trying to do:

grid.setCell(rowid, 'ExpirationDate', '', '',{ title: aData.ExpiredBy});

Thanks again to redsquare for his/her help in solving this!