Having a HyperLinkColumn Open in a New Window Using Client-Side JavaScript

This FAQ shows how to use a bit of client-side JavaScript to open a new window. When using the JavaScript function window.open() you have much more control over the stylistic properties of the new window being opened. For example, in this live demo, the new window being open will be 400x400 and not have a location bar.

TitleDate WrittenCommentsViews
Bidirectional 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.10443
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.14616
Common DataGrid Mistakes11/6/2003This article, by the DataGridGirl herself, lists the most common mistakes and blunders developers make when using the DataGrid.18940
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.14696
DataGrid 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.6695
Creating a Multi-table DataGrid in ASP.NET8/15/2003This article, by Dino Esposito, looks at how to build a DataGrid to display a multi-table DataSet. Of particular interest, Dino shows how to display parent/child hierarchies like the WinForms DataGrid.10005
Building a Pageable, Sortable DataGrid8/14/2003Learn how to build a sortable DataGrid and a pageable DataGrid; learn the steps necessary to combine these two techniques into creating a single sortable, pageable DataGrid.7314
Summarizing Data with ROLLUP7/30/2003Oftentimes, when building Web-based reporting tools we need to show totals and sub-totals for information stored in the database. This article, by Dave Long, examines using WITH ROLLUP. WITH ROLLUP is syntax that can be used in a SQL query to provide summarized information directly in the database resultset. By the end of this article we will have examined the results produced by a SQL query using WITH ROLLUP, as well as how to display the results of a WITH ROLLUP in a DataGrid.7893
Including Subheadings in a Datagrid7/26/2003This article, by Dave Long, examines how to add subheadings in a DataGrid. This approach allows for data displayed in a DataGrid to be grouped by some means, such as listing all products and grouping them by category. Read on to learn more.7990
Deciding When to Use the DataGrid, DataList or Repeater7/23/2003Learn about ASP.NET's three controls for displaying data: the DataGrid, the DataList, and the Repeater. Each of these controls has unique traits and associated advantages and disadvantages. When creating an ASP.NET application that displays data, it is important to choose the right control for the job. As we will see in this article, choosing whether to use the DataGrid, DataList, or Repeater is a tradeoff between three factors: usability, development time, and performance.7298

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 = "ConnectionString"
             Dim sqlConnection As System.Data.SqlClient.SqlConnection = New System.Data.SqlClient.SqlConnection(connectionString)
    
             Dim queryString As String = "SELECT TOP 10 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_Sort(sender as Object, e As DataGridSortCommandEventArgs)
           dgArticles.DataSource = GetArticles(e.SortExpression)
           dgArticles.DataBind()
         End Sub

</script>

    <form runat="server">
        <p>
            <asp:DataGrid id="dgArticles" runat="server" AllowSorting="True" AutoGenerateColumns="False" Font-Size="10pt" Font-Names="Verdana" OnSortCommand="dgArticles_Sort">
                <HeaderStyle font-size="13pt" font-bold="True" horizontalalign="Center" forecolor="White" backcolor="#006699"></HeaderStyle>
                <AlternatingItemStyle backcolor="#EEEEEE"></AlternatingItemStyle>
                <Columns>
                    <asp:HyperLinkColumn DataNavigateUrlField="ArticleID" 
                          DataNavigateUrlFormatString="javascript:var w =window.open('/Articles/Goto.aspx?ID={0}',null,'width=400,height=400,location=no')"
                          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>            
        </p>
    </form>

[Return to the FAQ...]