Walkthrough: Simple Sorting for the GridView Web Server Control
You can use the ASP.NET GridView control's built-in sort functionality to add single-column sorting to your data without requiring any coding.
During this walkthrough, you will learn how to:
- Enable the built-in sort functionality of the GridView control.
Prerequisites
In order to complete this walkthrough, you will need:
Microsoft Visual Web Developer (Visual Studio).
Access to the SQL Server Northwind database. For information about downloading and installing the SQL Server sample Northwind database, see Installing Sample Databases on the Microsoft SQL Server Web site.
Note
If you need information about how to log on to the computer running SQL Server, contact the server administrator.
A user name and password for a SQL Server account that has access to the Northwind database.
Microsoft Data Access Components (MDAC) version 2.7 or later.
If you are using Microsoft Windows XP or Windows Server 2003, you already have MDAC 2.7. However, if you are using Microsoft Windows 2000, you might need to upgrade the MDAC already installed on your computer. For more information, see "Microsoft Data Access Components (MDAC) Installation" in the MSDN Library.
Creating the Web Site and Page
Create a new Web site by following these steps.
To create a file system Web site
Open Visual Web Developer.
On the File menu, click New, and then click Web Site. If you are using Visual Web Developer Express, on the File menu, click New Web Site.
The New Web Site dialog box is displayed.
Under Visual Studio installed templates, select ASP.NET Web Site.
In the Location box, select File System, and enter the name of the folder where you want to keep the pages of your Web site.
For example, type the folder name C:\WebSites\SimpleSort.
In the Language list, click Visual Basic or Visual C#.
Click OK.
Visual Web Developer creates the folder and a new page named Default.aspx.
Displaying Data in the GridView Control
In this section, you will add a GridView control to the page and configure it to display data from the Customers table of the Northwind database.
To display data in the GridView control
Switch to or open the Default.aspx file
Switch to Design view.
In the Toolbox, from the Data group, drag a GridView control onto the page.
On the GridView Tasks menu, in the Choose Data Source drop-down list, click <New data source>.
The Data Source Configuration wizard appears.
Click Database.
This specifies that you want to get data from a database that supports SQL statements, which includes SQL Server and other OLE-DB–compatible databases.
In the Specify an ID for the data source box, a default data source control name, SqlDataSource1, is displayed. You can leave this name.
Click OK.
The Configure Data Source wizard is displayed.
Click New Connection.
The Add Connection dialog box appears.
If the Data source list does not display Microsoft SQL Server (SqlClient), click Change, and in the Change Data Source dialog box, select Microsoft SQL Server.
If the Choose Data Source page appears, in the Data source list, select the type of data source you will use. For this walkthrough, the data source type is Microsoft SQL Server. In the Data provider list, click .NET Framework Data Provider for SQL Server, and the click Continue.
In the Server name box, enter the name of your SQL Server computer.
In the Log on to the server section, select the option that is appropriate for your SQL Server configuration (Windows Authentication or specific ID and password).
If they are required, enter a user name and password.
In the Select or enter a database name box, select Northwind.
Click the Test Connection button to test the connection. When you are sure that the connection has succeeded, click OK.
You are returned to the Configure Data Source - SqlDataSource1 wizard, where the connection information is filled in.
Click Next.
The wizard displays a page where you can choose to store the connection string in the configuration file. Storing the connection string in the configuration file has two advantages:
It is more secure than storing it in the page.
You can reuse the same connection string in multiple pages.
Be sure the Yes, save this connection as check box is selected, and then click Next. (You can leave the default connection string name.)
The wizard displays a page where you can specify what data you want to retrieve from the database.
Under Specify columns from a table or view, in the Name drop-down list, select Customers.
Under Columns, select the CustomerID, CompanyName, and City checkboxes.
The wizard displays the SQL statement that you are creating in a box at the bottom of the page.
Note
The wizard allows you to specify selection criteria (WHERE clauses) and other SQL query options. For this walkthrough, you will create a simple statement with no selection or sort options.
Click Next.
Click Test Query to be sure that you are retrieving the data you want.
Click Finish.
The wizard creates a SqlDataSource control and adds it to the page. The GridView control you added earlier is bound to the SqlDataSource control. If you view the properties for the SqlDataSource control, you will see that the wizard has created values for the ConnectionString and SelectQuery properties.
Right-click the GridView control, click Show Smart Tag, and then, on the GridView Tasks menu, click Enable Sorting.
The column headings in the GridView control change to links.
You can now test the page.
To test the page
Press CTRL+F5 to run the page.
The GridView control is displayed with CustomerID, CompanyName, and City columns.
Click a column heading to sort by the contents of that column.
Click a column again to switch between ascending and descending sort order.
Next Steps
Consider enabling multi-column sorting for a GridView control as well. For more information, see Sorting Data in a GridView Web Server Control.
See Also
Concepts
Sorting Data in a GridView Web Server Control