Custom mouse cursor on ListGrid cell

[lchen]

Hi,

I am trying to use a custom URL mouse cursor on some ListGrid cells. I am overriding the getCellCSSText method something like this:

getCellCSSText : function(record, rowNum, colNum) {
    if (colNum==2) return "cursor: URL('/path/to/cursor.cur');";
    if (colNum==3) return "cursor: move;";
}

In this example, using one of the standard CSS cursors always works as shown by the line

if (colNum==3) return "cursor: move;";

But the custom cursor line just above only works in IE10. In other browsers I've tested it gets ignored. (Some browsers prefer PNG over CUR cursor files, but it hasn't made a difference.) When inspecting the HTML DOM in Chrome or IE7, I see attributes on the TD like

path="" and cursor.cur=""

I've also tried providing a CSS class by overriding getBaseStyle and getCellStyle with the same result. The standard cursor works, but the custom URL cursor doesn't.

SmartClient versionNumber : "v9.0p_2013-11-03"

Thanks for any help you can provide.

[Isomorphic]

Try using double quotes, not single quotes, around the path.

[lchen]

I've tried it with single quotes, double quotes, and no quotes (all of which are valid CSS.) They all produce similar results. Where it works in IE10 but not in other browsers and it works for standard css cursors but not URL ones.

Today I've noticed that if I inspect the DOM before I try to put my mouse over that row in the ListGrid, then I can see the cursor CSS in the inline style element as it should be. But as soon as I mouse over the row, the style changes and the cursor inline element is lost.

[lchen]

I found a way to work around this problem by overriding the formatCellValue method of the ListGridField and wrapping the value in a <span>. It ends up looking like this:

formatCellValue : function(value, record, rowNum, colNum) {
	var cursor = "URL('/sales/images/zoom-in.cur');";
	if (isc.Browser.isWebKit) cursor = "URL('/sales/images/zoom-in.png'), zoom-in;";
	return '<span style="cursor: '+cursor+'">'+value+"</span>";					
}

The downside is that this approach only works when the mouse is over the text instead of the entire cell, but it works cross browser and doesn't get overridden by the existing row and cell hover style changes.

[JLivermore]

I think it's just a matter of CSS for changing cursors using a CellFormatter and wrapping the formatted value like in these examples:

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

It looks like you have a custom cursor you want to use, so maybe this is not a good example, as it only covers the standard cursors.