Click here to Skip to main content
13,298,551 members (38,674 online)
Click here to Skip to main content
Add your own
alternative version


54 bookmarked
Posted 13 May 2008

ListView Header Sort Direction Indicators

, 13 May 2008
Rate this:
Please Sign up or sign in to vote.
Writing an ASP.NET Custom Control which extends the ListView to visually show sort direction for columns.


The ASP.NET version 3.5 ListView provides developers with a much needed breath of fresh air with respect to simplifying HTML complexity when a data bound grid control is needed. The ListView enables developers to have full control over generated HTML, yet have simplified data binding, custom paging, and column sorting features. While column sorting is provided with ListView, a clear indication as to which column has been most recently sorted is not provided. There are many techniques on the Internet for providing DataGrid and GridView column sort indicators. The purpose of this posting is to provide a custom control for providing a ListView column sort indicator.


Using the code

This ListView column sort indicator consists of two custom controls; a ListViewSort custom control, which inherits from ListView, and a ListViewSortColumnHeader composite custom control. The ListViewSortColumnHeader control is used when defining each sortable header within the ListView LayoutTemplate. The ListViewSort custom control is used in place of the ListView ASP.NET control, and exposes the following extension public properties:

  • ImageUrlAscending - The image file which is used to represent an ascending sort direction in the active sorted header. If omitted, an embedded web resource is used as the default.
  • ImageUrlDescending - The image file which is used to represent a descending sort direction in the active sorted header. If omitted, an embedded web resource is used as the default.
  • SortExpressionDefault - The name of the data element which is the default sort expression.
  • SortDirectionDefault - The initial sort direction when a header is sorted.

Other than the above extension public properties, the ListViewSort is identical to the ListView, illustrated as follows:

 1:  <myControls:ListViewSort ID="listViewSort"
 2:      DataSourceID="ObjMenu"
 3:      DataKeyNames="Name"
 4:      SortExpressionDefault="Name"
 5:      SortDirectionDefault="Ascending"
 6:      runat="server">
 7:      <LayoutTemplate>
 8:          <table runat="server"
 9:              class="listViewGrid"
10:              cellspacing="0"
11:              border="0">
12:              <tr>
13:                  <th>
14:                      <myControls:ListViewSortColumnHeader runat="server"
15:                          Key="Name"
16:                          Text="Food Name" />
17:                  </th>
18:                  <th>
19:                      <myControls:ListViewSortColumnHeader runat="server"
20:                          Key="Price"
21:                          Text="Price" />
22:                  </th>
23:                  <th>
24:                      <myControls:ListViewSortColumnHeader runat="server"
25:                          Key="Description"
26:                          Text="Description" />
27:                  </th>
28:                  <th>
29:                      <myControls:ListViewSortColumnHeader runat="server"
30:                          Key="Calories"
31:                          Text="Calories" />
32:                  </th>
33:              </tr>
35:              <tr runat="server" id="itemPlaceholder" />
37:          </table>
38:          <asp:DataPager ID="dataPager" runat="server">
39:              <Fields>
40:                  <asp:NumericPagerField ButtonCount="10"
41:                      NextPageText="..."
42:                      PreviousPageText="..." />
43:              </Fields>
44:          </asp:DataPager>
45:      </LayoutTemplate>
46:      <ItemTemplate>
47:          <tr class="<%# ((ListViewDataItem)Container).DisplayIndex % 2 == 0 ?
                              "itemRow" : "altItemRow" %>">

The ListViewSortColumnHeader composite control is used in place of a HyperLink ASP.NET control, normally used to activate column sorting. ListViewSortColumnHeader exposes the Key and Text properties. The Key property associates the header with a databound expression, while the Text property provides for the actual text being displayed in the header. The ListViewSortColumnHeader control essentially generates the asp:HyperLink control and an asp:PlaceHolder control for an anticipated asp:Image control whenever the header participates in a sorting operation.

The ListViewSort custom control overrides a single event from the inherited ListView control, OnDataBound, illustrated as follows:

 1:  protected override void OnDataBound(EventArgs e)
 2:  {
 3:      if (base.SortExpression.Length == 0)
 4:      {
 5:          if (SortExpressionDefault.Length > 0)
 6:          {
 7:              base.Sort(SortExpressionDefault, SortDirectionDefault);
 8:          }
 9:      }
11:      List<Control> controls = Helpers.GetControlsByType(this,
12:      foreach (Control control in controls)
13:      {
14:          ListViewSortColumnHeader header = (ListViewSortColumnHeader)control;
15:          if (header.HasSortDirectionIndicator() == true)
16:          {
17:              header.ResetSortDirectionIndicator();
18:          }
19:      }
21:      foreach (Control control in controls)
22:      {
23:          ListViewSortColumnHeader header = (ListViewSortColumnHeader)control;
24:          if (header.Key == base.SortExpression)
25:          {
26:              header.SetSortDirectionIndicator(base.SortExpression,
27:              break;
28:          }
29:      }
31:      base.OnDataBound(e);
32:  }

During the ListViewSort OnDataBound event processing, the existing ListViewSort headers are examined and any existing sort direction indicator asp:Image controls are removed, and then the appropriate sort direction indicator asp:Image control is injected into the new header being sorted. With the exception of maintaining the four ListViewSort extension public properties within ViewState, that is essentially all that the ListViewSort does. This level of simplicity ensures that the sort direction indicator logic does not need to work its way into your application for each and every web page which uses a ListView. A sample ListViewSort output is illustrated. In this illustration (and the related project demo file), any of the headers can be clicked and the table data will be sorted in either ascending or descending order.

The project demo file for the above sample HTML and the code above also demonstrates the usage of an ASP.NET ObjectDataSource control, enabled for custom paging, to ensure that only the currently displayed ListViewSort data is maintained within ViewState at any point in time.


  • 13-May-2008 - Initial release.


This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


About the Author

Philip Lippard
Web Developer Sanibel Logic LLC
United States United States
Philip Lippard is Chief Technical Officer at Sanibel Logic LLC. Sanibel Logic ( ) is focused on providing software products and technical consulting to selected clients; leveraging a wide range of Microsoft Web based and Windows client/server enterprise technologies. Products and services have been provided to licensees in thirty six (36) countries.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
manoj kumar choubey16-Feb-12 1:41
membermanoj kumar choubey16-Feb-12 1:41 
Questionhow to use this for repeater Pin
seeker8126-Sep-09 5:38
memberseeker8126-Sep-09 5:38 
GeneralDuplicate queries generated on initial page load Pin
Alaric de Champsmarteau6-Jul-08 16:52
memberAlaric de Champsmarteau6-Jul-08 16:52 
GeneralVery nice! (But Up/Down arrows are flipped....) Pin
Alaric de Champsmarteau5-Jul-08 16:44
memberAlaric de Champsmarteau5-Jul-08 16:44 
GeneralRe: Very nice! (But Up/Down arrows are flipped....) Pin
Philip Lippard5-Jul-08 19:37
memberPhilip Lippard5-Jul-08 19:37 
GeneralRe: Very nice! (But Up/Down arrows are flipped....) Pin
jwcookfl28-Mar-12 18:38
memberjwcookfl28-Mar-12 18:38 
Questionlistview control Pin
karthigachawla3-Jul-08 21:15
memberkarthigachawla3-Jul-08 21:15 
GeneralGreat control but having a problem.... Pin
Lee Keel25-Jun-08 7:00
memberLee Keel25-Jun-08 7:00 
GeneralA Great Help - Thanks Pin
Member 460211221-May-08 9:39
memberMember 460211221-May-08 9:39 
GeneralExcellent article, thanks for the control Pin
evolved14-May-08 8:05
memberevolved14-May-08 8:05 
GeneralRe: Excellent article, thanks for the control Pin
Philip Lippard14-May-08 10:54
memberPhilip Lippard14-May-08 10:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171207.1 | Last Updated 13 May 2008
Article Copyright 2008 by Philip Lippard
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid