A Look at the GridView's New Sorting Styles in ASP.NET 4.0

<p> Like every Web control in the ASP.NET toolbox, the GridView includes a variety of style-related properties, including <code>CssClass</code>, <code>Font</code>, <code>ForeColor</code>, <code>BackColor</code>, <code>Width</code>, <code>Height</code>, and so on. The GridView also includes style properties that apply to certain classes of rows in the grid, such as <code>RowStyle</code>, <code>AlternatingRowStyle</code>, <code>HeaderStyle</code>, and <code>PagerStyle</code>. Each of these meta-style properties offer the standard style properties (<code>CssClass</code>, <code>Font</code>, etc.) as subproperties. </p><p> In ASP.NET 4.0, Microsoft added four new style properties to the GridView control: <code>SortedAscendingHeaderStyle</code>, <code>SortedAscendingCellStyle</code>, <code>SortedDescendingHeaderStyle</code>, and <code>SortedDescendingCellStyle</code>. These four properties are meta-style properties like <code>RowStyle</code> and <code>HeaderStyle</code>, but apply to <i>column</i> of cells rather than a row. These properties only apply when the GridView is sorted - if the data is sorted in ascending order then the <code>SortedAscendingHeaderStyle</code> and <code>SortedAscendingCellStyle</code> properties define the styles for the column the data is sorted by. The <code>SortedDescendingHeaderStyle</code> and <code>SortedDescendingCellStyle</code> properties apply to the sorted column when the results are sorted in descending order. </p><p> These four new properties make it easier to customize the appearance of the column by which the data is sorted. Using these properties along with a touch of <a Style Sheets (CSS)</a> it is possible to add up and down arrows to the sorted header to indicate whether the data is sorted in ascending or descending order. Likewise, these properties can be used to shade the sorted column or make its text bold. This article shows how to use these four new properties to style the sorted column. Read on to learn more! <br /><a More &gt;</a></p>

Read More...

---