A while back I posted a method to highlight rows on mouse over in Infragistics UltraWebGrid. Over the time turned out that it had several limitations the main being: if you enable additional styling for some elements of the grid, they’re not preserved after mouse-over/mouse-out events. For example if you set a SelectedRowStyleDefault property with a different background and then move mouse over a selected row – that style will be removed.

So, here’s a complete solution to work around that limitation:

First, add following style to your ASPX page:

<style type="text/css"> TR.over TD
    {background-color:lightcyan !important}
</style>

In this example, when user hovers mouse over a row, its background color would change to LighCyan. Substitute actual style with whatever is appropriate for your page. Note the !important attribute, without it Infragistics-generated style can overwrite yours.

Second, add client-side event handlers to your grid:

<ClientSideEvents MouseOverHandler="MouseOverHandler" MouseOutHandler="MouseOutHandler"></ClientSideEvents>

Third, add actual JavaScript event handlers:

function MouseOverHandler(gridName, id, objectType){
    if (objectType == 0) {
        igtbl_getCellById(id).getRow().Element.className += " over";
    }
}

function MouseOutHandler(gridName, id, objectType){
    if (objectType == 0) {
        igtbl_getCellById(id).getRow().Element.className = igtbl_getCellById(id).getRow().Element.className.replace(" over", "")    
    }
}

Note on Line 3 your custom class is added to whatever classed may already be there generated by Infragistics (and the !important attribute in class definition makes sure that your class will take priority). Similarly Line 9 of Mouse Out event removes just your class, leaving other classes (e.g. SelectetRowStyle) intact.