The Big ASP.NET DataGrid Article, Part 2

Welcome back to the second part of this ASP.NET DataGrid mini-series. This week, we’re looking at using HTML, hyperlinks, and formatting in your DataGrid, plus figure out color-coding and the many different ways of allowing the user to select rows… all condensed into standalone, easy-to-follow tips!

How to Use HTML in a Web Grid

It’d often be useful to display HTML in a Web grid. Many content management systems, for example, store HTML-formatted text in key fields. Wouldn’t it be useful to see bold text as actual bold text, rather than a bundle of <b> tags?

Well, it’s simple. Just use it!

Because the Web grid output is fed straight to a browser, with none of your cell text being encoded, any tags in your fields will be rendered directly. This means that, if you’ve used a bold tag, it’ll be rendered as bold text. If you’ve used a line break or image, it’ll be rendered as a line break or image.

Figure: Demonstating simple HTML in a Web grid

Now that’s the sort of quick and simple tip I like!

Using Hyperlinks in Your Web Grid

Hyperlinks form the backbone of the World Wide Web. They turn a five-minute mail-checking session into an all-night mega-surf. They’re important, they connect the Web—and, as such, it makes sense that you may want to use them in your Web grid.

How? You need to set up a special HyperlinkColumn object to be displayed in your grid, specifying which field contains the text to display for the link, and which contains the actual link destination (that is, the hyperlink URL).

In this example, we’re going to imagine that we’ve got a table of company details containing address and Web site information. We’ll be designing our grid hyperlinks using the visual Property Builder.

So, you have a DataGrid on your Web form. Right-click and select Property Builder. Under the General property sheet, ensure that the DataSource and DataMember options are selected. This tells the DataGrid what data it is working with. Next, choose the Columns property sheet. Under the list of available columns, move the fields you want to display in your grid (under Data Fields) across to the list of selected columns.

Finally, set up our hyperlink column. Move down in the list of available columns, select ‘HyperLink Column’, and move it across to the list of selected columns. You will see a bunch of properties below. First, choose the Text field—this will be displayed as the text to the hyperlink. Next, select the URL field—this should hold the ultimate destination of the link, a Web address. Note that the URL field will need to contain an “http://” prefix.

Top Tip: Does your database simply contain the Web address in www.karlmoore.com format rather than http://www.karlmoore.com? No fear. Just select your field, then, in the “URL format string” box, enter the text: http://{0}. This will insert “http://” before your field text.

Next, choose a target from the dropdown box. If you don’t specify this property, it’ll use the page default. Other options include selecting “_blank” to open in a new window, or perhaps “_search” to open in the IE search bar. You may also want to set text for the “Header text” box, which will set the title for that particular column.

Click on OK when finished, and then bind as usual (follow “Nine Steps to a Quick, Editable Web Grid” through to Step 5 for quick, read-only binding). Sorted—a quick and easy data list, hyperlinks and all!

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read