PDA

View Full Version : Dynamic Accordion Items



danr
Jul 23, 2008, 11:10 AM
Hi,
Is there any way to dynamically create templated content inside accordion object? IŽd like to get functionality like in code below:




<ext:Accordion ID="accMenu" runat="server" Animate="true">
<asp:Repeater ID="rptItems" runat="server">
<ItemTemplate>
<ext:Panel ID="pModuleMenu" runat="server" Title="Navigation" Border="false" BodyStyle="padding:6px;">
<Content>
<asp:Repeater ID="rptSubItems" runat="server">
<ItemTemplate>
<a href="<%# url %>"><%# name %></a>
</ItemTemplate>
</asp:Repeater>
</Content>
</ext:Panel>
</ItemTemplate>
</asp:Repeater>
</ext:Accordion>



thanks

geoffrey.mcgill
Jul 23, 2008, 11:59 AM
Hi danr,

Currently this is not possible, although I'm really intrigued by the idea of nesting a Repeater in an Accordion as demonstrated in your sample code.

Theoretically we should be able to enable the functionality. I'll see what I can do. This functionality would fit nicely wherever there's a Collection property.

Thanks for posting the sample code! Mocking up the code to demonstrate the desired syntax is very helpful.

sbarne3
Jan 04, 2009, 5:59 PM
Any update on this? I need to be able to do something like this:



<ext:BorderLayout ID="BorderLayout1" runat="server">
<West>
<ext:Panel runat="server">
<asp:SiteMapDataSource ID="srcBuckets" runat="server" ShowStartingNode="False" />
<ext:Accordion ID="Accordion1" runat="server">
<asp:Repeater ID="rpt" runat="server" DataSourceID="srcBuckets">
<ItemTemplate>
<ext:TreePanel ID="TreePanel1" runat="server" Title='<%# Eval("Title") %>' RootVisible="false">
<Root>
<ext:TreeNode Text="Root">
<Nodes>
<asp:Repeater runat="server" DataSource='<%# CType(Container.DataItem, SiteMapNode).ChildNodes %>'>
<ext:TreeNode Text='<%# Eval("Title") %>' Icon='<%# Eval("Description") %>' Href='<%# Eval("Url") %>' />
</asp:Repeater>
</Nodes>
</ext:TreeNode>
</Root>
<Listeners>
<Click Handler="if(node.attributes.href){e.stopEvent();loadPage(#{ CenterPanel}, node);}" />
</Listeners>
</ext:TreePanel>
</ItemTemplate>
</asp:Repeater>
</ext:Accordion>
</ext:Panel>
</West>
<Center>
<ext:TabPanel ID="CenterPanel" runat="server">
</ext:TabPanel>
</Center>
</ext:BorderLayout>


keep in mind that I am pretty new to all of this, so my mock up code might not be exactly right, but I think you can get the idea.

thanks for a great product by the way!
Steven

sbarne3
Jan 09, 2009, 9:13 PM
Well, I ended up going a different direction and using codebehind to do what I wanted. Here's what I ended up with.



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var loadPage = function(tabPanel, node) {
var tab = tabPanel.getItem(node.id);
if (!tab) {
tab = tabPanel.add({
id: node.id,
title: node.text,
closable: true,
autoLoad: {
showMask: true,
url: node.attributes.href,
mode: 'iframe',
maskMsg: 'Loading ' + node.attributes.href + '...'
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager2" runat="server" />
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North Collapsible="True" Split="True">
<ext:Panel ID="Panel1" runat="server" Height="100" Title="North">
<Body>
</Body>
</ext:Panel>
</North>
<East Collapsible="true" Split="true">
<ext:Panel ID="Panel2" runat="server" Title="East" Width="175">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Border="false" TabPosition="Bottom"
Title="Title">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1">
<Body>
</Body>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Title="Tab 2">
<Body>
</Body>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Body>
</ext:Panel>
</East>
<South Collapsible="true" Split="true">
<ext:Panel ID="Panel3" runat="server" Height="100" Title="South">
<Body>
</Body>
</ext:Panel>
</South>
<West Collapsible="true" Split="true">
<ext:Panel ID="pnlWest" runat="server" Title="West" Width="175">
</ext:Panel>
</West>
<Center>
<ext:Panel ID="CenterPanel" runat="server" Title="Center">
<Body>
<ext:FitLayout ID="FitLayout2" runat="server">
<ext:TabPanel ID="Pages" runat="server" ActiveTabIndex="0" Border="false" Title="Center">
<Tabs>
<ext:Tab ID="Tab3" runat="server" Closable="true" Title="Tab 1">
<Body>
</Body>
</ext:Tab>
<ext:Tab ID="Tab4" runat="server" Title="Tab 2">
<Body>
</Body>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Body>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
</form>
</body>
</html>



protected void Page_Load(object sender, EventArgs e)
{

SiteMapNode siteMapRoot = SiteMap.RootNode;
Accordion accordion = new Accordion();
SiteMapNodeCollection children = siteMapRoot.ChildNodes;
if (children != null &amp;&amp; children.Count > 0)
{
foreach (SiteMapNode mapNode in siteMapRoot.ChildNodes)
{
accordion.Items.Add(this.CreateTree(mapNode));
}
}
pnlWest.BodyControls.Add(accordion);
}

private TreePanel CreateTree (SiteMapNode siteMapNode)
{
TreePanel tree = new TreePanel();
tree.Title = siteMapNode.Title;
tree.RootVisible = false;
tree.Listeners.Click.Handler = "if(node.attributes.href){e.stopEvent();loadPage(#{ Pages}, node);}";
Coolite.Ext.Web.TreeNode root = new Coolite.Ext.Web.TreeNode();
root.NodeID = "root";
tree.Root.Add(root);
SiteMapNodeCollection children = siteMapNode.ChildNodes;
if (children != null &amp;&amp; children.Count > 0)
{
foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
{
Coolite.Ext.Web.TreeNode node1 = new Coolite.Ext.Web.TreeNode();
node1.NodeID = mapNode.Key;
node1.Text = mapNode.Title;
node1.Icon = (Icon)Enum.Parse(typeof(Icon), mapNode.Description);
node1.Href = mapNode.Url;
root.Nodes.Add(node1);
}
}
return tree;
}