Detailed description of four sorting styles of ASP. NET4 GridView, asp. net4gridview

Detailed description of four sorting styles of ASP. NET4 GridView, asp. net4gridview

Similar to other Web controls of ASP. NET, The Gridview control has many different CSS style attribute settings, including CssClass, Font, ForeColor, BackColor, BackColor, Width, and Height. Gridview also includes some style attributes applied on the rows of the table, such as RowStyle, AlternatingRowStyle, HeaderStyle, and PagerStyle. They all provide basic attribute settings such as CssClass and Font.

In the Gridview control of ASP. NET 4.0, four new style attributes are added: SortedAscendingHeaderStlye, SortedAscendingCellStlye, SortedDescendingHeaderStyle and SortedDescendingCellStyle. These four attributes are a bit like the previous RowStyle and HeaderStyle attributes, but they are applied to the columns of the gridview, rather than rows. These attributes work only when the GridView needs to be sorted. If the gridview needs to be sorted in ascending order, the SortedAscendingHeaderStyle and SortedAscendingCellStyle attributes define the Style of data sorting. If the gridview is sorted in descending order, the SortedDescendingHeaderStyle and SortedDescendingCellStyle attributes define the style during sorting.

These four new features make it easier to customize the column appearance style during data sorting. If these attributes are used together with CSS Styles, you can add the up arrow and the down arrow when sorting the table to indicate whether the current order is in ascending or descending order. This article describes how to use the styles of these four new attributes.

Sorting review in the GridView

In the Gridview, the column headers of each column are displayed in text by default. To sort columns, you must first set the AllowSorting attribute of the Gridview. This will display the columns to be sorted by link. When you click it, the sorting event will be triggered. If the GridView is bound to the data source control, you do not have to write any code to process the sorting. Everything is done automatically.

From the user's point of view, clicking the sort column in the row of the title will sort the column data in ascending order, and clicking again will sort the data in descending order. Unfortunately, in the past, the GridView in asp.net did not provide any method for display to users. The current sorting column is in ascending or descending order. Before asp.net 4.0, the only method to be implemented is to write some code. Use the Gridview to add the SortAscendingStyle and SortDescendingStyle attributes, and use CSS to simulate two up and down arrows.

In ASP. NET 4.0, this function has been built in.

New sorting-related style attributes

The four sorting attributes added in ASP. NET 4.0 are as follows:

• SortedAscendingHeaderStyle when the Gridview is in ascending order, the Header style of the sorting column is defined.

• SortedAscendingCellStyle defines the style of the data column to be sorted when the Gridview is in ascending order.

• SortedDescendingHeaderStyle: When the Gridview is sorted in descending order, the Header style of the sorting column is defined.

• SortedDescendingCellStyle: When the Gridview is sorted in descending order, the style of the data column to be sorted is defined.

With these attributes, you only need to set them for sorting. For example, in the following example, set the SortedAscendingCellStyle attribute and the background color of the sub-style SortedDescendingCellStyle to yellow. The effect is displayed immediately:

<Asp: GridView ID = "..." runat = "server" AutoGenerateColumns = "False" AllowSorting = "true"
...
SortedAscendingCellStyle-BackColor = "Yellow"
SortedDescendingCellStyle-BackColor = "Yellow">
...
</Asp: GridView>
 
Of course, for the convenience of observation, you can set SortedAscendingCellStyle-BackColor and SortedDescendingCellStyle-BackColor to different colors to see a clearer effect.
Add an arrow to the sort column

When CSS is used in combination with SortedAscendingHeaderStyle and SortedDescendingHeaderStyle, it is easy to add up and down arrows to the sorting column to indicate the sorting status. First, you need to find some pictures with the up arrow or down arrow. This picture is available in the Code download in this article. The receiver needs to create two CSS classes, such as sortasc-header and sortdesc-header in the following section. In these two CSS classes, you need to specify the position of the up and down arrow image, at the same time, we need to define an appropriate interval on the right side of the sorting column so that the up and down arrows are not overwritten by the text in the header of the sorting column. As follows:

. Sortasc-header
{
Background: url (URL to up arrow image) right center no-repeat;
}

. Sortdesc-header
{
Background: url (URL to down arrow image) right center no-repeat;
}

TH
{
Padding-right: 20px;
}
Then we can use these styles:

<Asp: GridView ID = "..." runat = "server" AutoGenerateColumns = "False" AllowSorting = "true"
...
SortedAscendingHeaderStyle-CssClass = "sortasc-header"
SortedDescendingHeaderStyle-CssClass = "sortdesc-header"
SortedAscendingCellStyle-BackColor = "Yellow"
SortedDescendingCellStyle-BackColor = "Yellow">
...
</Asp: GridView>

There are some development insights in my spare time, and you are also welcome to make a brick.

Aspnet c # click the title bar of the gridview to perform positive and negative sorting.

Do not insert it in grid_Sorting and put it in the BindDataGrid method. dataservice. ProcessProjectsQuery (vInfo, out dsQuery); try this sentence later.
------------
The landlord does not use the DataSource Control for sorting, but needs to write code.
DataView is required for sorting. Example:
DataView dv = new DataView (dsQuery. Tables [0]);
Dv. Sort = ViewState ["sortExp"]. ToString () + "" + ViewState ["sortDir"]. ToString ();
Grid. DataSource = dv;
Grid. DataBind ();

Click the page button in aspnet to re-order the GridView

This function is called when you re-bind data by writing a function and click the button.

2. Button write click event this event is used to specify a sorting field for the GridView similar to clicking a table

Sort headers by hyperlink