- Getting Started
- Making a URL Clickable in an ASP.NET GridView
- Formatting Number Fields in an ASP.NET GridView
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Making a URL Clickable in an ASP.NET GridView
In Design View, click in the GridView and click on the arrow pointing to the right. You should see the GridView Tasks pop-up (see Figure 2).
)
Figure 2 Gridview Tasks pop-up
Then, follow these steps:
- Choose Add New Column; this should bring up the Add Field dialog (see Figure 3).
- Choose HyperLinkField as the field type (see Figure 4). This will open up more fields to use with dropdowns to select data fields from your database.
- Type the text you want to appear as your column header in the Header Text field.
- Click OK.
- Save your page and preview in the browser.
)
Figure 3 Add Field dialog
)
Figure 4 Choose HyperLinkField and more options will appear
For Hyperlink Text, if you want generic text to appear, type it into the Specify Text field. If you want the URL to display, choose Get Text from Data Field and select your fieldname from the dropdown. You can also customize the text using another field in your database and formatting it. The example in Figure 4 is using the firstname field as part of the Hyperlink Text.
For Hyperlink URL, choose Get URL from Data Field and select your field from the dropdown.
If the URL in your database in formatted as http://www.yourwebsite.com (without a preceding http://), type http://{0} in the URL format string box (see Figure 5).
)
Figure 5 Use http://{0} if the URL field in your database does not include http://.
Opening the Hyperlink in a New Window
In Design View, click on the column and click on the arrow pointing to the right to bring up the GridView Tasks pop-up. Then:
- Choose Edit Columns.
- Find your field in the Selected Fields list.
- In the HyperLinkField properties, scroll down to Target and choose _blank from the dropdown.
- Click OK.
- Save your page and preview in browser (see Figure 6).
- Click OK.
- Save the page and preview in the browser.
)
Figure 6 Your ASP.NET Gridview as it will appear in a browser. Click the Web Site link and a new browser window will open.
Notice that the Website field from your database is displaying twice? In Design View, click on the Gridview and click on the arrow pointing to the right to bring up the GridView Tasks pop-up. Choose Edit Columns, find the original Website field in the Selected Fields list, and click the red ‘X’ to delete it.
Making an Email Address Clickable in an ASP.NET GridView
In Design View, click on the Gridview and click on the arrow pointing to the right to bring up the GridView Tasks pop-up. Then:
- Choose Add New Column. This should bring up the Add Field dialog.
- Select HyperLinkField as the field type.
- Type the text you want to appear as your column header in the Header Text field.
- Click OK.
- In Design View, click on the column you just added and then click on the arrow pointing to the right to bring up the GridView Tasks pop-up.
- Choose Edit Columns.
- Find your field in the Selected fields list and select it.
- Click the Convert This Field into a TemplateField link.
- Click OK. In Design View, the field should be displayed as a clickable field called Databound.
- Save your page and preview in the browser. The email addresses in the new column are now clickable.
For Hyperlink text, choose Get text from data field and select your email address fieldname from the dropdown.
For Hyperlink URL, choose Get URL from data field and select your field from the dropdown.
In the URL format string field, type mailto:{0}.
You can delete the extra non-clickable email field by following the instructions at the end of the previous section.