Adding Widget in Coolite Example Deluxe.
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.
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 = document.getElementById("AnchorLayout2").firstChild.cloneNode(true);
//alert(document.getElementById("AnchorLayout2").firstChild.firstChild.firstChild.innerHTML);
document.getElementById("PortalColumn2").lastChild.appendChild(document.getElementById("PortalColumn2").firstChild.cloneNode(true));
//document.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" />
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&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>
