Hello,
I'm looking for the best way to apply a row style onmouseover and then replace the alternate row styles onmouseout. In an asp.net Gridview I was able to add onmouse attributes at databinding with the row colors set programatically but I don't seem to be able to do that with the webgrid.
I've got some javascript that extracts the row index from the ID but I wonder if there is a better way?
Thanks in advance!
Current Javascript code:
function UltraWebGridRow_Over(gridName, Id, objectType) { try { var Row = igtbl_getRowById(Id); var RowIndex = Row.Id.replace(gridName + "_r_",""); setRowColor(Row, "in", RowIndex); } catch (e) { } } function UltraWebGridRow_Out(gridName, Id, objectType) { try { var Row = igtbl_getRowById(Id); var RowIndex = Row.Id.replace(gridName + "_r_",""); setRowColor(Row, "out", RowIndex); } catch (e) { } } function setRowColor(Row, Direction, RowIndex) { var sColor = "#ffffcc" if (Direction == "out") { if (RowIndex % 2 == 0) { sColor = "white"; } else { sColor="#EFF3FB"; } } var cells = Row.getCellElements(); for (var i = 0; i < cells.length; i++) { cells[i].style.backgroundColor = sColor; } }
Joshua_dev said:Vince did mention that we could single out the header row and apply a specific style...Will it be possible to identify sortable columns and apply a style to the headers of those columns alone???
To identify a sortable column, get a JavaScript reference to the appropriate Column object, and look at the HeaderClickAction property of that column. A value of 2 means SortSingle, while a value of 3 means SortMulti, both of which imply a sortable column. The other values (0 for None and 1 for Select) mean that the column is not sortable.
hi there,
I use style and hoverstyle attributes to switch styles between normal and hover states by assigning cssclasses to each of them.
Vince did mention that we could single out the header row and apply a specific style...Will it be possible to identify sortable columns and apply a style to the headers of those columns alone???
Thank you!
This is the general approach I would use. You might be able to apply CSS styles instead of specific, hard-coded background colors, but the general approach remains the same.
As a suggested refinement, you can get the index of the row off our client-side Row object, rather than parsing the index out of the row's ID. You can also check to make sure that you have a cell, rather than a column header. Below is a modification of your MouseOver event handler; similar changes can also be made to the MouseOut event handler:
function UltraWebGridRow_Over(gridName, Id, objectType) { if (objectType == 0) // cell { try { var Row = igtbl_getRowById(Id); //var RowIndex = Row.Id.replace(gridName + "_r_",""); var RowIndex = Row.getIndex(); setRowColor(Row, "in", RowIndex); } catch (e) { } } }