Friday, February 19, 2010

Sorting Gridview columns in Asp .NET

I like the gridview control most, to display the data of the database table at the webpage. It has so many features and extensions, which makes programming easier and interesting.

In this article I will show you the method to sort gridview columns. First of all, define the grid view control as follows: (You can have your own colors and formats, but do not forget to mention AllowSorting="True" and mention the function name in onsorting property as onsorting="OnSort” . Onsort is the name of my function, you can have some other name of the function)

<asp:GridView ID="mygrid" runat="server" CellPadding="4" ForeColor="#333333" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"PageSize="15" style="position: static; clear: both; display: block;" onsorting="OnSort">
 <Columns>
<asp:BoundField DataField="id" HeaderText="ID" SortExpression="id" />
<asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" />             
<asp:BoundField DataField="address" HeaderText="address" SortExpression="address" />
                   <asp:ButtonField buttontype="Link" commandname="add" Text="Add" />
                   <asp:ButtonField buttontype="Link" commandname="update" Text="Update"  />
                   <asp:ButtonField buttontype="Link" commandname="delete" Text="Delete"  />
                Columns>
              <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
              <FooterStyle BackColor="#990000" ForeColor="White" Font-Bold="True" />
              <PagerStyle ForeColor="#333333" HorizontalAlign="Center" BackColor="#FFCC66" />
              <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
              <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
              <AlternatingRowStyle BackColor="White" />
              <PagerSettings FirstPageText="" LastPageText="" NextPageText=""
                  PreviousPageText="" PageButtonCount="3" Position="Top" />
             asp:GridView>

Now on the code behind page, you need to write functions and property to make the sorting work properly. I wrote the functions and property as follows:


Public Property GridViewSortDirection() As SortDirection
        Get 
            If ViewState("sortDirection") Is Nothing Then 
                ViewState("sortDirection") = SortDirection.Ascending
            End If 
            Return CType(ViewState("sortDirection"), SortDirection) 
        End Get
        Set(ByVal Value As SortDirection)
            ViewState("sortDirection") = value
        End Set
    End Property 

This property figures the direction out. The default direction is “Ascending”, but if the column is already being sorted once, then it changes to direction to “Descending”.  This way we can sort our columns both in ascending and descending order.
Protected Sub OnSort(ByVal sender As Object, ByVal e As GridViewSortEventArgs) 
        Dim sortExpression As String = e.SortExpression 
        If GridViewSortDirection = SortDirection.Ascending Then 
            GridViewSortDirection = SortDirection.Descending 
            SortGridView(sortExpression, "DESC") 
        Else 
            GridViewSortDirection = SortDirection.Ascending 
            SortGridView(sortExpression, "ASC") 
        End If 
    End Sub

This is the function which is called at the “onsorting” event of the gridview.

Private Sub SortGridView(ByVal sortExpression As String, ByVal direction As String) 
        Dim SQL As String = "select id, name, address from people"
        Dim da As SqlDataAdapter = New SqlDataAdapter(SQL, MyConnection)
        Dim ds As New DataSet
        da.Fill(ds, "people") 
        Dim dt As DataTable = ds.Tables(0)
        Dim dv As DataView = New DataView(dt) 
        dv.Sort = sortExpression & " " & direction
        mygrid.DataSource = dv
        mygrid.DataBind() 
    End Sub
This function binds the gridview again.

In case you are doing something at the rowcommand event of the gridview, this may generate a runtime error. Because, whenever, you click on the gridview column, to sort it, the control goes to the rowcommand event first. To avoid the control trying to execute the code in rowcommand, I did the following:

Protected Sub mygrid_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles mygrid.RowCommand
If (e.CommandArgument <> "id" And e.CommandArgument <> "name" And e.CommandArgument <> "address") Then

‘Do whatever you want to do……………………’

End If
End Sub

In this way, I am able to sort the columns of the gridview.

No comments:

Post a Comment