This tutorial will demonstrate how to use sorting and paging with a GridView control to make it more user friendly using ASP.NET 4.0.
Adding the Database
To demonstrate how to use sorting and paging with a grid view, we will need a sample database to use to populate our grid view with data. In this tutorial I will be using the ever so popular Northwind sample database that is available for download from Microsoft. You can locate the latest version here. At this point, I have created a new ASP.NET Empty Web Site and am ready to add the Northwind database to it. To do this:
Databinding the Gridview
Next, we need to bind the database we've added to a grid view. In order to do this, we will need to make a simple web page. To do this:
Enabling Sorting and Paging
Now that we have our grid view displaying data from the database, we can enable sorting and paging. First, let's load up the web site and take a look at what the default grid view is displaying. You'll notice that when you load up the page all of the data is in one big unsorted list that is not very user friendly. By default, the grid view control allows us to add in sorting and paging very easily. To do this:
I just signed up at Server Intellect and couldn't be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.
Testing
To test this out, load up the web site. Click on the Product Name column to sort by the product's name. Notice that only 10 items are being displayed and that there are links on the bottom to jump to different pages. The grid view allows us to implement some great functionality by simply checking a few options which we can then customize to fit our needs.
The Default.aspx source looks like this:
To demonstrate how to use sorting and paging with a grid view, we will need a sample database to use to populate our grid view with data. In this tutorial I will be using the ever so popular Northwind sample database that is available for download from Microsoft. You can locate the latest version here. At this point, I have created a new ASP.NET Empty Web Site and am ready to add the Northwind database to it. To do this:
- Right click the project in your solution explorer.
- Select add ASP.NET folder.
- Select App_Data.
- Right click the App_Data folder.
- Select add existing item...
- Select the Northwind.mdf database file.
- Click add.
Databinding the Gridview
Next, we need to bind the database we've added to a grid view. In order to do this, we will need to make a simple web page. To do this:
- Right click the project in your solution explorer.
- Select add new item...
- Select a web form.
- Name it 'Default.aspx'.
- Open Default.aspx up to design mode.
- Drag and drop a Gridview onto the web form.
- Expand the Gridview Tasks menu.
- From the choose data source drop down list, choose <New data source...>
- Select a SQL Database and name it 'SqlDataSource1'.
- Click ok.
- For the data connection, choose the Northwind.mdf database.
- Click next.
- Choose to save the connection string and name it 'ConnectionString'.
- Click next.
- Leave the default SQL statement that selects all from the Alphabetical list of products.
- Click next.
- Test the query and click Finish.
Enabling Sorting and Paging
Now that we have our grid view displaying data from the database, we can enable sorting and paging. First, let's load up the web site and take a look at what the default grid view is displaying. You'll notice that when you load up the page all of the data is in one big unsorted list that is not very user friendly. By default, the grid view control allows us to add in sorting and paging very easily. To do this:
- Open Default.aspx up to design mode.
- Expand the Gridview Tasks menu.
- Check enable paging.
- Check enable sorting.
I just signed up at Server Intellect and couldn't be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.
Testing
To test this out, load up the web site. Click on the Product Name column to sort by the product's name. Notice that only 10 items are being displayed and that there are links on the bottom to jump to different pages. The grid view allows us to implement some great functionality by simply checking a few options which we can then customize to fit our needs.
The Default.aspx source looks like this:
<body> |
No comments:
Post a Comment