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

• • Reply
  

  adk

  Member

  30 Points

  6 Posts

  GridViewAdapter Beta 3.0 with added support for CssClass, ClientID, HeaderStyle-CssClass, row.Css...

  Nov 08, 2006 05:49 PM|LINK

  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:GridView>: CssClass,  ID

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

   

   

  "css friendly adapter" GridViewAdapter GridView GridViewRow.Styles GridViewRow.CssClass GridViewRow.Attributes "HeaderStyle-CssClass"

• • Reply
  

  Liming

  Contributor

  5367 Points

  1076 Posts

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

  Nov 09, 2006 10:39 AM|LINK

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

   

  Liming Xu
  Jumptree ASP.NET 2.0 Project Management, Bug Tracking & Task Management - Encourages collaboration, provides transparency and comes with metrics.
  
  JQuery Gantt, JQuery Calendar, SiteMinder/AD Authentication, Customizable Languages, Custom Fields, Lucene.Net Search, and more
• • Reply
  

  speednet

  Member

  380 Points

  171 Posts

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

  Nov 28, 2006 11:21 AM|LINK

  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://www.speednet.biz/
  
• • Reply
  

  Russ Helfand

  Contributor

  3304 Points

  744 Posts

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

  Nov 28, 2006 11:53 AM|LINK

  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.

  Russ Helfand
  Groovybits.com
• • Reply
  

  speednet

  Member

  380 Points

  171 Posts

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

  Nov 28, 2006 01:56 PM|LINK

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

  http://www.speednet.biz/
  
• • Reply
  

  speednet

  Member

  380 Points

  171 Posts

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

  Nov 28, 2006 01:58 PM|LINK

  (Sorry about the errors, this thing is not letting me edit my post)
  http://www.speednet.biz/
  
• • Reply
  

  speednet

  Member

  380 Points

  171 Posts

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

  Nov 28, 2006 02:22 PM|LINK

  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

   
  http://www.speednet.biz/
  
• • Reply
  

  speednet

  Member

  380 Points

  171 Posts

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

  Nov 28, 2006 02:26 PM|LINK

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

  http://www.speednet.biz/
  
• • Reply
  

  speednet

  Member

  380 Points

  171 Posts

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

  Nov 29, 2006 10:48 AM|LINK

  Hi Russ,

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

  http://www.speednet.biz/
  
• • Reply
  

  Russ Helfand

  Contributor

  3304 Points

  744 Posts

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

  Nov 29, 2006 01:40 PM|LINK

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

   

  Russ Helfand
  Groovybits.com