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

How to Perform Sorting in Gridview in ASP.NET

By , 6 Oct 2013
Rate this:
Please Sign up or sign in to vote.

Introduction

I will demonstrate one of the ways of performing sorting on gridview.

Drag and drop gridview on your page.

<asp:GridView ID="GridView1" runat="server"></asp:GridView> 

Set AllowSorting property to true, add OnSorting event to the gridview.

<asp:GridView ID="GridView1" runat="server" AllowSorting="true" 
      OnSorting="GridView1_Sorting">
</asp:GridView>   

Create data table that you want to assign to the GridView. I am using the following data table to assign to gridview.

Table name: Students

Table columns:

  • Students Name
  • Students Div
  • Student Roll number
  • Student Class

Let assign the Data Table to Gridview. I will not demonstrate any database connectivity code. I will assume that we have connected to the database and fill the data table.

Let's assign to the GridView.

   GridView1.DataSource = dataTable;
   GridView1.DataBind(); 

Now the magic begins to sorting the grid.

To do sorting, we just need to know what is the sort expression and sort direction property of the GridViewSortEventArgs.

SortDirection is sort the grid column using ascending and descending order.

SortExpression is nothing but the column name that you need to sort.

dataTable.DefaultView.Sort will sort the data table by assigning sort direction and sort expression to datatable.

dataTable.DefaultView.Sort = e.SortExpression + " " +_sortDirection; 

As we are adding event OnSorting, let's put our sorting logic there.

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{ 
    SetSortDirection(SortDireaction);
    if (dataTable != null)
    {
        //Sort the data.
        dataTable.DefaultView.Sort = e.SortExpression + " " +_sortDirection;
        GridView1.DataSource = dataTable;
        GridView1.DataBind();
        SortDireaction = _sortDirection;
    }
} 
protected void SetSortDirection(string sortDirection)
{
    if (sortDirection == "ASC")
    {
        _sortDirection = "DESC";
    }
    else
    {
        _sortDirection = "ASC";
    }
} 

After sorting the data table, let's assign back to the grid as we have the sorted data table. I have created SetSortDirection function that will accept the previous sort direction that I have sorted in view state and change the ASC to DESC or vice versa.

Let's add ascending and descending image to the column header to indicate column is sorted.

Create Image class object. Assign imageurl property of image class with ascending and descending image while deciding ascending and descending sort order.

Image sortImage = new Image();
protected void SetSortDirection(string sortDirection)
{
    if (sortDirection == "ASC")
    {
        _sortDirection = "DESC";
        sortImage.ImageUrl = "view_sort_ascending.png";
    }
    else
    {
        _sortDirection = "ASC";
        sortImage.ImageUrl = "view_sort_descending.png";
    }
} 

Let's get index position of header cell that we are sorting.

We have sortexpression following code gives you index position of header cell based on sortexpression.

int columnIndex=0;
foreach (DataControlFieldHeaderCell headerCell in GridView1.HeaderRow.Cells)
{
    if (headerCell.ContainingField.SortExpression==e.SortExpression)
    {
        columnIndex = GridView1.HeaderRow.Cells.GetCellIndex(headerCell);
    }
} 

We have index position of header cell on which we are performing sorting.

Let's insert image object in header of sorted column based on index position.

GridView1.HeaderRow.Cells[columnIndex].Controls.Add(sortImage); 

This is our simple sorting demo.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Amey K Bhatkar
Web Developer Lionbridge
India India
Amey K Bhatkar, a “Microsoft .Net” Web Developer.
I am programmer by will and profession.
I have completed my MCA in 2011 and join software industry.
Presently I am working with Lion Bridge Technologies in Mumbai - India
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140421.2 | Last Updated 6 Oct 2013
Article Copyright 2013 by Amey K Bhatkar
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid