A while ago I was working on Web Parts and their personalization futures so I worked with custom editors and editor zone. As you know, editor zone is displayed at a fixed location. But for users it is really handy to have editor zone on top of the each corresponding webpart, please check your igoogle page and try to edit one of the widgets. You will see what I mean.
So at the beginning I searched for injecting editor zone into webpart. But after really complicated and dirty code, it didn’t work efficient. Later on I made a little investigation on rendered HTML page with IE Developer Toolbar. I found out that every webpart has a table identified as “WebPart_” + WebPartID. So if we have an HTML table than it is a piece of cake to inject a div (editor zone) into it with javascript.
Here is the javascript that positions the editor zone on the selected webpart.
<script language="javascript" type="text/javascript">
function PositionEditor(part) {
if (document.getElementById('EditorZone2') != null) {
var tr = document.getElementById('WebPart_' + part).insertRow(1);
var td = tr.insertCell();
td.appendChild(document.getElementById( 'EditorZone2'));
}
}
</script>
And for sure, we need to register that function call on the page render as fallows:
protected void Page_Prerender(object sender, EventArgs e)
{
if (WebPartManager1.SelectedWebPart != null)
ScriptManager.RegisterStartupScript(this, typeof(Page), Guid.NewGuid().ToString(), "PositionEditor('" + WebPartManager1.SelectedWebPart.ID + "');", true);
}
That’s it.
