ASP.NET Data Web Controls Kick Start

Creating a HyperLink in a DataGrid that Opens in a New Window

By: Scott Mitchell | Created: 2003-05-11 | Last Updated: 2003-05-15

As discussed in Chapter 4 of ASP.NET Data Web Controls Kick Start, the DataGrid Web control can have a number of different column types. The most common column type is the BoundColumn, which simply displays the value of a particular DataSource field. Another useful DataGrid column type is the HyperLinkColumn, which displays a hyperlink in a DataGrid column.

The hyperlink generated by the HyperLinkColumn, when clicked, loads the specified URL in the same window as the DataGrid. However, many developers have asked on newsgroups and the ASP.NET DataGrid/DataList/Repeater forum how to have the hyperlink cause the specified URL to open in a different window. There are two ways to accomplish this:

Set the Target property of the HyperLinkColumn to _blank, which will cause the URL to be loaded in a new, blank window when clicked.
Use some client-side JavaScript to open a new window; specifically, use the window.open() function.

The first technique is much simpler to implement. However, the second technique allows for more control over the window that is created for the link to be displayed in. That is, with the client-side JavaScript approach, you can specify the precise height and width of the window, whether or not is will have a location bar, a status bar, if it's resizable, and other settings.

Using the Target Property
The simplest way to get a DataGrid's HyperLinkColumn hyperlink to load in another window is to set the HyperLinkColumn's Target property to _blank. The following code (and associated live demo), show the use of this property:

<asp:DataGrid runat="server" id="DataGridID" AutoGenerateColumns="False" ...> <Columns> ... <asp:HyperLinkColumn Text="Hyperlink Text" DataNavigateUrlField="SomeDataSourceField" DataNavigateUrlFormatString="/details.aspx?ID={0}" Target="_blank" /> ... </Columns> </asp:DataGrid>

View a live demo!

Opening a Window Using Client-Side JavaScript
While setting the Target property to _blank clearly causes the hyperlink to be loaded in a new window, it does not allow fine control over the new window's properties. For example, we may want the new window to be a certain size, or to not be resizable. If you require this extra functionality, you will need to specify that the link be opened in a new window using a bit of client-side JavaScript code. Specifically, you will need to set the DataNavigateUrlFormatString to something like:

javascript:var someVar = window.open(URL, WindowName, Window Properties)

An example of this syntax can be seen in the following source code and in the associated live demo:

<asp:DataGrid runat="server" id="DataGridID" AutoGenerateColumns="False" ...> <Columns> ... <asp:HyperLinkColumn Text="HyperLink Text" DataNavigateUrlField="SomeDataSourceField" DataNavigateUrlFormatString="javascript:var w=window.open('info.aspx?ID={0}','','width=400,height=400');" /> ... </Columns> </asp:DataGrid>

View the live demo!

The above code will cause the URL to be loaded into a new window that is precisely 400 pixels wide and 400 pixels high.

Don't Forget the var w=

When using the client-side JavaScript approach, don't forget to have in the content following javascript: the code var someVariableName = . If you just have something like javascript:window.open(...) the Web browser will open a new window, but will display either a blank page or an empty page with nothing but some odd text like [object window] (the precise output depends on the browser being used). However, adding the var someVariableName = fixes this problem.

The third parameter to the JavaScript window.open() function specifies the stylistic options for the new window that the specified URL will be opened in. For a complete list of allowable properties, view the technical documentation for the window.open() function.

Chapter 4, Adding Buttons and Hyperlinks to the DataGrid Web Control, contains a thorough examination of the HyperLinkColumn.

</shameless plug>

Home | FAQs | Articles | About | Buy the Book!