Creating a Bi-Directional Sortable DataGrid Using ViewState

This demo illustrates how to create a bi-directional sortable DataGrid using ViewState to track the sortable column field and direction.

FAQ IDCategoryQuestionSubmitted 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

    '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  
</script>

<form runat="server">
  <asp:datagrid id="dgFAQs" runat="server"
  	AutoGenerateColumns="False"
  	HeaderStyle-HorizontalAlign="Center"
  	HeaderStyle-BackColor="Navy"
  	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...]