Ultrawebgrid: Highlight row on MouseOver with Selection enabled

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}

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.

4 replies on “Ultrawebgrid: Highlight row on MouseOver with Selection enabled”

  1. Hello – nice code but I am using RowAlternateStyleDefault and every other row refuses to take the new highlight color – ideas> Thanks.

  2. @Charlie , haven’t got a chance to try it with alternate styles, but technically should be no difference, highlighting style is applied to every row. Are you using !important attribute?

  3. Hi,
    Script not working because objectType never equal 0 always = 1.
    What not correct?

  4. @Vadim objectType is = 0 when the mouse is over a actual row with data, not column headers or footers. Make sure that’s the case when you check for this value. Or, remove that condition as a test and see what happens

Leave a Reply

Your email address will not be published. Required fields are marked *