Cell Rollover Icons

[mstickel]

Using SmartClient 8.2

A quick question: I want to show an icon in certain cells when the row containing those cells is rolled over. (The icon will be a pencil, indicating that that cell is editable, sort of like how JIRA does it). Is there an easy way to do this? I see that there is a way to place a widget at the end of the row on rollover:

http://www.smartclient.com/docs/8.2/a/system/reference/SmartClient_Explorer.html#_Grids_Appearance_RollOver.Controls

And I see that there is a setting 'useCellLevelRollovers' to apply this to each cell. However, I still want the whole row to be highlighted when I roll over it. Setting this setting to true switches to per-cell rollover.

Is there a recommended way to go about doing this?

[mstickel]

Here's my solution to the problem, which ended up being fairly easy once I figured out the proper way to go about doing it.

I overrode the 'getBaseStyle' function in the ListGrid and modified the style class name of the column:

		getBaseStyle: function (record, rowNum, colNum) {
			var style = this.Super("getBaseStyle", record, rowNum, colNum);
			if (colNum == 3) {
				style += "-edit";
			}
			return style;
		}

Then, in my css, I defined the following:

.item,
.itemDark {
	background-color: #FFFFFF;
}

.itemOver,
.itemOverDark {
	background-color: #F0F0FF;
}

.item-edit,
.item-editDark {
	background-color: #FFFFFF;
}

.item-editOver,
.item-editOverDark {
	background-color: #F0F0FF;
	background-image: url("../images/icn_pencil_edit.png");
	background-repeat: no-repeat;
	background-position: right;
}

The effect of this is that when I mouse over a row in my ListGrid, the whole row is highlighted, and the pencil icon shows up on the right side of the cell in the fourth column, regardless of which column I mouse over.