Web developers wiki ASP.NET Sitecore Sharepoint Kentico by Evident Interactive

CSS Friendly Control Adapters

Modified: 2008/12/03 19:16 by r.ernst - Categorized as: ASP.NET, Csharp, Front-end
Links:
- http://www.asp.net/CSSAdapters
- http://www.codeplex.com/cssfriendly


Change the HTML markup produced by ASP.NET controls rather than having to invent new controls

1. Example produced HTML code (view source) GridView control
< div >
< table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;" >
< tr >
< th scope="col">FirstName
< th scope="col">LastName
< th scope="col">BackOrFront
< /tr >
< tr >
< td>Arjan
< td>Pot
< td>Backender
< /tr >
< tr >
< td>Leonard
< td>Eshuis
< td>Fronteer
< /tr >
< /table >
< /div >


2. Example produced HTML code GridView with CSS Friendly Adapter
< div class="PrettyGridView" id="GridView1" >
< div class="AspNet-GridView" >
< table cellpadding="0" cellspacing="0" summary="" >
< thead >
< tr >
< th scope="col">FirstName
< th scope="col">LastName
< th scope="col">BackOrFront
< /tr >
< /thead >
< tbody >
< tr >
< td>Arjan
< td>Pot
< td>Backender
< /tr >
< tr class="AspNet-GridView-Alternate" >
< td>Leonard
< td>Eshuis
< td>Fronteer
< /tr >
< /tbody >
< /table >
< /div >
< /div >


See: http://www.asp.net/CSSAdapters for more examples

You can download pre-built CSS Friendly Control Adapaters on http://www.codeplex.com/cssfriendly for use in your webproject or create your own adapters

Pre-built CSS Friendly Control Adapaters

When an ASP.NET Web control renders itself, it stops and says:
Wait, do I have an adapter that I should be using?

Whether or not a control adapter is used depends on the settings in the CSSFriendlyAdapters.Browser-file.

CSSFriendlyAdapters.Browser-file
< browsers >
< browser refID="Default" >
< controlAdapters >
< adapter controlType="System.Web.UI.WebControls.GridView"
adapterType="CSSFriendly.GridViewAdapter" / >
< /controlAdapters >
< /browser >
< /browsers >


Modify or create an Adapter

public class GridViewAdapter : System.Web.UI.WebControls.Adapters.WebControlAdapter
A control adapter is implemented as a class that derives from the ControlAdapter class and has important rendering-related methods, like
- BeginRender()
- EndRender()
- RenderContents()

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");
writer.WriteAttribute("cellpadding", "0");
writer.WriteAttribute("cellspacing", "0");
writer.WriteAttribute("summary", Control.ToolTip);

if (!String.IsNullOrEmpty(gridView.CssClass))
{
writer.WriteAttribute("class", gridView.CssClass);
}

 © Evident Interactive BV