Мой вольный перевод одной статьи, рассказывающей об одной мелкой, но приятной фиче контрола GridView ASP.NET 4
Также как и любой контрол ASP.NET, GridView включает различные стилевые свойства,содержащие CssClass, Font, ForeColor, BackColor, Width, Height, и т.д. GridView так же включает стилевые свойства, применяемые к классам строк таблицы, такие как:RowStyle, AlternatingRowStyle, HeaderStyle, и PagerStyle. Каждое из этих свойств предлагает стандартные стилевые свойства (CssClass, Font, и т.п.) как подсвойства.
В ASP.NET 4.0, Microsoft добавила четыре новых свойства вGridView:SortedAscendingHeaderStyle, SortedAscendingCellStyle,SortedDescendingHeaderStyle, иSortedDescendingCellStyle. Эти четыре свойства похожи наRowStyle и HeaderStyle, но применяются к колонкам или ячейкам, а не строкам. Эти свойства применяются только еслиGridView отсортирован – если данные отсортированы по возрастанию то свойстваSortedAscendingHeaderStyle и SortedAscendingCellStyle определяют стили для колонки, по которой происходит сортировка. СвойстваSortedDescendingHeaderStyle иSortedDescendingCellStyle применяются к столбцу сортировки когда происходит сортировка по убыванию.
Эти четыре новых свойства упрощают настройку отображения колонок, по которым происходит сортировка. Используя эти свойства с CSS возможно добавлять стрелки вверх и вниз в заголовок сортируемого столбца для указания, когда данные отсортированы по возрастанию или убыванию. Аналогично, эти свойства могут быть использованы для задания оттенка сортируемой колонке или сделать ее текст полужирным. Эта статья показывает, как использовать новые свойства для стилизации отсортированной колонки.
По умолчанию, GridView отображает строку заголовков, отображающих названия каждого поля (столбца) как текст. Для использованиясортировки,установите свойство AllowSorting в true. Оно сообщает GridView, чтобы тот отображал строку заголовков, используя LinkButton контролы, при клике на которые, происходит postback и инициализируется процесс сортировки. ЕслиGridView натравлен на data source контрол, то (обычно) на этом все и заканчивается! Вы не напишите ни строчки кода по управлению логикой сортировки, т.к. она управляется автоматически (если GridViewнатравлен наdata source контрол). (если вы программно биндите данные вGridView вместо использования data source контрола, то вы должны создать обработчик события Sorting для сортировки GridView, который извлекает данные отсортированными в том порядке, который запросил пользователь.)
Конечный пользователь, кликнувший одну из ссылок в строке заголовков, сортирует данные таблицы по возрастанию данных в выбранной колонке. Кликнув эту ссылку снова – данные сортируются по убыванию. К несчастью, GridView не отображает направление сортировки по умолчанию. ДоASP.NET4.0, нужно было написать немного кода. В предыдущей статье автор показывает как это сделать вручную Extending the GridView to IncludeSortArrows.
Итак, наконец-то практика:
GridView в ASP.NET 4.включает четыре новых свойста, позволяющих разработчикам страниц определять настройки колонок, по которым может быть произведена сортировка:
- SortedAscendingHeaderStyle – когда данные GridView отсортированы по возрастанию, это свойство определяет стиль для ячейки заголовкасортируемой колонки
- SortedAscendingCellStyle – когда данные GridView отсортированы по возрастанию, это свойство определяет стиль для ячеек данных(отображающих данные) сортируемой колонки.
- SortedDescendingHeaderStyle - когда данные GridView отсортированы по убыванию, это свойство определяет стиль для ячейки заголовкасортируемой колонки
- SortedDescendingCellStyle - когда данные GridView отсортированы по убыванию, это свойство определяет стиль для ячеек данных(отображающих данные) сортируемой колонки.
Эти свойства делают невероятно простым определение тонкой (или резкой) визуальной разницы между обычными и сортируемой колонками. Например, для выделения данных строк в сортируемой колонке (когда есть сортировка по возрастанию или убыванию), простая установка у свойствSortedAscendingCellStyle и SortedDescendingCellStyle свойства BackColors в значение Yellow выглядит примерно так:
...
SortedAscendingCellStyle-BackColor="Yellow"
SortedDescendingCellStyle-BackColor="Yellow">
...
Следующий скрин показывает GridView отображающий информацию о чем-то, отсортированных по колонке Category. Данные строк в колонкеCategoryвыделены желтым цветом.
Заюзав немного CSS и свойства SortedAscendingHeaderStyle, иSortedDescendingHeaderStyle получаем возможность добавить стрелки к сортируемой колонке, для указания когда данные отсортированы по убыванию или возрастанию. Сначала, нам нужны стрелки вверх и вниз. В демо есть этикартинки, также вы можете найти их в сети. Далее, нужно создать два CSSкласса, для отображения заголовков при возрастающей и убывающей сортировках, такие как sortasc-header и sortdesc-header. Эти классы должны указывать URL на изображения стрелок вверх и вниз. Также, нужно включитьCSS правило, для добавления паддинга справа в ссылки заголовков сортируемых колонок, чтобы стрелки вверх и вниз не смешивались с текстом ячеек.
Например:
.sortasc-header A
{
background:url(URL to up arrow image) right center no-repeat;
}
.sortdesc-header A
{
background:url( URL to down arrow image) right center no-repeat;
}
TH A
{
padding-right: 20px;
}
CSS готов, остается настроить свойства GridView – SortedAscendingHeaderStyle иSortedDescendingHeaderStyle, для использования sortasc-header и sortdesc-header CSSклассов, соответственно:
...
SortedAscendingHeaderStyle-CssClass="sortasc-header"
SortedDescendingHeaderStyle-CssClass="sortdesc-header"
SortedAscendingCellStyle-BackColor="Yellow"
SortedDescendingCellStyle-BackColor="Yellow">
...
Ну о собственно, результат не заставляет нес долго ждать:
Оригинал статьи по адресу: http://www.4guysfromrolla.com/articles/020310-1.aspx#postadlink
