How to Perform Sorting in Gridview in ASP.NET

• Download demo (no EXE) - 167 KB
• Download demo - 176 KB

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.