Custom data tooltips in jqGrid 3.4

Question

Hey all,

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

What info would the tooltip be displaying? Lets assume the tooltip info is maybe inside the first cell (hidden) in the row. You could target any row inside the grid and by using the .live method you have any new rows covered.

$('#gridId>tbody>tr').live('mouseover', showTip)
                     .live('mouseoff', hideTip);

function showTip(){

   var $row = $(this);
   //get tooltip from first hidden cell
   var tipText = $row.children(':eq(0)').text()
   //append tipText to tooltip and show

}


function hideTip(){

    //hide tip

}

Answer 2

ok after clarity you could try this. It assumes the cell you want to change is the fourth in each row and sets the title of the cell to the current text in that cell. Change as needed.

N.B The grid actually breaks standards by using integer id's for the rows. However the following should still work.

$("#gridId").jqGrid({
     ...,
     afterInsertRow : setCellTitle,
     ...
});



function setCellTitle(rowid){
  //get fourth cell in row
  var $cell = $(rowid).children(':eq(3)');
  //set title attribute
  $cell.attr('title', $cell.text());

}

Answer 3

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!