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?

Lalia

Answer 1

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!

Goldschmidt

I'm not a huge fan of adding a span as it actually modifies the behavior of onCellSelect. If you click on the 'span' content it will NOT fire the onCellSelect event. Refer to Woggles answer as a possible work-around. – Twinflower

Answer 2

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.

Romalda

Answer 3

I just add this into my css file

#mygrid .jqgrow{
    cursor:pointer;
}

Tenancy

Answer 4

in css file put this:

  .ui-jqgrid .ui-jqgrid-btable { cursor : pointer; }

Motherofpearl

Answer 5

It seems to me that you have not a jqgrid question, but pure CSS or javascript question. Look at How to get cursor to change before mouse moves when changing the cursor style dynamically for example. It shows how can one change cursor style of a html element. See also in http://www.quirksmode.org/css/cursor.html, that 'hand' is supported not in all browsers.

Demb