What's New?

Dynamic Accordion Items

  1. #1
    Jul 23, 2008, 11:10 AM

    Dynamic Accordion Items



    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
  2. #2
    Jul 23, 2008, 11:59 AM

    RE: Dynamic Accordion Items

    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.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jan 04, 2009, 5:59 PM

    RE: Dynamic Accordion Items

    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
  4. #4
    Jan 09, 2009, 9:13 PM

    RE: Dynamic Accordion Items



    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;
    }

Similar Threads

  1. Dynamic HTML Content in Accordion Control
    By craig2005 in forum 1.x Help
    Replies: 22
    Last Post: Jan 02, 2011, 10:33 AM
  2. Panel in MasterPage, Dynamic generate Accordion in Panel and Save state for this Colapse and expand in Session?
    By netcooliteuser in forum 1.x Help
    Replies: 2
    Last Post: Dec 28, 2010, 9:47 PM
  3. Expand all panel items in accordion layout
    By DavidS in forum 1.x Help
    Replies: 4
    Last Post: Nov 25, 2010, 6:24 AM
  4. MultiSelect - Dynamic Set Items?
    By Zhivko in forum 1.x Help
    Replies: 1
    Last Post: Apr 15, 2010, 8:11 PM
  5. MenuPanel dynamic items add
    By yarlenvas in forum 1.x Help
    Replies: 3
    Last Post: Mar 11, 2009, 2:30 AM

Posting Permissions