Gridview sorting up/down arrow in column headers

14,568

Take a look at my sample:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
    AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="CustomerId" 
    DataSourceID="SqlDataSource1">
    <SortedAscendingHeaderStyle CssClass="sortasc" />
    <SortedDescendingHeaderStyle CssClass="sortdesc" />
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="CustomerId" HeaderText="CustomerId" 
            InsertVisible="False" ReadOnly="True" SortExpression="CustomerId" />
        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
        <asp:BoundField DataField="IdNumber" HeaderText="IdNumber" 
            SortExpression="IdNumber" />
    </Columns>
</asp:GridView>

Pay attention on SortedAscendingHeaderStyle and SortedDescendingHeaderStyle. Just create apropriate css classes with background image (arrow up and arrow down) and you are done.

Share:
14,568
Mark Marina
Author by

Mark Marina

Updated on June 04, 2022

Comments

  • Mark Marina
    Mark Marina almost 2 years

    I'm currently working on some code which is taking care of sorting and paging data in a gridview. I'm now trying to implement sorting arrow (up/down arrows next to column headers) but I have no success. The code to implement the sorting arrows is located in the *GridView1_RowCreated* sub routine. Right now, when I run the code, I don't see the sorting arrows at all. The problematic line is the following one: "If tblAdministrators.SortExpression = lnk.CommandArgument Then" I can't figure out what's wrong with that line. It's always False therefore the arrows don't show up.

    Private Function GetData(sort As SortDirection) As Data.DataView
    
        Dim connection As OracleDBConnect = DAL.GetOracleDBConnection()
        Dim request As OracleDBRequest = Nothing
        Dim result As OracleDBResult = Nothing
        Dim trace As OracleDBChronoTrace = Nothing
        Dim status As DBStatus
        Dim sb As New StringBuilder
        Dim dv As DataView
    
        With sb
            .Append("SELECT * FROM USERS")
        End With
    
        request = New OracleDBRequest(sb.ToString, CommandType.Text)
    
        status = connection.Execute(request, result, trace)
    
        dv = New DataView(result.DataSet.Tables(0))
    
        If (ViewState("sortExp") IsNot Nothing) Then
            dv = New Data.DataView(result.DataSet.Tables(0))
    
            If (GridViewSortDirection = SortDirection.Ascending) Then
                GridViewSortDirection = SortDirection.Descending
                dv.Sort = CType(ViewState("sortExp").ToString() & DESCENDING, String)
            Else
                GridViewSortDirection = SortDirection.Ascending
                dv.Sort = CType(ViewState("sortExp").ToString() & ASCENDING, String)
            End If
        Else
            dv = result.DataSet.Tables(0).DefaultView
        End If
    
        Return dv
    
    End Function
    
    
    Public Property GridViewSortDirection() As SortDirection
        Get
            If ViewState("sortDir") Is Nothing Then
                ViewState("sortDir") = SortDirection.Ascending
            End If
    
            Return CType(ViewState("sortDir"), SortDirection)
        End Get
    
        Set(ByVal value As SortDirection)
            ViewState("sortDir") = value
        End Set
    
    End Property
    
    
    Protected Sub GridView1_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles tblAdministrators.PageIndexChanging
    
        tblAdministrators.PageIndex = e.NewPageIndex
        GridViewSortDirection = If(GridViewSortDirection = SortDirection.Descending, SortDirection.Ascending, SortDirection.Descending)
        tblAdministrators.DataSource = GetData(GridViewSortDirection)
        tblAdministrators.DataBind()
    
    End Sub
    
    
    Protected Sub GridView1_Sorting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewSortEventArgs) Handles tblAdministrators.Sorting
    
        ViewState("sortExp") = e.SortExpression
        tblAdministrators.DataSource = GetData(GridViewSortDirection)
        tblAdministrators.DataBind()
    
    End Sub
    
    Protected Sub GridView1_RowCreated(sender As Object, e As GridViewRowEventArgs) Handles tblAdministrators.RowCreated
        If e.Row.RowType = DataControlRowType.Header Then
            For Each tc As TableCell In e.Row.Cells
                If tc.HasControls() Then
    
                    Dim lnk As LinkButton = DirectCast(tc.Controls(0), LinkButton)
                    If lnk IsNot Nothing Then
    
                        Dim img As New System.Web.UI.WebControls.Image()
    
                        img.ImageUrl = "/images/" & (If(GridViewSortDirection = SortDirection.Ascending, "asc", "desc")) & ".gif"
    
                        If tblAdministrators.SortExpression = lnk.CommandArgument Then
    
                            tc.Controls.Add(New LiteralControl(" "))
                            tc.Controls.Add(img)
    
                        End If
                    End If
                End If
            Next
        End If
    End Sub
    

    ASPX code:

     <asp:GridView ID="tblAdministrators" runat="server" AutoGenerateColumns="false" EmptyDataText="No records found" PageSize="25" AllowPaging="True" AllowSorting="True" OnRowCreated="GridView1_RowCreated">
            <Columns>
                <asp:BoundField HeaderText="Name" DataField="Name" SortExpression="NAME"></asp:BoundField>
            </Columns>
            <Columns>
                <asp:BoundField HeaderText="City" DataField="City" SortExpression="CITY"></asp:BoundField>
            </Columns>
        </asp:GridView>