|
ASP.NET Data Web Controls Kick Start |
 |
|||||||||
|
 |
|||
|
 |
||||||||||
|
|
| To follow along with the book, refer to: Chapter 4, Adding Buttons and Hyperlinks to the DataGrid Web Control |
| For More Information... |
| For more information on this FAQ, check out the following resources: |
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
Targetproperty 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 PropertyThe 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:
|
|
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:
|
|
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.
| <shameless plug> |
| Chapter 4, Adding Buttons and Hyperlinks to the DataGrid Web Control, contains a thorough examination of the HyperLinkColumn. |
| </shameless plug> |