Sorting in a DataList Control...

Unlike the DataGrid, the DataList does not have built in sorting. You can, however, add code to implement it.

By: John Kilgo Date: October 25, 2003 Download the code.

It is relatively simple to add sorting to the DataList control if you don't mind link buttons residing outside the control. In this article we will demonstrate one way this can be done. There will not be a lot of verbage in this article as the code will pretty much speak for itself. First we will take a look at the .aspx page (DataListSort.aspx). The code is as follows:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="DataListSort.aspx.vb" Inherits="DotNetJohn.DataListSort"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>DataListSort</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">
.tablehead
  {
  font-family: Verdana, Arial, Helvetica, Sans-Serif;
  background-color:#006699;
  color:White;
  font-size: 10pt;
  }
.tablebody
  {
  font-family: Verdana, Arial, Helvetica, Sans-Serif;
  background-color:Gainsboro;
  color:Black;
  font-size: 10pt;
  }
</style>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataList ID="dtlPublishers" Runat="server" ItemStyle-BorderWidth="1">
  <HeaderTemplate>
    Sorting a DataList<br>
    <table width="760px" cellspacing="0" cellpadding="0">
      <tr>
        <td width="25%">
          <asp:LinkButton ID="NameSort" Runat="server" OnClick="NameSort_Click">Name</asp:LinkButton>
        </td>
        <td colspan="3">
          <asp:LinkButton ID="CitySort" Runat="server" OnClick="CitySort_Click">City</asp:LinkButton>
        </td>
      </tr>
      <tr class="tablehead">
        <th align="left" width="25%">Name</th>
        <th align="left" width="25%">City</th>
        <th align="left" width="25%">State</th>
        <th align="left" width="25%">Country</th>
      </tr>
    </table>
  </HeaderTemplate>
  <ItemTemplate>
    <table width="760px" cellspacing="0" cellpadding="0">
      <tr class="tablebody">
        <td width="25%"><%# DataBinder.Eval(Container.DataItem, "pub_name") %></td>
        <td width="25%"><%# DataBinder.Eval(Container.DataItem, "city") %></td>
        <td width="25%"><%# DataBinder.Eval(Container.DataItem, "State") %></td>
        <td width="25%"><%# DataBinder.Eval(Container.DataItem, "Country") %></td>
      </tr>
    </table>
  </ItemTemplate>
</asp:DataList>
</form>
</body>
</HTML>

The style sheet code is there just to make the DataList look nice. Notice within the HeaderTemplate that we have included two LinkButtons with OnClick events specified which will handle the sorting on the codebehind page. All of this, plus the DataList column headings are included in an html table.

In the ItemTemplate we have the code to display the data returned, also within an html table.

The codebehind page (DataListSort.aspx.vb) code follows:

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Public Class DataListSort
  Inherits System.Web.UI.Page

  < Web Form Designer Generated Code Omitted >

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    'Put user code to initialize the page here
    If Not IsPostBack Then
      strOrderBy = "pub_name"
      BindDataList()
    End If
  End Sub

  Private Sub BindDataList()
    Dim strSql As String = "SELECT * FROM publishers ORDER BY " & strOrderBy
    Dim objConn As New SqlConnection(ConfigurationSettings.AppSettings("PubsConnection"))
    Dim objCmd As New SqlCommand(strSql, objConn)
    Try
      objConn.Open()
      dtlPublishers.DataSource = objCmd.ExecuteReader()
      dtlPublishers.DataBind()
    Catch ex As SqlException
      Response.Write(ex.ToString)
    Finally
      objCmd.Dispose()
      objConn.Dispose()
    End Try
  End Sub

  Protected Sub NameSort_Click(ByVal sender As Object, ByVal e As EventArgs) Handles NameSort.Click
    strOrderBy = "pub_name"
    BindDataList()
  End Sub

  Protected Sub CitySort_Click(ByVal sender As Object, ByVal e As EventArgs) Handles CitySort.Click
    strOrderBy = "city"
    BindDataList()
  End Sub

End Class

The key to making the sorting work is the string variable strOrderBy. Our two event handlers, NameSort_Click and CitySort_Click, simply set strOrderBy to "pub_name" or "city" respectively. strOrderBy is then appended to the Select statement used in the BindDataList Sub. The rest of the code should be self explanatory.

You may download the code here.