Thursday, January 04, 2007

Merging Side-by-Side Tables

One thing I have always been frustrated with in ASP.Net is that you can't use templated bound controls to produce side-by-side lists within a table. The problem comes from the fact that for each row you need to render the cells from list A, then the cells from list B, and so on. If you want, for example, email addresses to be listed vertically on the left and phone numbers listed on the right, within a single table, you have three options:
  1. Display each list in a single cell on a single row, perhaps using one of the list tags. No alternate row styling is available, and you're out of luck if your list needs to be displayed in more than one column.
  2. Use templated databound controls to embed subtables within single cells on a single row. If you're fastidious, tweak the margins of the subtable cells to keep the contents properly left-aligned. Live with the fact that unexpected content wrapping would destroy the illusion of synchronized lists and that any alternate row styling will be discontinuous with the parent table.
  3. Manually build the cells and rows from the two data sources and add them to the outer table. Track alternate rows and set styles yourself.

Option 3 gives you the look you want plus better HTML, but it's a pain in the neck to do. So one thing I have always wanted to have is a way to merge tables horizontally. Bind your two lists to two separate templated bound controls, and then combine them, matching rows and combining cell collections. To do it, you'd probably have to render each databound control to a string and then merge the generated HTML, which wouldn't be as hard as it sounds if you remember that valid HTML is supposed to be a variant of XML.

Since I am currently somewhat idle I may spend time putting this together. Let me know if you want me to post the results.

Labels: , ,

1 Comments:

Blogger Unknown said...

Could you e-mail me at abell at nuco dot com ?

Thanks.

- Allison (who used to live in Lee)

2/16/2007 12:53 PM  

Post a Comment

<< Home