Hi guys,

While using the  Css Friendly Adapter for the GridView, I've run into several properties that are not being rendered.

Over time, I've implemented support for several of those properties, as I needed to use them.

These range from declarative properties like

<asp:TemplateField/BoundField...> :  HeaderStyle-CssClass

 to programmatically exposed properties like

GridViewRow.CssClass

GridViewRow.Attributes, GridViewRow.Styles

 The code below is the GridViewAdapter.cs (beta 3.0) class with added support for the above-mentioned properties. (sorry, could not attach the file)

(The added code sections are preceeded by a comment starting with //ADK.)

using System;
using System.Data;
using System.Collections;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace CSSFriendly
{
    public class GridViewAdapter : System.Web.UI.WebControls.Adapters.WebControlAdapter
    {
        private WebControlAdapterExtender _extender = null;
        private WebControlAdapterExtender Extender
        {
            get
            {
                if (((_extender == null) && (Control != null)) ||
                    ((_extender != null) && (Control != _extender.AdaptedControl)))
                {
                    _extender = new WebControlAdapterExtender(Control);
                }

                System.Diagnostics.Debug.Assert(_extender != null, "CSS Friendly adapters internal error", "Null extender instance");
                return _extender;
            }
        }

        /// ///////////////////////////////////////////////////////////////////////////////
        /// PROTECTED        
        
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            if (Extender.AdapterEnabled)
            {
                RegisterScripts();
            }
        }

        protected override void RenderBeginTag(HtmlTextWriter writer)
        {
            if (Extender.AdapterEnabled)
            {
                Extender.RenderBeginTag(writer, "AspNet-GridView");
            }
            else
            {
                base.RenderBeginTag(writer);
            }
        }

        protected override void RenderEndTag(HtmlTextWriter writer)
        {
            if (Extender.AdapterEnabled)
            {
                Extender.RenderEndTag(writer);
            }
            else
            {
                base.RenderEndTag(writer);
            }
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            if (Extender.AdapterEnabled)
            {
                GridView gridView = Control as GridView;
                if (gridView != null)
                {
                    writer.Indent++;
                    WritePagerSection(writer, PagerPosition.Top);

                    writer.WriteLine();
                    writer.WriteBeginTag("table");
					
					//ADK: added CssClass and ClientID support
					writer.WriteAttribute("class", Control.CssClass);
					writer.WriteAttribute("id", Control.ClientID);

                    writer.WriteAttribute("cellpadding", "0");
                    writer.WriteAttribute("cellspacing", "0");
                    writer.WriteAttribute("summary", Control.ToolTip);
                    writer.Write(HtmlTextWriter.TagRightChar);
                    writer.Indent++;

                    ArrayList rows = new ArrayList();
                    GridViewRowCollection gvrc = null;

                    ///////////////////// HEAD /////////////////////////////

                    rows.Clear();
                    if (gridView.ShowHeader && (gridView.HeaderRow != null))
                    {
						//ADK: added support for HeaderStyle-CssClass (<TemplateField>, <BoundField>...)
						int i = 0;
						foreach (DataControlField col in gridView.Columns)
						{
							if (col.HeaderStyle.CssClass != null)
							{
								gridView.HeaderRow.Cells[i].CssClass = col.HeaderStyle.CssClass;
							}
							i++;
						}

                        rows.Add(gridView.HeaderRow);
                    }
                    gvrc = new GridViewRowCollection(rows);
                    WriteRows(writer, gridView, gvrc, "thead");

                    ///////////////////// FOOT /////////////////////////////

                    rows.Clear();
                    if (gridView.ShowFooter && (gridView.FooterRow != null))
                    {
                        rows.Add(gridView.FooterRow);
                    }
                    gvrc = new GridViewRowCollection(rows);
                    WriteRows(writer, gridView, gvrc, "tfoot");

                    ///////////////////// BODY /////////////////////////////

                    WriteRows(writer, gridView, gridView.Rows, "tbody");

                    ////////////////////////////////////////////////////////

                    writer.Indent--;
                    writer.WriteLine();
                    writer.WriteEndTag("table");

                    WritePagerSection(writer, PagerPosition.Bottom);

                    writer.Indent--;
                    writer.WriteLine();
                }
            }
            else
            {
                base.RenderContents(writer);
            }
        }

        /// ///////////////////////////////////////////////////////////////////////////////
        /// PRIVATE        

        private void RegisterScripts()
        {
        }

        private void WriteRows(HtmlTextWriter writer, GridView gridView, GridViewRowCollection rows, string tableSection)
        {
            if (rows.Count > 0)
            {
                writer.WriteLine();
                writer.WriteBeginTag(tableSection);
                writer.Write(HtmlTextWriter.TagRightChar);
                writer.Indent++;

                foreach (GridViewRow row in rows)
                {
                    writer.WriteLine();
                    writer.WriteBeginTag("tr");

                    string className = GetRowClass(gridView, row);
					//ADK: added support for row.CssClass 
					//(e.g. when programmatically setting e.Row.CssClass inside the rowdatabound event)
					if (row.CssClass != null && !row.CssClass.Equals(string.Empty))
					{
						if (!String.IsNullOrEmpty(className))
							className += " ";
						className += row.CssClass;
					}

                    if (!String.IsNullOrEmpty(className))
                    {
                        writer.WriteAttribute("class", className);
                    }
					//ADK: added support for row.attributes
					//(e.g. when doing e.Row.Attributes.Add inside the rowdatabound event)

					//this covers row.Styles as well, as they will appear in the attributes collection 
					//as a single style attribute
					if (row.Attributes.Count > 0)
					{
						foreach (string key in row.Attributes.Keys)
						{
							writer.WriteAttribute(key, row.Attributes[key]);
						}
					}

                    writer.Write(HtmlTextWriter.TagRightChar);
                    writer.Indent++;

                    foreach (TableCell cell in row.Cells)
                    {
                        DataControlFieldCell fieldCell = cell as DataControlFieldCell;
                        if ((fieldCell != null) && (fieldCell.ContainingField != null))
                        {
                            DataControlField field = fieldCell.ContainingField;
                            if (!field.Visible)
                            {
                                cell.Visible = false;
                            }

                            if ((field.ItemStyle != null) && (!String.IsNullOrEmpty(field.ItemStyle.CssClass)))
                            {
                                if (!String.IsNullOrEmpty(cell.CssClass))
                                {
                                    cell.CssClass += " ";
                                }
                                cell.CssClass += field.ItemStyle.CssClass;
                            }
                        }
                        
                        writer.WriteLine();
                        cell.RenderControl(writer);
                    }

                    writer.Indent--;
                    writer.WriteLine();
                    writer.WriteEndTag("tr");
                }
                
                writer.Indent--;
                writer.WriteLine();
                writer.WriteEndTag(tableSection);
            }
        }

        private string GetRowClass(GridView gridView, GridViewRow row)
        {
            string className = "";

            if ((row.RowState & DataControlRowState.Alternate) == DataControlRowState.Alternate)
            {
                className += " AspNet-GridView-Alternate ";
                if (gridView.AlternatingRowStyle != null)
                {
                    className += gridView.AlternatingRowStyle.CssClass;
                }
            }

            if ((row.RowState & DataControlRowState.Edit) == DataControlRowState.Edit)
            {
                className += " AspNet-GridView-Edit ";
                if (gridView.EditRowStyle != null)
                {
                    className += gridView.EditRowStyle.CssClass;
                }
            }

            if ((row.RowState & DataControlRowState.Insert) == DataControlRowState.Insert)
            {
                className += " AspNet-GridView-Insert ";
            }

            if ((row.RowState & DataControlRowState.Selected) == DataControlRowState.Selected)
            {
                className += " AspNet-GridView-Selected ";
                if (gridView.SelectedRowStyle != null)
                {
                    className += gridView.SelectedRowStyle.CssClass;
                }
            }

            return className.Trim();
        }

        private void WritePagerSection(HtmlTextWriter writer, PagerPosition pos)
        {
            GridView gridView = Control as GridView;
            if ((gridView != null) &&
                gridView.AllowPaging &&
                ((gridView.PagerSettings.Position == pos) || (gridView.PagerSettings.Position == PagerPosition.TopAndBottom)))
            {
                Table innerTable = null;
                if ((pos == PagerPosition.Top) &&
                    (gridView.TopPagerRow != null) &&
                    (gridView.TopPagerRow.Cells.Count == 1) &&
                    (gridView.TopPagerRow.Cells[0].Controls.Count == 1) &&
                    typeof(Table).IsAssignableFrom(gridView.TopPagerRow.Cells[0].Controls[0].GetType()))
                {
                    innerTable = gridView.TopPagerRow.Cells[0].Controls[0] as Table;
                }
                else if ((pos == PagerPosition.Bottom) &&
                    (gridView.BottomPagerRow != null) &&
                    (gridView.BottomPagerRow.Cells.Count == 1) &&
                    (gridView.BottomPagerRow.Cells[0].Controls.Count == 1) &&
                    typeof(Table).IsAssignableFrom(gridView.BottomPagerRow.Cells[0].Controls[0].GetType()))
                {
                    innerTable = gridView.BottomPagerRow.Cells[0].Controls[0] as Table;
                }

                if ((innerTable != null) && (innerTable.Rows.Count == 1))
                {
                    string className = "AspNet-GridView-Pagination AspNet-GridView-";
                    className += (pos == PagerPosition.Top) ? "Top " : "Bottom ";
                    if (gridView.PagerStyle != null)
                    {
                        className += gridView.PagerStyle.CssClass;
                    }
                    className = className.Trim();

                    writer.WriteLine();
                    writer.WriteBeginTag("div");
                    writer.WriteAttribute("class", className);
                    writer.Write(HtmlTextWriter.TagRightChar);
                    writer.Indent++;

                    TableRow row = innerTable.Rows[0];
                    foreach (TableCell cell in row.Cells)
                    {
                        foreach (Control ctrl in cell.Controls)
                        {
                            writer.WriteLine();
                            ctrl.RenderControl(writer);
                        }
                    }

                    writer.Indent--;
                    writer.WriteLine();
                    writer.WriteEndTag("div");
                }
            }
        }
    }
}

good one adk.

I want to add a few things I noticed on beta3.0 as well.

first, if gridview has no rows, it should gerneate any table markup at all, (in my case, an empty table screw up the design) so in RenderContents method, check

if (gridView != null && gridView.Rows.Count>0)  instead of doing a simple null check


secondly, I needed to gerneate caption, which was not supported, so in RenderContent again, right above ArrayList rows = new ArrayList();  I added

 if (gridView.Caption != null)
                    {
                        writer.WriteLine();
                        //writer.WriteBeginTag("caption");

                        writer.Write(HtmlTextWriter.TagLeftChar);
                        writer.Write("caption");
                        writer.Write(HtmlTextWriter.TagRightChar);

                        writer.Write(gridView.Caption);

                        writer.WriteEndTag("caption");
                        writer.WriteLine();
                    }

These additions from adk and Liming are excellent, I hope they make it into the next version.  The one with the Header cell classes is critical, and it's actually how I found this thread -- Googling for such a thing.

Some of these items have been included in the final release: table class, row class, and row attributres. 

Header cell classes, ClientID, and caption have not been included yet -- will they make it into the next version?

http://forums.asp.net/thread/1473749.aspx RTM is out, my friend... and it has all of these enhancements in it, including:

GridView
  Support HeaderStyle.CssClass, FooterStyle.CssClass and RowStyle.CssClass.

As far as HeaderStyle CssClass, I think we're talking about two different things.

The HeaderStyle-CssClass can be set in the GridView tag or in the Column definition.  I use HeaderStyle-CssClass in the Coilumn definition, because I want to set the class name on each individual cell, like this: <th class="TheClass" scope="col">.

That does not happen, and in fact the class attribute is not rendered at all when I use the following column definition:

The HeaderStyle-CssClass you are talking about is when you define it as part of the GridView tag, like this:

<asp:GridView ID="GridView1" AutoGenerateColumns="false" GridLines="None" HeaderStyle-CssClass="TheClass" runat="server">

When you do that, instead of individually styling the column headers, it creates <tr class="TheClass">.

I just wanted to add one more modification that I made to the extender, which may be useful to others.  It deviates a little bit from from strict CSS markup, so some people may not like it.

Also, maybe there is a way to do the same thing without the code modifcation?

On my site I need to display several small tables on several pages, both in the page and in user controls.  Thus, the CSS adapters are perfect.  However, one thing I like to do is to set the column widths (percentages) using a style attribute on the <th> tag, rather than using a class.

There are a few reasons.  For one, all the style info for the headers is already defined in the "global" CSS sheet, and the only thing that will be different is the width.  Creating an extra style sheet and incurring the overhead of all the extra class names just to set column widths is not practical, and in my view takes the idea of separation of content and formatting beyond the reasonable.

Plus, if you're talking about semantic coding I believe it is much more descriptive to see <th style="width:20%"> than <th class="total">, when the only thing the "total" class defines is the width.  Also, if the table is being used for its intended purpose -- display of tabular information -- rather than a page layout framework, then the width is something that is device-independent, especially if it is defined as a percentage.

The reason I like defining the widths in the <thead> section, rather than adding to cell classes or styles in the <tbody> is that it provides a very nice, descriptive layout in the code.  As far as web browser rendering, it is the most efficient way to do it, and prevents formatting errors maintainability problems caused by embedding width information into the body cells.

The modification I made was a small change to the code that adk wrote.  I have included the whole code snippet, and put my changes in bold.  (And translated to VB, of course.)

Dim i As Integer = 0

For Each col As DataControlField In gridView.Columns

   If (Not String.IsNullOrEmpty(col.HeaderStyle.CssClass)) Then
      gridView.HeaderRow.Cells(i).CssClass = col.HeaderStyle.CssClass
   End If

   If (col.HeaderStyle.Width <> Nothing) Then
      gridView.HeaderRow.Cells(i).Width = col.HeaderStyle.Width
   End If

   i += 1
Next

By the way, to set the width style on the <th> tags, I use the following Column definition, together with the code modification above.

<

asp:BoundField DataField="Field1" HeaderText="Title" HeaderStyle-Width="19%" />

Hi Russ,

Did my explanation make sense?  Is that something that would be re-considered for inclusion (the ability to individually style header cells)?

I can definitely consider this enhancement for a future rev.  I can't (as I'm sure you understand) modify the current bits.  That means you aren't going to see this show up in a new download of the kit in the predictable future.  So, let's turn our attention to what you and others can do today to achieve your goal.

I need to "talk code" here for a little while.  Unfortunately, we have some readers who prefer C# and some who prefer VB and both sorts have been contributing to this thread.  I'm going illustrate my ideas here with C# but if VB readers need help, please post replies here and I'll whip up the equivalent solution in VB... though I bet most of you can do that translation work with enough patience!

OK, I need folks to dig into the method named WriteRows in App_Code\Adapters\GridViewAdapter.cs.  Look around line 187 in http://www.asp.net/CSSAdapters/srcviewer.aspx?inspect=%2fCSSAdapters%2fApp_Code%2fAdapters%2fGridViewAdapter.cs&notree=true.

You should be able to test field.HeaderStyle to see if it is null.  If it isn't, and if if field.HeaderStyle.CssClass is not null and not empty then you might want to use it rather than the ItemStyle.CssClass depending on the value of tableSection (which is passed in).  If tableSection is "thead" then it makes sense to set up the cell with the HeaderStyle.CssClass if it exists. Since you already have the logic in the code for rendering field.ItemStyle.CssClass I'd recommend adding a few lines like it.  Here is something I wrote in Notepad but haven't tested.  Maybe someone could give it a try...

if (tableSection == "thead")
{
    if ((field.HeaderStyle != null) && (!String.IsNullOrEmpty(field.HeaderStyle.CssClass)))
    {
        if (!String.IsNullOrEmpty(cell.CssClass))
        {
            cell.CssClass += " ";
        }
        cell.CssClass += field.HeaderStyle.CssClass;
    }
}
else
{
    if ((field.ItemStyle != null) && (!String.IsNullOrEmpty(field.ItemStyle.CssClass)))
    {
        if (!String.IsNullOrEmpty(cell.CssClass))
        {
            cell.CssClass += " ";
        }
        cell.CssClass += field.ItemStyle.CssClass;
    }
}

Hi Russ,

Thank you for the response, and I do understand about not being able to promise when certain features will appear.

I tested out your code snippet, and it did work.  However, since my code is in VB, I translated it, and then while I was at it, I added another piece of code to do cell style, in the same manner that you did the row styles.  (In a previous post I had described the need to do inline styles on individual cells.)

Then, I came up with a sleeker way to add CSS classes, and then just went ahead and refactored entire WriteRows() function.  (Pasted below)

I hope you get a chance to check it out, because I think there are some nice improvements here.  It's written in VB, but it is easy to translate to c#, I'd be happy to do it if you'd like.

Private Sub WriteRows(ByVal writer As HtmlTextWriter, ByVal gridView As GridView, ByVal rows As GridViewRowCollection, ByVal tableSection As String)

   If (rows.Count > 0) Then
      writer.WriteLine()
      writer.WriteBeginTag(tableSection)
      writer.Write(HtmlTextWriter.TagRightChar)
      writer.Indent += 1

      For Each row As GridViewRow In rows
         writer.WriteLine()
         writer.WriteBeginTag("tr")

         Dim className As String = GetRowClass(gridView, row)

         If (Not String.IsNullOrEmpty(className)) Then
            writer.WriteAttribute("class", className)
         End If

         'Uncomment the following block of code if you want to add arbitrary attributes.
         For Each key As String In row.Attributes.Keys
            writer.WriteAttribute(key, row.Attributes(key))
         Next

         writer.Write(HtmlTextWriter.TagRightChar)
         writer.Indent += 1

         For Each cell As TableCell In row.Cells
            Dim fieldCell As DataControlFieldCell = cell

            If ((fieldCell IsNot Nothing) AndAlso (fieldCell.ContainingField IsNot Nothing)) Then
               Dim field As DataControlField = fieldCell.ContainingField

               If (Not field.Visible) Then
                  cell.Visible = False
               End If

               Dim style As TableItemStyle

               If (tableSection = "thead") Then
                  style = field.HeaderStyle
               Else
                  style = field.ItemStyle
               End If

               If ((style IsNot Nothing) AndAlso (Not String.IsNullOrEmpty(style.CssClass))) Then
                  cell.CssClass = String.Format("{0} {1}", cell.CssClass, style.CssClass).Trim()
               End If

               'Uncomment the following block of code if you want to add style attributes to individual cells.
               Dim styles As CssStyleCollection = style.GetStyleAttributes(Me.Control)

               For Each strKey As String In styles.Keys
                  cell.Style.Add(strKey, styles.Item(strKey))
               Next

            End If

            writer.WriteLine()
            cell.RenderControl(writer)
         Next

         writer.Indent -= 1
         writer.WriteLine()
         writer.WriteEndTag("tr")
      Next

      writer.Indent -= 1
      writer.WriteLine()
      writer.WriteEndTag(tableSection)
   End If

End Sub

Excellent.  Can you confirm that you are able to get the right classes onto the right elements in your HTML now?  It seems like that is the case but I want to make certain it is so.

The bottom line is that it's important for developers like you to feel like it is possible to tweak the adapters between releases of the kit to quickly overcome deficiencies like this.  That we are able to discuss them and quickly post solutions publicly seems, to me, to be the hallmark of true community involvement/empowerment. I hope you agree.

The code I posted above is completely tested, with both classes and inline styles, in both the HeaderStyle and ItemStyle.

I completely agree with you about the "community thing", and I always love to give back, because I have gotten some of my best and most important code snippets from people posting on forums and blogs.

BTW, I didn't think of it initially, but the code can very simply be extended to apply <tfoot> styles as well, by substituting the following code for the "If...Then" block.  In fact, for completeness, I'd definitely recommend using this one.

If (tableSection = "thead") Then
   style = field.HeaderStyle
ElseIf (tableSection = "tfoot") Then
   style = field.FooterStyle
Else
   style = field.ItemStyle
End If

Thanks so much for your work on this - It's excellent.

C# code:

////if ((field.ItemStyle != null) && (!String.IsNullOrEmpty(field.ItemStyle.CssClass))) {
////  if (!String.IsNullOrEmpty(cell.CssClass)) {
////    cell.CssClass += " ";
////  }
////  cell.CssClass += field.ItemStyle.CssClass;
////}

//Updated from http://forums.asp.net/thread/1478997.aspx
TableItemStyle style;
if (tableSection == "thead") {
	style = field.HeaderStyle;
} else if (tableSection == "tfoot") {
	style = field.FooterStyle;
} else {
	style = field.ItemStyle;
}
if ((style != null) && (!String.IsNullOrEmpty(style.CssClass))) {
	cell.CssClass = String.Format("{0} {1}", cell.CssClass, style.CssClass).Trim();
}
//Uncomment the following block of code if you want to add style attributes to individual cells.
CssStyleCollection styles = style.GetStyleAttributes(this.Control);

foreach (String strKey in styles.Keys) {
	cell.Style.Add(strKey, styles[strKey]);
}