В статье Вставка в 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;">