В статье Вставка в GridView промежуточных строк средствами c# мы использовали событие GridView.RowDataBound для внесения своих коррективов в процесс создания и заполнения контрола GridView.

Сегодня я хочу показать еще один тип ситуаций, когда перехват события RowDataBound может оказаться полезным.

Вопрос заключается в том, что бы заставить отрисованный html-разметкой на клиенте GridView, а точнее строки полученной таблицы, выполнять "слежку" за курсором.

То есть, при наведении курсора мышки на любую строку, последняя окрашивалась бы в требуемый цвет, а при ухода со строки - возвращалась бы к исходному виду. Я думаю, Вы поняли очем речь, что-то вроде табличного Roll-Over.

Понятно, что серверно это дело не решить, поскольку перегружать страницу для всего лишь выделения требуемой строки - это полный изврат!

Поэтому вопрос этот ложится полностью на клиентский браузер.

И здесь два возможных решения: или использовать JavaScript, или обычные стили.

Я выбираю стили, поскольку проще, да и будет работать даже при отключенных клиентских сценариях:

protected void GridViewContent_RowDataBound(object sender,
        GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes["onmouseover"] = 
            "this.style.backgroundColor='Red'";
        
        if(e.Row.RowIndex%2 == 0)
            e.Row.Attributes["onmouseout"] = 
            "this.style.backgroundColor='#EEE'";
        else
            e.Row.Attributes["onmouseout"] = 
            "this.style.backgroundColor='#DDD'";
    }
}

Метод прост.

С помощью списка клиентских аттрибутов Row.Attributes мы добавляем в выходную разметку поведенческие стили для каждой строки выходной таблицы свойства onmouseover и onmouseout.

Вот, что мы имеем теперь на клиенте для отдельной строки когда-то бывшего серверного GridView:

<tr onmouseover="this.style.backgroundColor='#FFE4B5'" 
onmouseout="this.style.backgroundColor='#EEEEEE'" 
style="color:Black;background-color:#EEEEEE;">