I am trying to add widget to an ASP.Net web form. I want to achieve this dynamically like in a scenario where user wants to add widget in the form. So i placed an HTML button to achieve add widget functionality. This button fires a javascript function.
So i tried to implement it in the same way as mentioned above. But i failed to do it completely.The widget does not stay permanently it wanishes when the page is refreshed.And all the properties of widget are not retained. Here follows the code.





<%@ Page Language="C#" %>


<%@ Import Namespace="Coolite.Utilities" %>


<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


protected void Page_Load(object sender, EventArgs e)


{


if (!Ext.IsAjaxRequest)


{


string text = @"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.";


this.ScriptManager1.RegisterClientScriptBlock("text", string.Format("var text=\"{0}\";", text));


foreach (Portlet portlet in ControlUtils.FindControls<Portlet>(this.Page))


{


if (!portlet.ID.Equals("Portlet1"))


{


portlet.Html = "={text}";


}


}


}


}


</script>


<html xmlns="http://www.w3.org/1999/xhtml">


<head runat="server">


<title>Deluxe Portal in TabPanel - Coolite Toolkit Example</title>


<link href="CooliteStyle.css" type="text/css" rel="stylesheet"/>


<ext:ScriptContainer ID="ScriptContainer1" runat="server" />





<script type="text/javascript" language="javascript">








function AddWidget()


{





//var ToAppend = &#100;ocument.getElementById("AnchorLayout2").firstChild.cloneNode(true);


//alert(&#100;ocument.getElementById("AnchorLayout2").firstChild.firstChild.firstChild.innerHTML);


&#100;ocument.getElementById("PortalColumn2").lastChild.appendChild(&#100;ocument.getElementById("PortalColumn2").firstChild.cloneNode(true));





//&#100;ocument.getElementById("PortalColumn2").lastChild.appendChild(ToAppend.innerHTML);





}





</script>





</head>


<body >





<form id="form1" runat="server">


<ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" Theme="Slate" />


<ext:ViewPort ID="ViewPort1" runat="server" StyleSpec="background-color: transparent;">


<Body>


<ext:BorderLayout runat="server">


<North>


<ext:Panel 


ID="pnlNorth" 


runat="server" 


Height="80" 


Border="false" 


Header="false" 


BodyStyle="background-color: #000000;">


<Body>


<asp:Image ImageAlign="Middle" BackColor="Black" runat="server" ImageUrl="https://channelone/sites/Shared%20Workspace/NexGen/Shared%20Documents/NexGen/2_Project%20Management/POC/Usablity/C20Logo.jpg" />


&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp


<button runat="server" name="Mera naam Joker!" value="Joker!" title="Click It!" onclick ="AddWidget()">AddWidget!</button>





<!-- _https://channelone/sites/Shared%20Workspace/NexGen/Shared%20Documents/NexGen/2_Project%20Management/POC/Usablity/C20Logo.jpg -->


<!-- <div id="settingsWrapper">


<div id="settings">


<ul>


<li id="itemAddContent"><a href="#">Add content</a></li>


<li id="itemComments"><a href="#">Comments</a></li>


<li id="itemActivities"><a href="#">Activities</a></li>


<li id="itemContacts"><a href="#">Contacts</a></li>


</ul>







 -->


<div id="pageTitle" style ="background-color:Black">Your page title here



</Body>


</ext:Panel>


</North>


<West 


Collapsible="true"


Split="true" 


MinWidth="175" 


MaxWidth="400" 


MarginsSummary="31 0 5 5" 


CMarginsSummary="31 5 5 5">


<ext:Panel 


runat="server" 


Title="Settings" 


Width="200" 


ID="pnlSettings"


BodyStyle="background-color: #FFFBB1;">


<Body>


<ext:Accordion runat="server" Animate="true">


<ext:Panel 


runat="server" 


Border="false" 


Collapsed="True" 


Icon="PageWhiteCopy"


AutoScroll="true"


Title="Content"


Html="={text}"


BodyStyle="padding:6px;"


/>


<ext:Panel 


runat="server" 


Border="false" 


Collapsed="true" 


Icon="Star" 


AutoScroll="true"


Title="Activities" 


Html="={text}"


BodyStyle="padding:6px;"


/>


<ext:Panel ID="Panel1" 


runat="server" 


Border="false" 


Collapsed="true" 


Icon="Group" 


AutoScroll="true"


Title="Contacts" 


Html="={text}"


BodyStyle="padding:6px;"


/> 


</ext:Accordion>


</Body>


</ext:Panel>


</West>


<Center MarginsSummary="5 5 5 0">


<ext:TabPanel 


ID="TabPanel1" 


runat="server" 


Title="TabPanel" 


ActiveTabIndex="0" 


Border="false" 


BodyStyle="background-color: #FFFDD1; border: 1px solid #AABBCC; border-top: none;">


<Tabs>


<ext:Tab ID="Tab1" runat="server" Title="Internet" Icon="Vcard" BodyStyle="background-color: transparent;">


<Body>


<ext:FitLayout ID="FitLayout1" runat="server">


<ext:Portal ID="Portal1" runat="server" Border="false" BodyStyle="background-color: transparent;">


<Body>


<ext:ColumnLayout ID="ColumnLayout1" runat="server">


<ext:LayoutColumn ColumnWidth=".33">


<ext:PortalColumn 


ID="PortalColumn1" 


runat="server" 


StyleSpec="padding:10px 0 10px 10px">


<Body>


<ext:AnchorLayout ID="AnchorLayout1" runat="server">


<ext:Anchor>


<ext:Portlet 


ID="Portlet1" 


Title="Google Search" 


runat="server" 


Height="450"


BodyStyle="padding:0;"


>


<AutoLoad Url="http://www.google.com/" Mode="IFrame"/>


</ext:Portlet>


</ext:Anchor>


</ext:AnchorLayout>


</Body>


</ext:PortalColumn>


</ext:LayoutColumn>


<ext:LayoutColumn ColumnWidth=".33">


<ext:PortalColumn 


ID="PortalColumn2" 


runat="server" 


StyleSpec="padding:10px 0 10px 10px">


<Body> 


<ext:AnchorLayout ID="AnchorLayout2" runat="server">


<ext:Anchor>


<ext:Portlet Title="Panel 2" runat="server" /> 


</ext:Anchor>


<ext:Anchor>


<ext:Portlet ID="Portlet3" Title="Another Panel 2" runat="server" >





</ext:Portlet>


</ext:Anchor> 


</ext:AnchorLayout> 


</Body>


</ext:PortalColumn>


</ext:LayoutColumn>


<ext:LayoutColumn ColumnWidth=".33">


<ext:PortalColumn 


ID="PortalColumn3" 


runat="server" 


StyleSpec="padding:10px">


<Body>


<ext:AnchorLayout ID="AnchorLayout3" runat="server">


<ext:Anchor>


<ext:Portlet ID="Portlet4" Title="Panel 3" runat="server" />


</ext:Anchor>


<ext:Anchor>


<ext:Portlet ID="Portlet5" Title="Another Panel 3" runat="server" />


</ext:Anchor>


</ext:AnchorLayout>


</Body>


</ext:PortalColumn>


</ext:LayoutColumn>


</ext:ColumnLayout> 


</Body>


</ext:Portal>


</ext:FitLayout>


</Body>


</ext:Tab> 


</Tabs>


</ext:TabPanel> 


</Center>


</ext:BorderLayout>


</Body>


</ext:ViewPort>


</form>


</body>


</html>