jqgrid change pointer to hand

Question

I want to change the pointer to hand when hovering over jqgrid's rows Is there an API for that?

Answer 1

This can be done more easily using the classes colModel property as below:

{ name: 'Email', index: 'Email', classes: 'pointer' }

From the wiki:

This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:'class1 class2' will set a class1 and class2 to every cell on that column. In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.

Answer 2

I just add this into my css file

#mygrid .jqgrow{
    cursor:pointer;
}

Answer 3

Use a custom formatter on any cell in the grid. For more info on these, see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter

Here's how I did it. I wanted the first column in my grid to appear like it is a clickable link (but really it triggers a custom jqgrid event, onCellSelect).

Snippet of my grid object:

colModel :[ 
{name:'ticket', index:'IMINDT', width:125, formatter: pointercursor}, 

pointercursor is a function name. The code for it is defined like this:

// Custom formatter for a cell in a jqgrid row. 
function pointercursor(cellvalue, options, rowObject)
{ 
var new_formatted_cellvalue = '<span class="pointer">' + cellvalue + '</span>'; 
return new_formatted_cellvalue; 
} 

My CSS class of "pointer" is:

.pointer { 
cursor: pointer; 
text-decoration: underline;
}    

That's it!