ListView Sort

This tutorial will show you how to use the new ListView Control to sort data from a database.

In this tutorial, we will look at how we can use the new ListView Control to sort data from a database. We will be using Link Buttons to create the headers ourselves, and add the ability to sort by these.

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

The first thing we need to do is to create a database. We will start by adding a SQL database to our project, and create one table with three columns - id, name and age. Then we will add some sample data to display.

Once we have our database, we will add a ListView Control and a SqlDataSource:

<form id="form1" runat="server"> <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"> </asp:ListView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [tblPeople]"></asp:SqlDataSource> </form>

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

We configure the DataSource with our database, and then assign it to our ListView. Next, we will create the LayoutTemplate:

<LayoutTemplate> <table> <thead> <tr> <th> <asp:LinkButton ID="lnkName" runat="server" CommandName="Sort" CommandArgument="Name" Text="Name" /> </th> <th> <asp:LinkButton ID="lnkAge" runat="server" CommandName="Sort" CommandArgument="Age" Text="Age" /> </th> </tr> </thead> <tbody> <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> </tbody> </table> </LayoutTemplate>

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

The LayoutTemplate serves as a container for the ItemTemplate. The PlaceHolder will be replaced with the contents of the ItemTemplate. Notice that we pass the CommandName and CommandArgument of each LinkButton.
Next, we will add the ItemTemplate and the EmptyDataTemplate:

<ItemTemplate> <tr> <td><%# Eval("Name") %></td> <td><%# Eval("Age") %></td> </tr> </ItemTemplate> <EmptyDataTemplate> Sorry, no data to display. </EmptyDataTemplate>

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

Because the ItemTemplate replaces the PlaceHolder we added in the LayoutTemplate, we simply add the data from the datbase into table cells of a table row. The web application can now be run, and the Link buttons can be clicked to sort the data.
The ASPX page will look something like this:

<form id="form1" runat="server"> <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"> <LayoutTemplate> <table> <thead> <tr> <th> <asp:LinkButton ID="lnkName" runat="server" CommandName="Sort" CommandArgument="Name" Text="Name" /> </th> <th> <asp:LinkButton ID="lnkAge" runat="server" CommandName="Sort" CommandArgument="Age" Text="Age" /> </th> </tr> </thead> <tbody> <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> </tbody> </table> </LayoutTemplate> <ItemTemplate> <tr> <td><%# Eval("Name") %></td> <td><%# Eval("Age") %></td> </tr> </ItemTemplate> <EmptyDataTemplate> Sorry, no data to display. </EmptyDataTemplate> </asp:ListView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [tblPeople]"></asp:SqlDataSource> </form>