PDA

View Full Version : [CLOSED] How to add Accordian within code with Viewport in master page



stevejebson
Jul 14, 2008, 2:46 PM
Hi,

Like everyone else i've read posting for the 1st time i REALLY DO have to tip my hat to you guys, i tried to implement extjs into a .net app and spent days upon days trying to get it to work. This is looking really hopeful.

I'm a bit of a beginner in .net as well !

Ok, i've set up the standard viewport in a master page and i'd like to add an accordian panel to the East panel, i've had a look at the complex c# layout from geoffrey but this is creating the whole viewport within th code and i just want to add some content to the existing viewport.

Steve

geoffrey.mcgill
Jul 15, 2008, 8:59 AM
Hi Steve,

Thanks for the feedback!

You can add a Layout control inside a <asp:Content> control. The following sample demonstrates.

First add the <asp:ContentPlaceHolder> control inside the <East> region of the ViewPort (MasterPage).

Example


<East Collapsible="true" Split="true">

<ext:Panel ID="Panel1" runat="server" Title="East" Width="200">

<Content>

<asp:ContentPlaceHolder id="phEast" runat="server" />

</Content>

</ext:Panel>

</East>

Then add the <ext:Accordion> control as the first (and only) control directly inside the <asp:Content> control.

Example


<asp:Content ID="Content2" ContentPlaceHolderID="phEast" Runat="Server">
<ext:Accordion ID="Accordion2" runat="server" Animate="true">
<ext:Panel ID="Panel1" runat="server" Border="false" Collapsed="true" Title="Item 1" />
<ext:Panel ID="Panel4" runat="server" Border="false" Collapsed="true" Title="Item 2" />
</ext:Accordion>
</asp:Content>

I hope this helps solve the problem. Keep us updated with your progress and feel free to contact us if you have any questions or comments and we'll do our best to help out.

stevejebson
Jul 15, 2008, 9:13 AM
hi geoffrey,

thanks for warm response, i'm looking forward to getting this working and proving it so we can get the license, don't think i'm to far away now.

What i was looking for was the ability to add the panels to the accordian in the code behind rather than defining them on the page if that makes sense ? So in your example i'd be looking to add Panel1 and Panel4 in the code behind.

thanks...

geoffrey.mcgill
Jul 15, 2008, 9:37 AM
Hi Steve,

From the code-behind, you can create and add <ext:Panel> controls to the .Items Collection of an empty Accordion control.

In the <asp:Content> control, add an empty <ext:Accordion> control.

Example


<asp:Content ID="Content2" ContentPlaceHolderID="phEast" Runat="Server">
<ext:Accordion ID="Accordion2" runat="server" Animate="true" />
</asp:Content>

Then in the Page_Load event (or earlier), create new Panel controls and add to the .Items.

Example


protected void Page_Load(object sender, EventArgs e)
{
Coolite.Ext.Web.Panel p1 = new Coolite.Ext.Web.Panel();
p1.Title = "Item 1";
p1.Collapsed = true;
p1.Border = false;

Coolite.Ext.Web.Panel p2 = new Coolite.Ext.Web.Panel();
p2.Title = "Item 2";
p2.Collapsed = true;
p2.Border = false;

this.Accordion2.Items.Add(p1);
this.Accordion2.Items.Add(p2);
}

Hope this helps.

stevejebson
Jul 15, 2008, 6:37 PM
Thanks very much Geoffrey, that worked a treat

stevejebson
Jul 17, 2008, 4:50 PM
i wasn't sure if this was a new question or not, after deiberation i determined it wasn't ;-)

Is it possible to add an Accordian within an Accordian ?

geoffrey.mcgill
Jul 17, 2008, 5:09 PM
Hi Steve,

You can nest an unlimited number of Containers and Layouts.

The only thing you need to remember is that a Layout must be added to a Container (i.e. Panel, Window, Tab or ViewPort).

Container -> Layout -> Container -> Layout

To nest another Accordion within 'p1' above, just add to another Accordion Control to the ContentControls Collection of 'p1'. Then add more Panels to your new Accordion.

Hope this helps.

stevejebson
Jul 19, 2008, 6:59 AM
 now this appears to be turning into a bit of a mission but i think i'm learning some useful stuff here so thanks for your patience...

i've managed to get a simple accordian panel within another, thanks for that Geoffrey, now i'm trying to put it into the real world, i'm looking to add upto 10 items per accordian panel in a loop. 


I'm not sure if i need to know how to remove items from the collection of items in parentAccordian or if i need to rethink my code structure ?? I've commented the area where i think i should be looking with.... // BUT HOW ???




        int i = 0;
        bool bPanelParentRequired=false;


        Coolite.Ext.Web.Panel parentPanel = new Coolite.Ext.Web.Panel();
        parentPanel.Title = "Parent 1 to ";
        parentPanel.Border = false;


        Coolite.Ext.Web.Accordion parentAccordian = new Coolite.Ext.Web.Accordion();




        if (cm.CompanyIDContractList.Count > 10)
        {
            bPanelParentRequired = true;
        }


        foreach (Contract cn in cm.CompanyIDContractList)
        {
            // build a panel with data
            Coolite.Ext.Web.Panel p1 = new Coolite.Ext.Web.Panel();
            p1.Title = cn.ContractNumber.ToString();
            p1.Collapsed = true;
            p1.Border = false;
            string strS = "<a href='browsecoolite.aspx?Entity=Contract&amp;Id=" + cn.Id.ToString() + "'>view Contract details</a><br/>";
            p1.Html = strS.ToString();




            if (bPanelParentRequired)
            {
                if (i > 9)
                {
                    // close off parent panel and add to accordian
                    parentPanel.Title += cn.ContractNumber.ToString();
                    this.Accordion2.Items.Add(parentPanel);


                    // initialise parent panel
                    parentPanel.Title = "Parent " + cn.ContractNumber.ToString() + " to ";
                    parentPanel.Border = false;
                    
                    // initialise or remove items from parent accordian
                    // BUT HOW ????


                    i = 0;
                }
                parentAccordian.Items.Add(p1);
                i += 1;
            }
            else
            {
                this.Accordion2.Items.Add(p1);
            }
        }