Making a single row of an aspxGridView flash

Question

Is there any way of making a single row within an AspxGridView flash different colours based on a value within a cell. E.g. continually changing the background colour of the row between red and green if a value in a cell is 5 so that it stands out on the page?

I have found one article that says it cant be done, but this was in 2008..

http://www.devexpress.com/Support/Center/p/Q135996.aspx

Answer 1

With a css class added to row as advised in the previous answer you can apply following script and style:

$(function () {
    setInterval(flashRow, 500);
});

function flashRow() {
    $("tr.blink").toggleClass("red");
}

Css style:

tr.blink
{
    background-color: Green;
}

tr.red
{
    background-color: Red;
}

Where blink - css style that you add to the row in the RowDataBound method.

See demo here

Answer 2

Take a look at the E3324 Code Central example.

You can use the described approach as a starting point.

Answer 3

        <dx:ASPxTimer ID="ASPxTimer2" runat="server" Interval="250" 
            ClientSideEvents-Tick="function(s,e)
            {
                var table = document.getElementById(gridUsers.name);
                for (i = 0; i <= table.rows.length; i++)
                {
                    var tableRow = document.getElementById(gridUsers.name + '_DXDataRow' + i);
                    if (tableRow.getAttribute('flicker') != '1')
                        return;

                    if (tableRow.style.backgroundColor == '' || tableRow.style.backgroundColor == 'white')
                        tableRow.style.backgroundColor = 'red';
                    else
                        tableRow.style.backgroundColor = 'white';

                }
            }"> 
        </dx:ASPxTimer>

Answer 4

you can do that on the event rowdatabount

check the current row is it with the value you want to highlight

then change the color of the current row by adding css attributes to it or assigning a cssclass