?
Solved

datagrid => generate "clean" tables

Posted on 2004-11-12
7
Medium Priority
?
548 Views
Last Modified: 2012-08-14
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)
0
Comment
Question by:changemenow
  • 3
  • 2
  • 2
7 Comments
 
LVL 28

Expert Comment

by:mmarinov
ID: 12579807
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
 

Author Comment

by:changemenow
ID: 12580211
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
 
LVL 28

Expert Comment

by:mmarinov
ID: 12580244
changemenow,

i understand the challenge - and wish you a good luck

B..M
mmarinov
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:tstoeckigt
ID: 12583664
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
 

Author Comment

by:changemenow
ID: 12585215
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
 
LVL 1

Accepted Solution

by:
tstoeckigt earned 540 total points
ID: 12585321
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
 

Author Comment

by:changemenow
ID: 12585520
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Whether it be Exchange Server Crash Issues, Dirty Shutdown Errors or Failed to mount error, Stellar Phoenix Mailbox Exchange Recovery has always got your back. With the help of its easy to understand user interface and 3 simple steps recovery proced…
With just a little bit of  SQL and VBA, many doors open to cool things like synchronize a list box to display data relevant to other information on a form.  If you have never written code or looked at an SQL statement before, no problem! ...  give i…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question