datagrid => generate "clean" tables

I want to generate a table like this:

<table class="tableclass">
<tr>
  <th>column 1</th>
  <th>column 2</th>
</tr>
<tr>
  <td>value 1</td>
  <td>value 2</td>
</tr>
</table>

Currently, I'm doing this with an asp:repeater control, which I think is kinda stupid, because there is the excellent datagrid control.

However, there are 2 problems:

1) I'm a css designer and I want to fully seperate content and design.
What I want is '<table class="blabla">'
but what I get is <table cellspacing='0' rules='all' border='1' id='DataGrid1'
style='BORDER-COLLAPSE:collapse' class="blabla">
Asp.Net is generating cellspacing, rules, border and style attributes which a) conflict with the way I want my design 2) are unnessecary because I just want a simple plain table.
So, is there a way to get rid of all of those?

2) I would like my first row to have "th" tags instead of "td"'s. But this is a smaller problem and is not as important as the first. But is it possible anyway?

Thanks to anyone who can help me out.

Besides, I don't like the way Asp.Net has implemented the style attribute. The "headerstyle-font-bold" etc look just messy. And why would anyone want to generate inline CSS? Come on people, we've waited ages to have a seperation of content and design, and .Net helped in that with server controls, but why still mix up content and presentation this way? Comments on this highly appreciated, too. :o)
changemenowAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mmarinovCommented:
Hi changemenow,

the reader is the control that is designed for this purpose. Actually the datagrid is based on repeater control - but it is mainly for other pursposes
so my suggestion ( if you care about the generated html ) to use repeater instead of datagrid

Regards!
B..M
mmarinov
0
changemenowAuthor Commented:
thanks... very nice anwser, almost clicked the accept button, and maybe I will soon, but... :o)

i really want to try - as a challenge - to eliminate the unneeded properties...

For those intrested, there's a thread going on about it between me and Bug on the Asp.Net forums: http://www.asp.net/Forums/ShowPost.aspx?tabindex=1&PostID=746056
0
mmarinovCommented:
changemenow,

i understand the challenge - and wish you a good luck

B..M
mmarinov
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

tstoeckigtCommented:
I had the same problem. I had a css which depends on the usage of thead- and th-tags.
I solved it with derivation of the datagrid-class and rendering the table for myself.

See http://www.experts-exchange.com/Programming/Programming_Languages/Dot_Net/VB_DOT_NET/Q_21006964.html for my long answer.

Ciao
Timo
0
changemenowAuthor Commented:
mmarinov, thanks for your friendly reply!

tstoeckigt, you've got it. My css depended on th tags too. I first designed a dummy page in HTML to create the CSS style, but porting it to ASP.Net forced me in using the DataGrid control.

could you maybe post the code you used for that solution?
0
tstoeckigtCommented:
Well it's still in "quick and dirty"-style... ;-)

BTW: Has someone any idea with transforming the DataGrid-Attributes to css-styles?

Here we go:

      public class CSSFixedDataGrid : System.Web.UI.WebControls.DataGrid
      {
            protected override void Render(HtmlTextWriter output)
            {
                  //I just expect a DataTable or a DataView
                  DataView dv =null;
                  if(DataSource.GetType().Equals(typeof(DataView)))
                  {
                        dv=(DataView)DataSource;
                  }
                  else
                  {
                        if(DataSource.GetType().Equals(typeof(DataTable)))
                        {
                              dv=new DataView((DataTable) DataSource);
                        }
                        else
                        {
                              throw new ArgumentException("DataSource is neither DataView nor DataTable");
                        }
                  }
                  output.WriteLine("<div id=\"tableContainer\" class=\"tableContainer\">");
                  output.WriteLine("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"scrollTable\">");
                  if(ShowHeader)
                  {
                        output.WriteLine("<thead class=\"fixedHeader\">");
                        output.WriteLine("<tr>");

                        foreach(DataGridColumn col in Columns)
                        {
                              output.Write("<th>");
                              output.Write(col.HeaderText);
                              output.WriteLine("</th>");
                        }

                        foreach(DataColumn col in dt.Columns)
                        {
                              output.Write("<th>");
                              if(AllowSorting)
                              {
                                    output.Write("<a  id=\"" + this.UniqueID + "\" href=\"javascript:__doPostBack('"+this.UniqueID+"$_ctl1$_ctl"+dt.Columns.IndexOf(col)+"','"+col.ColumnName+"')\">");
                                    output.Write(" ");
                              }
                              output.Write(col.ColumnName);
                              if(AllowSorting)
                                    output.Write("</a>");
                              output.WriteLine("</th>");
                        }
                        output.WriteLine("</tr>");
                        output.WriteLine("</thead>");
                  }
                  output.WriteLine("<tbody class=\"scrollContent\">");
                  foreach(DataGridItem item in Items)
                  {
                        output.Write("<tr class=\"");
                        output.Write((item.ItemType.Equals(ListItemType.AlternatingItem))?"alternateRow":"normalRow");
                        output.WriteLine("\">");
                        foreach(TableCell cell in item.Cells)
                              cell.RenderControl(output);
                        output.WriteLine("</tr>");
                  }

                  output.WriteLine("</tbody>");
                  output.WriteLine("</table>");
                  output.WriteLine("</div>");
            }

            protected override void OnLoad(System.EventArgs e)
            {
                  base.OnLoad(e);
                  string crlf="\r\n";
                  
                  foreach(string s in Style.Keys)
                        System.Diagnostics.Debug.WriteLine(s+" "+base.Style[s]);

                  if(BackColor.IsEmpty)
                        BackColor=System.Drawing.Color.White;
                  if(ItemStyle.BackColor.IsEmpty)
                        ItemStyle.BackColor=BackColor;
                  if(AlternatingItemStyle.BackColor.IsEmpty)
                        AlternatingItemStyle.BackColor=ItemStyle.BackColor;
                  if(ItemStyle.BorderColor.IsEmpty)
                        ItemStyle.BorderColor=System.Drawing.Color.Black;
                  if(AlternatingItemStyle.BorderColor.IsEmpty)
                        AlternatingItemStyle.BorderColor=ItemStyle.BorderColor;
                  if(HeaderStyle.BackColor.IsEmpty)
                        HeaderStyle.BackColor=System.Drawing.Color.Orange;
                  if(HeaderStyle.BorderColor.IsEmpty)
                        HeaderStyle.BorderColor=ItemStyle.BorderColor;
                  int width=(int)((Width.IsEmpty)?400:Width.Value);
                  int height=(int)((Height.IsEmpty)?300:Height.Value);

                  StringBuilder sb = new StringBuilder();
                  sb.Append("<style type=\"text/css\">").Append(crlf)
                        .Append("<!--").Append(crlf)
                        .Append("/* Terence Ordona, portal[AT]imaputz[DOT]com         */").Append(crlf)
                        .Append("/* http://creativecommons.org/licenses/by-sa/2.0/    */").Append(crlf)
                        .Append("/* define height and width of scrollable area. Add 16px to width for scrollbar          */").Append(crlf)
                        .Append("/* allow WinIE to scale 100% width of browser by not defining a width                   */").Append(crlf)
                        .Append("/* WARNING: applying a background here may cause problems with scrolling in WinIE 5.x   */").Append(crlf)
                        .Append("div.tableContainer {").Append(crlf)
                        .Append("      clear: both;").Append(crlf)
                        .Append("      border: 1px solid #963;").Append(crlf)
                        .Append("      height: ").Append(height).Append("px;").Append(crlf)
                        .Append("      overflow: auto;").Append(crlf)
                        .Append("      width: ").Append(width).Append("px;").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */").Append(crlf)
                        .Append("\\html div.tableContainer/* */ {").Append(crlf)
                        .Append("      padding: 0 16px 0 0").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */").Append(crlf)
                        .Append("html>body div.tableContainer {").Append(crlf)
                        .Append("      height: auto;").Append(crlf)
                        .Append("      padding: 0;").Append(crlf)
                        .Append("      width: 740px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* Reset overflow value to hidden for all non-IE browsers. */").Append(crlf)
                        .Append("/* Filter out Opera 5.x/6.x and MacIE 5.x                  */").Append(crlf)
                        .Append("head:first-child+body div[class].tableContainer {").Append(crlf)
                        .Append("      height: 285px;").Append(crlf)
                        .Append("      overflow: hidden;").Append(crlf)
                        .Append("      width: 756px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* define width of table. IE browsers only                 */").Append(crlf)
                        .Append("/* if width is set to 100%, you can remove the width       */").Append(crlf)
                        .Append("/* property from div.tableContainer and have the div scale */").Append(crlf)
                        .Append("div.tableContainer table {").Append(crlf)
                        .Append("      float: left;").Append(crlf)
                        .Append("      width: 100%").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* WinIE 6.x needs to re-account for padding. Give it a negative margin */").Append(crlf)
                        .Append("\\html div.tableContainer table/* */ {").Append(crlf)
                        .Append("      margin: 0 -16px 0 0").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* define width of table. Opera 5.x/6.x and MacIE 5.x */").Append(crlf)
                        .Append("html>body div.tableContainer table {").Append(crlf)
                        .Append("      float: none;").Append(crlf)
                        .Append("      margin: 0;").Append(crlf)
                        .Append("      width: 740px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* define width of table. Add 16px to width for scrollbar.           */").Append(crlf)
                        .Append("/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */").Append(crlf)
                        .Append("head:first-child+body div[class].tableContainer table {").Append(crlf)
                        .Append("      width: 756px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* set table header to a fixed position. WinIE 6.x only                                       */").Append(crlf)
                        .Append("/* In WinIE 6.x, any element with a position property set to relative and is a child of       */").Append(crlf)
                        .Append("/* an element that has an overflow property set, the relative value translates into fixed.    */").Append(crlf)
                        .Append("/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */").Append(crlf)
                        .Append("thead.fixedHeader tr {").Append(crlf)
                        .Append("      position: relative;").Append(crlf)
                        .Append("      /* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution      */").Append(crlf)
                        .Append("      top: expression(document.getElementById(\"tableContainer\").scrollTop)").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* set THEAD element to have block level attributes. All other non-IE browsers            */").Append(crlf)
                        .Append("/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */").Append(crlf)
                        .Append("/* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */").Append(crlf)
                        .Append("head:first-child+body thead[class].fixedHeader tr {").Append(crlf)
                        .Append("      display: block").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* make the TH elements pretty */").Append(crlf)
                        .Append("thead.fixedHeader th {").Append(crlf)
                        .Append("      background: ")
                        .Append(HeaderStyle.BackColor.Name)
                        .Append(';').Append(crlf)
                        .Append("      border: 1px solid ")
                        .Append(HeaderStyle.BorderColor.Name)
                        .Append(';').Append(crlf)
                        .Append("      font-weight: normal;").Append(crlf)
                        .Append("      padding: 4px 3px;").Append(crlf)
                        .Append("      text-align: left").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* make the A elements pretty. makes for nice clickable headers                */").Append(crlf)
                        .Append("thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {").Append(crlf)
                        .Append("      color: #FFF;").Append(crlf)
                        .Append("      display: block;").Append(crlf)
                        .Append("      text-decoration: none;").Append(crlf)
                        .Append("      width: 100%").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* make the A elements pretty. makes for nice clickable headers                */").Append(crlf)
                        .Append("/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */").Append(crlf)
                        .Append("thead.fixedHeader a:hover {").Append(crlf)
                        .Append("      color: #FFF;").Append(crlf)
                        .Append("      display: block;").Append(crlf)
                        .Append("      text-decoration: underline;").Append(crlf)
                        .Append("      width: 100%").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* define the table content to be scrollable                                              */").Append(crlf)
                        .Append("/* set TBODY element to have block level attributes. All other non-IE browsers            */").Append(crlf)
                        .Append("/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */").Append(crlf)
                        .Append("/* induced side effect is that child TDs no longer accept width: auto                     */").Append(crlf)
                        .Append("/* Filter out Opera 5.x/6.x and MacIE 5.x                                                 */").Append(crlf)
                        .Append("head:first-child+body tbody[class].scrollContent {").Append(crlf)
                        .Append("      display: block;").Append(crlf)
                        .Append("      height: 262px;").Append(crlf)
                        .Append("      overflow: auto;").Append(crlf)
                        .Append("      width: 100%").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* make TD elements pretty. Provide alternating classes for striping the table */").Append(crlf)
                        .Append("/* http://www.alistapart.com/articles/zebratables/                             */").Append(crlf)
                        .Append("tbody.scrollContent td, tbody.scrollContent tr.normalRow td {").Append(crlf)
                        .Append("      background: ")
                        .Append(this.ItemStyle.BackColor.Name)
                        .Append(';').Append(crlf)
                        .Append("      border: 1px solid ")
                        .Append(this.ItemStyle.BorderColor.Name)
                        .Append(';').Append(crlf)
                        .Append("      padding: 2px 3px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("tbody.scrollContent tr.alternateRow td {").Append(crlf)
                        .Append("      background: ")
                        .Append(this.AlternatingItemStyle.BackColor.Name)
                        .Append(';').Append(crlf)
                        .Append("      border: 1px solid ")
                        .Append(this.AlternatingItemStyle.BorderColor.Name)
                        .Append(';').Append(crlf)
                        .Append("      padding: 2px 3px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* define width of TH elements: 1st, 2nd, and 3rd respectively.      */").Append(crlf)
                        .Append("/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */").Append(crlf)
                        .Append("/* Add 16px to last TH for scrollbar padding                         */").Append(crlf)
                        .Append("/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */").Append(crlf)
                        .Append("head:first-child+body thead[class].fixedHeader th {").Append(crlf)
                        .Append("      width: 200px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("head:first-child+body thead[class].fixedHeader th + th {").Append(crlf)
                        .Append("      width: 240px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("head:first-child+body thead[class].fixedHeader th + th + th {").Append(crlf)
                        .Append("      border-right: none;").Append(crlf)
                        .Append("      padding: 4px 4px 4px 3px;").Append(crlf)
                        .Append("      width: 316px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("/* define width of TH elements: 1st, 2nd, and 3rd respectively.      */").Append(crlf)
                        .Append("/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */").Append(crlf)
                        .Append("/* Add 16px to last TH for scrollbar padding                         */").Append(crlf)
                        .Append("/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors    */").Append(crlf)
                        .Append("head:first-child+body tbody[class].scrollContent td {").Append(crlf)
                        .Append("      width: 200px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("head:first-child+body tbody[class].scrollContent td + td {").Append(crlf)
                        .Append("      width: 240px").Append(crlf)
                        .Append("}").Append(crlf)

                        .Append("head:first-child+body tbody[class].scrollContent td + td + td {").Append(crlf)
                        .Append("      border-right: none;").Append(crlf)
                        .Append("      padding: 2px 4px 2px 3px;").Append(crlf)
                        .Append("      width: 300px").Append(crlf)
                        .Append("}").Append(crlf)
                        .Append("-->").Append(crlf)
                        .Append("</style>").Append(crlf);


                  //this.Page.RegisterClientScriptBlock("javascriptfunctions", javascriptfunctions);
                  this.Page.RegisterClientScriptBlock("CSSDataGridStyleSheet",sb.ToString());
                  //this.Page.RegisterStartupScript("startup", cmd);
            }
      }
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
changemenowAuthor Commented:
damn, a real shortcoming of asp.net...
that's the reason why I didn't want to migrate from ASP, it just takes a lot of coding out of your hand, a now we see what a lot of additional (!) code we need to remove (!) an unnessecary set of attributes.

but thx, some good coding!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.