CSS Friendly Control Adapters

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

Puhfista — Fri, 23 Feb 2007 17:57:15 GMT

My EmptyDataTemplate/EmptyDataText doesn't seem to work with the new Gridview either. Any chance of that being implemented in new releases?

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

Christopher_G_Lewis — Fri, 22 Dec 2006 17:01:11 GMT

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]);
}

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

speednet — Wed, 29 Nov 2006 17:15:53 GMT

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

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

speednet — Wed, 29 Nov 2006 17:12:07 GMT

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.

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

Russ Helfand — Wed, 29 Nov 2006 17:03:57 GMT

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.

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

speednet — Wed, 29 Nov 2006 16:36:39 GMT

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

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

Russ Helfand — Wed, 29 Nov 2006 14:40:11 GMT

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;
    }
}

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

speednet — Wed, 29 Nov 2006 11:48:49 GMT

Hi Russ,

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

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

speednet — Tue, 28 Nov 2006 15:26:20 GMT

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%" />

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

speednet — Tue, 28 Nov 2006 15:22:32 GMT

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

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

speednet — Tue, 28 Nov 2006 14:58:11 GMT

(Sorry about the errors, this thing is not letting me edit my post)

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

speednet — Tue, 28 Nov 2006 14:56:45 GMT

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:

<

asp:BoundField DataField="Field1" HeaderText="Title" HeaderStyle-CssClass="TheClass" />

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">.

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

Russ Helfand — Tue, 28 Nov 2006 12:53:29 GMT

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.

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

speednet — Tue, 28 Nov 2006 12:21:53 GMT

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?

Re: GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.CssClass, row.Attributes

Liming — Thu, 09 Nov 2006 11:39:20 GMT

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();
                    }