Skip to content
June 29, 2009 / kiranpatils

Tableless WebParts and WebPartZones

Challenge:

Before couple of days, I was working on WebParts and Webpartzones..Obviously for creating personalized portal for users. I finished it and now it is going for getting some cosmetic touch[CSS :)]..But we found that WebPart is rendered as TABLE.. But we wanted to render it as <DIV>…I tried the whole web. i found so many ways like

1.control adapters — Not a 100% Solution😦

2. http://eksith.wordpress.com/2008/06/26/tableless-webparts/ — I was unable to implement it for me😦 — But thanks from his comment part – i found the solution from there only.

Before looking at solution let us dig more how webaprts works;

When I add a WebPartZone on my page, this control will rendered using <table>
like this :

<table cellspacing="0" cellpadding="0" border="0" id="WebPartZone1">
<tr>
<td style="height: 100%;">
<table cellspacing="0" cellpadding="2" border="0" style="width:
 100%; height: 100%;">
<tr>
<td style="height: 100%;"></td>
</tr>
</table>
</td>
</tr>
</table>

and then I add a label as a webpart we will see the source code like this

<table cellspacing="0" cellpadding="0" border="0" id="WebPartZone1">
<tr>
<td style="height: 100%;">
<table cellspacing="0" cellpadding="2" border="0" style="width:
 100%; height: 100%;">
<tr>
<td>
<table cellspacing="0"
 cellpadding="2" border="0" id="WebPart_gwpLabel1"
 style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0"
 border="0" style="width: 100%;">
<tr>
<td id="WebPartTitle_gwpLabel1"
 style="width: 100%; white-space: nowrap;">
 <span
 title="Untitled">Untitled</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
 <span
 id="WebPartManager1_gwpLabel1_Label1">Hello World</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0; height: 100%;"></td>
</tr>
</table>
</td>
</tr>
</table>

As you can see that Webpart — Label is placed under <td>

I am looking for something like this:

</div>
<div>
<div id="WebPartZone1">
<div id="WebPart_gwpstuff1">
<div id="WebPart_gwpstuff1">
<div>
 <span>Untitled</span></div>
<div>
<div>
<span id="WebPartManager1_gwpLabel1_Label1">Hello World</span></div>
</div>
</div>
</div>
</div>
</div>
<div>

Solution:

After investing so much of my time..i found something which works 100% for me…I hope it will work for you also..

It is here :

http://www.coderesearchcenter.com/post/TFRPortal-CSS-friendly-web-parts.aspx

Thanks/hats off to Jeff for such a nice piece of work..

Above one will not work with FireFox but it has steps how you can use the control within your application..And for firefox he only fixed the problem —

http://www.coderesearchcenter.com/post/TFRPortal-is-now-FireFox-friendly.aspx

So just grab it with source code and enjoy!! — Pls don’t forget to say thanks to Jeff for such a brilliant work!!

I have modified Jeff’s code for CustomVerbs — other than that it works like a charm!!

Hope this helps….

Links :

http://www.coderesearchcenter.com/post/TFRPortal-is-now-FireFox-friendly.aspx

http://forums.asp.net/t/987744.aspx?PageIndex=1

http://eksith.wordpress.com/2008/06/26/tableless-webparts/

3 Comments

Leave a Comment
  1. Simon Hazelton / Oct 18 2009 2:51 pm

    I’m trying to get this solution working in C#. I haven’t managed to get rid of the table around the webpart itself, nor managed to get the drag and drop working.

    Is there anywhere I can get more information on this?

    • kiranpatils / Nov 1 2009 5:41 pm

      Hello there,

      I would suggest directly use TFR.Web library it works really well. If you want to know how it works you can also get source code.

      HTH

      -Kiran

  2. Chris Schnick / Mar 16 2016 5:33 pm

    The links to your 100% solution at coderesearchcenter.com are dead. Do you happen to have the solution available to share directly? Thanks, Chris

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: