Click here to Skip to main content
Click here to Skip to main content

ListView Header Sort Direction Indicators

, 13 May 2008 Ms-PL
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.

Introduction

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.

sortindicator2.jpg

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>
  34:              
  35:              <tr runat="server" id="itemPlaceholder" />
  36:          
  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:      }
  10:   
  11:      List<Control> controls = Helpers.GetControlsByType(this, 
                                          typeof(ListViewSortColumnHeader));
  12:      foreach (Control control in controls)
  13:      {
  14:          ListViewSortColumnHeader header = (ListViewSortColumnHeader)control;
  15:          if (header.HasSortDirectionIndicator() == true)
  16:          {
  17:              header.ResetSortDirectionIndicator();
  18:          }
  19:      }
  20:   
  21:      foreach (Control control in controls)
  22:      {
  23:          ListViewSortColumnHeader header = (ListViewSortColumnHeader)control;
  24:          if (header.Key == base.SortExpression)
  25:          {
  26:              header.SetSortDirectionIndicator(base.SortExpression, 
                                                    base.SortDirection);
  27:              break;
  28:          }
  29:      }
  30:   
  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.

History

  • 13-May-2008 - Initial release.

License

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

Share

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 ( http://www.sanibellogic.com ) 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.

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey16-Feb-12 0:41 
Questionhow to use this for repeater Pinmemberseeker8126-Sep-09 4:38 
GeneralDuplicate queries generated on initial page load PinmemberAlaric de Champsmarteau6-Jul-08 15:52 
GeneralVery nice! (But Up/Down arrows are flipped....) PinmemberAlaric de Champsmarteau5-Jul-08 15:44 
GeneralRe: Very nice! (But Up/Down arrows are flipped....) PinmemberPhilip Lippard5-Jul-08 18:37 
GeneralRe: Very nice! (But Up/Down arrows are flipped....) [modified] Pinmemberjwcookfl28-Mar-12 17:38 
Questionlistview control Pinmemberkarthigachawla3-Jul-08 20:15 
GeneralGreat control but having a problem.... PinmemberLee Keel25-Jun-08 6:00 
GeneralA Great Help - Thanks PinmemberMember 460211221-May-08 8:39 
GeneralExcellent article, thanks for the control Pinmemberevolved14-May-08 7:05 
GeneralRe: Excellent article, thanks for the control PinmemberPhilip Lippard14-May-08 9:54 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 13 May 2008
Article Copyright 2008 by Philip Lippard
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid