Gridview Sorting With Images

Question

I have a web app(ASP.NET 2.0 with C#), and in it I have a gridview that gets its data from an oracle database.

I needed to implement the sort function for the gridview, so I added a dropdownmenu right above the gridview with 2 choices: Ascending and Descending. Then in the Gridview_Sorting method, I have a switch statement that basically checks the selection on the dropdown menu, and sorts accordingly.

This works, but I want to be able to click it once, and it sorts one way, then click it again, and it sorts the other way. Another thing I'd like to have would be images beside the column names that tell you which direction the data is sorted in.

Any suggestions? Thank you.

Answer 1

Check out this blog post for a generic subroutine to handle this

Answer 2

A simple solution would be to use an image control or image button. On the click event, toggle the image from 1 image to the other. To determine previous state, either use a session variable or determine what the image button's imageurl property was previously set to, toggle it and call your sort method.

Answer 3

I use JQuery table sorter. Client side sorting is quicker on the front end and this plugin allows you to specify images that display in the headings of your columns:

http://tablesorter.com/docs/

I am not sure what the impact will be when working with selection and interaction with this method, so beware.

Answer 4

I add the image to the header cell on sorting :

// ...

GridViewRow headerRow = GridView1.HeaderRow;

foreach (TableCell tableCell in headerRow.Cells)
{
    if (tableCell.HasControls())
    {
        LinkButton button = tableCell.Controls[0] as LinkButton;
        if (button != null)
        {                                            
            if (sortExp == button.CommandArgument)
            {
                Image image = new Image();
                if (sortDir == "ASC")
                {
                    image.ImageUrl = "/_layouts/Document LibraryManager/icon_ascending.gif";
                    tableCell.Controls.Add(image);
                }
                else
                {
                    image.ImageUrl = "/_layouts/Document LibraryManager/icon_descending.gif";
                    tableCell.Controls.Add(image);
                }
            }
        }
    }
}

Answer 5

The simplest and elegant way to do it is to use ViewState. Persist the sort direction in ViewState and access it each time sorting occurs.

public SortDirection GridViewSortDirection
    {
        get
        {
            if (ViewState["sortDirection"] == null || (SortDirection)ViewState["sortDirection"] == SortDirection.Descending)
                ViewState["sortDirection"] = SortDirection.Ascending;
            else if ((SortDirection)ViewState["sortDirection"] == SortDirection.Ascending)
                ViewState["sortDirection"] = SortDirection.Descending;

            return (SortDirection)ViewState["sortDirection"];
        }
        set
        { ViewState["sortDirection"] = value; }
    }

If no sorting has been done previously(null condition) or previous sort direction was descending, next time sorting should happen in ascending order. Similarly, vice-versa.