Gussying Up the Bi-Directional Sortable DataGrid

This demo illustrates how to improve the appearance of a bi-directional sortable DataGrid by adding little up or down arrows to indicate what column the data is sorted by and whether the data is sorted in ascending or descending order.


FAQ ID CategoryQuestionSubmitted By
2StringsHow do you convert a string to all uppercase or all lowercase?Scott Mitchell
7ArraysHow do I dynamically resize an array?Scott Mitchell
8Databases, GeneralHow do you create a database table through a SQL statement (via an ASP page, perhaps)?Scott Mitchell
10Databases, GeneralHow can I tell what version of ADO I am using?Scott Mitchell
11EmailHow can I have my ASP page send HTML-formatted email?Scott Mitchell
12EmailHow can I display line breaks in an email message?Scott Mitchell
13EmailHow do you send email attachments through an ASP page?Scott Mitchell
14EmailCan I send emails without using CDONTS?Scott Mitchell
15StringsHow can I determine the length of a string (how many characters are in a string)?Scott Mitchell
16Dates and TimesUsing VBScript, how can I determine if a variable is a valid date or not?Scott Mitchell
17StringsHow can I find the position of a certain character (or substring) within a string?Scott Mitchell
18Dates and TimesHow can I easily display a nicely formatted date variable?Scott Mitchell
19Dates and TimesHow can I return the current date/time?Scott Mitchell
20Functions and SubroutinesWhat is recursion?Scott Mitchell


Source Code
<% @Import Namespace="System.Data" %>
<% @Import Namespace="System.Data.SqlClient" %>
<script language="vb" runat="server">
  Sub Page_Load(sender as Object, e as EventArgs)
    If Not Page.IsPostBack then
      SortExpression = "FAQID"  'Set the default column to sort by
      BindData()
    End If
  End Sub
  
	
  Sub BindData()
    '2. Create the command object, passing in the SQL string
    Dim strSQL as String = "SELECT FAQID, F.FAQCategoryID, SubmittedByName, F.Description, FC.Name AS CategoryName " & _
                           "FROM tblFAQ F INNER JOIN tblFAQCategory FC ON F.FAQCategoryID = FC.FAQCategoryID " & _
                           "WHERE FAQID <= 20"

    'Add the ORDER BY clause, if necessary
    If SortExpression.Length > 0 Then 
      strSQL &= " ORDER BY " & SortExpression
      
      If SortAscending Then
        strSQL &= " ASC"
      Else
        strSQL &= " DESC"
      End If
    End If

    'Update the column headers
    UpdateColumnHeaders(dgFAQs)

    'Set the datagrid's datasource to the datareader and databind
    Dim myConnection as New SqlConnection(ConfigurationSettings.AppSettings("connectionString"))
    Dim myCommand as New SqlCommand(strSQL, myConnection)
    
    myConnection.Open()

    dgFAQs.DataSource = myCommand.ExecuteReader()
    dgFAQs.DataBind()    
    
    myConnection.Close()
  End Sub
  

  'The SortCommand event handler
  Sub dgFAQs_SortCommand(sender as Object, e as DataGridSortCommandEventArgs)
    'Toggle SortAscending if the column that the data was sorted by has
    'been clicked again...
    If e.SortExpression = Me.SortExpression Then 
      SortAscending = Not SortAscending
    Else
      SortAscending = True
    End If
    
    'Set the SortExpression property to the SortExpression passed in
    Me.SortExpression = e.SortExpression

    BindData()  'rebind the DataGrid data
  End Sub
  
  
'The Page-level properties that write to ViewState
Private Property SortExpression() As String
    Get
        Dim o As Object = viewstate("SortExpression")
        If o Is Nothing Then
            Return String.Empty
        Else
            Return o.ToString
        End If
    End Get
    Set(ByVal Value As String)
        viewstate("SortExpression") = Value
    End Set
End Property

Private Property SortAscending() As Boolean
    Get
        Dim o As Object = viewstate("SortAscending")
        If o Is Nothing Then
            Return True
        Else
            Return Convert.ToBoolean(o)
        End If
    End Get
    Set(ByVal Value As Boolean)
        viewstate("SortAscending") = Value
    End Set
End Property


Sub UpdateColumnHeaders(ByVal dg As DataGrid)
    Dim c As DataGridColumn
    For Each c In dg.Columns
        c.HeaderText = Regex.Replace(c.HeaderText, "\s<.*>", String.Empty)  'Clear any <img> tags that might be present

        If c.SortExpression = SortExpression Then
            If SortAscending Then
                c.HeaderText &= " <img src=""/images/up.gif"" border=""0"" width=""11"" height=""7"">"
            Else
                c.HeaderText &= " <img src=""/images/down.gif"" border=""0"" width=""11"" height=""7"">"
            End If
        End If
    Next
End Sub
</script>

<form runat="server">
  <asp:datagrid id="dgFAQs" runat="server"
  	AutoGenerateColumns="False"
  	HeaderStyle-HorizontalAlign="Center"
  	HeaderStyle-BackColor="Red"
  	HeaderStyle-ForeColor="White"
  	HeaderStyle-Font-Bold="True"
  	HeaderStyle-Font-Name="Verdana"
  	AlternatingItemStyle-BackColor="#dddddd"
  	ItemStyle-Font-Name="Verdana"
  	AllowSorting="True"
		
  	OnSortCommand="dgFAQs_SortCommand">
	
    <Columns>
      <asp:BoundColumn DataField="FAQID" ItemStyle-Width="10%" SortExpression="FAQID"
  			ItemStyle-HorizontalAlign="Center" HeaderText="FAQ ID" />
      <asp:BoundColumn DataField="CategoryName" HeaderText="Category" SortExpression="CategoryName" />
      <asp:BoundColumn DataField="Description" HeaderText="Question" SortExpression="F.Description" />
      <asp:BoundColumn DataField="SubmittedByName" HeaderText="Submitted By" SortExpression="SubmittedByName" />
    </Columns>	
  </asp:datagrid>
</form>
	


[Return to the article...]