ASP 101 - Active Server Pages 101 - Web06
The Place ASP Developers Go!

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
The Top 10 ASP Links @ Microsoft.com
What is Adovbs.inc and Why Do I Need It?
An Overview of ASP.NET

QUICK TIP:
Using Response.CacheControl
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


Multi-Column Sort Using the ASP.NET DataGrid

by Jayram Tallamraju

Overview

It is easy to implement single column sort using ASP.NET DataGrid. Using Sort functionality in DataView class, data can be sorted correctly with specific data-type (integer, string, date etc). In this article I will show some simple techniques to extend sort functionality for multi-column sort. With this feature, user should be able to sort the data using multiple column selection.

Objectives

Support default sort, single-column sort with Ascending/Descending toggle and multi-column sort using ASP.NET DataGrid control.

Sample Code

Sample code is attached with this article. Feel free to use it or modify it depending on your requirement. Sample code provided is not of production quality and demonstrating multi-column sort is main focus of the sample.

Topics covered

Developing multi-column sort functionality is the main topic in this article. Basic sorting functionality in DataGrid, DataSet support for XML and some code re-use techniques are also covered briefly.

Steps involved in supporting Single-column Sort

  • Using VS .net, On DataGrid properties window, select 'AllowSorting=True'

  • Using VS .net, On DataGrid properties window click on 'Events' icon and enter event handler name against 'SortCommand'. This will trigger VS .net to create an event handler for sort.

  • In HTML view of .aspx page, for the columns that require sorting, in the column header add Xml attribute "SortExpression". Value for sort expression should normally be equal to "DataField" attribute value.

  • ASP.NET highlights the columns that have 'SortExpression', with an underline in column-heading. User can invoke sort on any column by clicking the column header link.

  • In "SortCommand" event hanlder provide sorting code by re-creating DataSet and applying sort (With the support of DataView.Sort)

  • Bind DataView to DataGrid.DataSource' property and call 'DataBind' method of DataGrid.

Supporting Multi-Column Sort

There are many ways multi-column sort can be implemented. Approach in this article is based on the tricks we already know for supporting single column sort.

  • DataGrid's Sort event handler is called for every column that defines 'SortExpression'. Event object passed in this event handler has property "SortExpression". This will have the sort expression for the column that user clicked.

  • Assuming that SortExpression property is always unique for each column in DataGrid, it is easy to find current column on which user selected Sort.

  • Set DataGrid current column's SortExpression to next in the order (Sort on each column is flagged as "ASC, DESC, No sort") and perform sort with current selection.

  • Till this point most of the logic is similar to single-column sort.

  • Provide a 'multi-sort' button to explicitly invoke multi-sort. On the event handler of this button, check for 'SortExpression' for each column (Expression should have 'ASC' or 'DESC') and concatenate them to prepare single sort expression.

  • Use final sort expression with DataView to sort data.

  • Bind DataView to DataGrid.

DataGrid: Loading data from XML vs. Database

In this sample for simplicity I have loaded DataSet from XML file. DataSet can take data from any data source using ADO.NET. How and where to get data is not relevant in this example. There is no technical reason of using one over other and approach might vary from application to application.

Fig. 1 Shows sample employee data in XML file. DataSet.ReadXML method can load XML data. DataGrid.DataSource property is used to bind DataSet through DataView. (DataView class is used to do actual sorting of the data)

Fig. 1

Fig. 1: Employee data from "EmpData.xml"

Code Re-use and Code-behind Programming

ASP.NET code-behind is powerful concept and it separates presentation and business logic for any web page. When we develop any ASP.NET page we need to keep this in mind and avoid using presentation logic in C# code wherever possible. Code-behind is not everything behind (I mean presentation logic goes in .aspx page and business logic or complex page handling logic goes in C# code). Also in this sample I have externalized multi-column sort code to separate class. This way we can build once and re-use it in many other applications. Ideally we should have WebUtils (as an example) assembly where all re-usable code for the projects should reside.

Fig. 2 Shows sample web page showing multi-column sort.

Fig. 2

Fig. 2: Sample - Multi Column Sort using ASP.NET DataGrid

Sample Code

To test the sample, do the following:

  1. Download the sample ASPNET_DataGrid_MultiColumn_Sort.ZIP file and extract the files to local machine.

  2. Using IIS Management Console, create new virtual directory "MultiSortGrid" and for physical path, select 'MultiSortGrid' folder from the extracted files (Step 1 above).

  3. In your browser type in the URL http://localhost/MultiSortGrid/SortData.aspx

  4. Sort Type Toggle (ASC/DESC): Each time a column is clicked, "Sort type" for that column is toggled in following order: ASC, DESC, No Sort (Clear Sort). User will see the "Sort Type" in column heading text. If there is no "ASC" or "DESC" shown for any column then that column will not be included on multi-column sort. This gives user a better option of what columns should be selected for multi-column sort.

  5. Single column sort (ASC vs. DESC): Click on any column header and DataGrid should show how data is sorted. If column label has "ASC" that means data is sorted ascending order, if column header has "(DESC)" then data is sorted in descending order. If no information is displayed next to column header then current sorting is cleared on this column and this column will not participate in multi-sort.

  6. Multi-Column Sort: Click on each column to select "(ASC)" OR "(DESC)" OR nothing (No sort). Then click on the button that says 'Multi-Sort'. User should see the data sorted as per "ASC/DESC" designation specified in column heading.

  7. Default sort order: Click on button that says "Default" to resent sorting order, back to default.

About the Author

Jayram Tallamraju is a Software Architect/ Sr. Programmer Analyst for Bisys Hedge Fund Services in Boston, MA. He is MCP of .net, MCSD (Microsoft Certified Solution Developer) and SCJD (Sun Certified Java Developer). Jay holds an MS in Electronics and has been working in the software industry for around 10 years. He is focused more in building server architecture and in building reusable business components. His current area of expertise is in Microsoft technologies such as .NET, C#, Web services, ASP.NET, VC++/VB, COM/DCOM, ASP/IIS.

Email: tjayram@yahoo.com

Articles from the same author:


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers