The Source Code / Demo of the Article Listings

This is a live demo of the Recommended Articles page on this Web site.

 TitleDate WrittenCommentsViews
EditBidirectional Sorting with Up and Down Arrows in the Header6/15/2005This article shows how to create a bi-directional sortable DataGrid that displays an up or down arrow in the header of the column that the grid is sorted by, depending on if the data is sorted in ascending or descending order.9533
Creating a Fully Editable DataGrid12/15/2004Learn how to create a DataGrid where each record in the grid is editable, rather than having to edit one record at a time. Useful for scenarios where the user needs to update a large amount of data at once.13418
EditCommon DataGrid Mistakes11/6/2003This article, by the DataGridGirl herself, lists the most common mistakes and blunders developers make when using the DataGrid.17819
Creating Custom Columns for the ASP.NET Datagrid9/10/2003This article, by DataGridGirl herself, examines how to build a custom DataGrid column that displays a databound DropDownList.13538
EditDataGrid Made Compliant with Section 508 of the Web Accessibility Initiative Guidelines8/19/2003The DataGrid control that was included with the .NET Framework 1.1 was not compliant with Section 508 of the Rehabilitation Act (www.Section508.gov) or with the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). Data tables that contain two or more rows or columns must identify row and column headers. Microsoft has released a HotFix that you can install that will have DataGrids render according to 508 specifications.5933

Source Code 

<%@ Page Language="VB" %>
<script runat="server">

    Sub Page_Load(sender as Object, e as EventArgs)
           If Not Page.IsPostBack then
             dgArticles.DataSource = GetArticles("DateAuthored DESC")
             dgArticles.DataBind()
           End If
         End Sub
    
    
         Function GetArticles(sortBy as String) As System.Data.SqlClient.SqlDataReader
             Dim connectionString As String = "Connection String..."
             Dim sqlConnection As System.Data.SqlClient.SqlConnection = New System.Data.SqlClient.SqlConnection(connectionString)
    
             Dim queryString As String = "SELECT TOP 5 ArticleID, [Articles].[Title], [Articles].[URL], [Articles].[dateAuthored], [Articles"& _
    "].[Comments], [Articles].[ClickThroughs] FROM [Articles] ORDER BY " & sortBy
             Dim sqlCommand As System.Data.SqlClient.SqlCommand = New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)
    
             sqlConnection.Open
             Dim dataReader As System.Data.SqlClient.SqlDataReader = sqlCommand.ExecuteReader(System.Data.CommandBehavior.CloseConnection)
    
             Return dataReader
         End Function
    
         
         Sub dgArticles_DataBound(sender as Object, e as DataGridItemEventArgs)
           If e.Item.ItemType = ListItemType.Item OR e.Item.ItemType = ListItemType.AlternatingItem then
             If e.Item.ItemIndex MOD 2 = 1 then
               'Hide the Edit column control
               e.Item.Cells(0).Controls(0).Visible = False
             End If
           End If
         End Sub
</script>

    <form runat="server">
        <asp:DataGrid id="dgArticles" runat="server" AllowSorting="True" 
                   AutoGenerateColumns="False" Font-Size="10pt" 
                   Font-Names="Verdana"
                   OnItemDataBound="dgArticles_DataBound">
            <HeaderStyle font-size="13pt" font-bold="True" horizontalalign="Center" forecolor="White" backcolor="#006699"></HeaderStyle>
            <AlternatingItemStyle backcolor="#EEEEEE"></AlternatingItemStyle>
            <Columns>
				<asp:EditCommandColumn EditText="Edit" CancelText="Cancel" UpdateText="Update"></asp:EditCommandColumn>
                <asp:HyperLinkColumn DataNavigateUrlField="ArticleID" DataNavigateUrlFormatString="/Articles/Goto.aspx?ID={0}" DataTextField="Title" SortExpression="Title" HeaderText="Title"></asp:HyperLinkColumn>
                <asp:BoundColumn DataField="DateAuthored" SortExpression="dateAuthored DESC" HeaderText="Date Written" DataFormatString="{0:d}"></asp:BoundColumn>
                <asp:BoundColumn DataField="Comments" HeaderText="Comments"></asp:BoundColumn>
                <asp:BoundColumn DataField="ClickThroughs" SortExpression="ClickThroughs DESC" HeaderText="Views" DataFormatString="{0:d}" ItemStyle-HorizontalAlign="Center"></asp:BoundColumn>
            </Columns>
        </asp:DataGrid>            
    </form>

[Return to the FAQ...]