GridView Sort Issue – Display image in Header

.NET
1

Hello

I have some code working that places an image in the header of a GridView object when the user clicks on the header to sort. The purpose of this image is to indicate the sort order to the user.

Lets say here is my header with the image.

Field Header 1 ^ Field Header 2

My Page_Load code places the image next to Field Header 1 since the SQL which is used to populate the GridView is sorted in ascending order for Field 1.

The way the sort code works is, the first time the user clicks on the Field Header, it sorts in ascending order and places an up arrow image next to the header. If they then click on the same header, it will sort in descending order and place a down arrow image next to the header.

So here is my problem, on page load I indicate the page is sorted in ascending order for Field 1 since it is sorted in the SQL. If the user then clicks on Field Header 1, it does an ascending sort (where it should be doing a descending sort). All clicks after this work properly, it is just the initial page load where I am having this issue.

Below is my code. Any help or suggestions you could provide would be helpful.

Thanks

Default.aspx page code for the GridView


<asp:GridView ID="grdView1" runat="server"
        DataSourceID="SqlDataSource1"
        AllowSorting = "True"
        OnSorting = "OnSort"
        OnRowCreated = "OnRowCreated"
        AutoGenerateColumns = "False">
        <Columns>
            <asp:BoundField HeaderText="Field1" DataField="Field1" SortExpression="Field1" />
            <asp:BoundField HeaderText="Field2" DataField="Field2" SortExpression="Field2" />
        </Columns>
    </asp:GridView>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        SelectCommand="SELECT Field1, Field2 FROM tblTable Order By Field1"
        ConnectionString="<%$ ConnectionStrings:DatabaseName %>" />

Here is my code behind page – Default.aspx.cs


public partial class Default : System.Web.UI.Page
{
    private String m_strSortExp;
    private SortDirection m_SortDirection;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            m_strSortExp = "Field1";
            m_SortDirection = SortDirection.Ascending;
        }
    }

    protected void OnSort(object sender, GridViewSortEventArgs e)
    {
        m_strSortExp = e.SortExpression;
        m_SortDirection = e.SortDirection;
    }

    protected void OnRowCreated(object sender, GridViewRowEventArgs e)
    {
        if( e.Row.RowType == DataControlRowType.Header )
        {
            AddSortImage(e.Row);
        }
    }

    void AddSortImage(GridViewRow headerRow)
    {
        int selCol = GetSortColumnIndex( m_strSortExp );

        if ( -1 == selCol )
        {
            return;
        }

        // Create the sorting image based on the sort direction
        Image sortImage = new Image();

        if (SortDirection.Ascending == m_SortDirection)
        {
            sortImage.ImageUrl = "images/arrow_up.jpg";
            sortImage.AlternateText = "Ascending";
        }
        else
        {
            sortImage.ImageUrl = "images/arrow_down.jpg";
            sortImage.AlternateText = "Descending";
        }

        // Add the image to the appropriate header cell
        headerRow.Cells[selCol].Controls.Add(sortImage);
    }

    // This is a helper method used to determine the index of the
    // column being sorted. If no column is being sorted, -1 is returned.
    int GetSortColumnIndex(String strCol)
    {
        foreach ( DataControlField field in this.grdView1.Columns )
        {
            if (field.SortExpression == strCol)
            {
                return grdUsers.Columns.IndexOf(field);
            }
        }

        return -1;
    }
}
2