Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Five ASP.NET Controls You Might Be Craving : Page 4

Tricky solutions require tricky coding—the kind of features that a wizard-driven environment and a general-purpose framework can't provide. In this article, you'll tackle five ASP.NET features that require wicked and creative code.

4: Two Rows for the Item
When most programmers need to write reports of data, the DataGrid is the first control they look at. The DataGrid control meets most, but not all, common user requirements in these situations. One of the (very few) things the DataGrid can't easily do is display data items on two rows. Let's consider a typical scenario: a report with product information in which each item is represented by multiple table rows. For example, the first row could contain product ID and name, and the second row contains the product description. The DataGrid is not ideal for this task because its user interface is designed to associate one data item with one row. Using the Repeater control might make the task straightforward but at the price of losing many useful (and automatic) formatting and editing capabilities of the grid. Is there a viable way in the middle?

With a Repeater, you could create multi-row reports by defining a table in the header template and then a couple of rows for each item. If you don't mind using a Repeater, this is just fine.

<headertemplate> <table> </headertemplate> <itemtemplate> <tr><td>...</td>...</tr> <tr><td>...</td>...</tr> </itemtemplate> <footertemplate> </table> </footertemplate>

The DataList control offers the same capabilities of the Repeater plus advanced styling and formatting properties that you wouldn't readily sacrifice. Can you just use the DataList in lieu of the Repeater? As the code snippet above shows, when using the Repeater, you build the final table by combining HTML elements across templates. By design, you can't take the same liberty with a DataList. Put another way, with a DataList you can't place the opening tag of a table in the header and then close it in the footer. However, this doesn't mean that you can't have a multi-row item in a DataList.

Figure 4: This is a table with multiple rows per item created using a DataList control.
The secret for building HTML tables using a DataList is in the ExtractTemplateRows property of the control. It gets or sets a Boolean value that instructs the DataList to extract the constituent rows from any HTML table in the templates. The idea is that you define brand new tables in each template: header, item, footer. Next, if the property is set to true, the control extracts the rows from all child tables and combines them together to create a single, all-encompassing table. ExtractTemplateRows is set to false by default.

The use of the property is subject to a few restrictions. The tables must all be defined using a well-formed <asp:table> tag. An exception is thrown if you define the table using the <table> element with or without the RUNAT attribute. The <asp:table> tag corresponds to a Table control, which is the only one to expose rows and cells programmatically. This is valuable information that allows the DataList to build a new table joining the rows defined in all constituent tables. All non-row tags are ignored. Listing 3 shows the source code of a DataList control that exploits templated rows. In Figure 4, you can see a sample page in action.

The ExtractTemplateRows property is helpful when you're going to create quite a complex structure in which tables with different templates are to be merged together. You can use the ColumnSpan and RowSpan properties of the TableCell object to control the number of columns and rows the cell spans. When the ExtractTemplateRows property is set to true, the RepeatColumns, RepeatDirection, and RepeatLayout properties are ignored and do not affect the appearance of the DataList control.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date