adding dynamic panes and content to an accordian control

Last post 07-31-2007 10:33 AM by Angarth. 3 replies.

Sort Posts:

  • adding dynamic panes and content to an accordian control

    03-30-2007, 2:39 PM
    • Member
      538 point Member
    • bryankia
    • Member since 12-30-2002, 10:00 AM
    • Tulsa
    • Posts 125

    What I want to do is return my data and then add a new pane for each row of data.  Then I want to add the info to the Header of the pane.  Once a pane is selected then I want to add detail info to the pane.  If need be I can fill all the pane content all at once.

     I have the code below but I need some cool way to create the templates.  Any help would be greatly appreciated.

     

    AjaxControlToolkit.

    AccordionPane ap = new AjaxControlToolkit.AccordionPane();

    ap.Header =

    new MyTemplateBuilder("<div>Header</div>");

    ap.Content =

    new MyTemplateBuilder("<div>content</div>");

    AjaxAccordion.Panes.Add(ap);

  • Re: adding dynamic panes and content to an accordian control

    04-02-2007, 9:17 AM
    • Member
      538 point Member
    • bryankia
    • Member since 12-30-2002, 10:00 AM
    • Tulsa
    • Posts 125

    Any help would be great here..

     

    I did fail to include the code for MyTemplateBuilder.  I have copied it below.

     

    public

    class MyTemplateBuilder:TemplateControl ,ITemplate

    {

    private string _template;

    public MyTemplateBuilder(string template)

    {

    this._template = template;

    }

    public void InstantiateIn(Control container)

    {

    LiteralControl lc = new LiteralControl(this._template);

    container.Controls.Add(lc);

    }

    }

  • Re: adding dynamic panes and content to an accordian control

    07-27-2007, 4:53 PM
    • Member
      6 point Member
    • Angarth
    • Member since 07-26-2007, 1:09 PM
    • Posts 3

    bryankia:

    What I want to do is return my data and then add a new pane for each row of data.  Then I want to add the info to the Header of the pane.  Once a pane is selected then I want to add detail info to the pane.  If need be I can fill all the pane content all at once.

     

     

    I'm interested in this too... have you had any luck? 

  • Re: adding dynamic panes and content to an accordian control

    07-31-2007, 10:33 AM
    • Member
      6 point Member
    • Angarth
    • Member since 07-26-2007, 1:09 PM
    • Posts 3

    I figured this out... here's what I used 

     

    test.aspx 

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Accordion Dynamic Content Update Text</title>
    <style>
    .accordionHeader
    {
        border: 1px solid #2F4F4F;
        color: white;
        background-color: #00688B;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
    }
    
    .accordionHeaderSelected
    {
        border: 1px solid #2F4F4F;
        color: white;
        background-color: #2290AD;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
    }
    
    .accordionContent
    {
        background-color: #B4CDCD;
        border: 1px dashed #2F4F4F;
        border-top: none;
        padding: 5px;
        padding-top: 10px;
    }
    </style>
    </head>
    <body>
        <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true"  runat="Server" ID="ToolkitScriptManager1" />
        <div>
    
        <ajaxToolkit:Accordion id="MyAccordion" runat="server" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" HeaderSelectedCssClass="accordionHeaderSelected">
            <HeaderTemplate>
                Header: <%# Eval("Key") %>
            </HeaderTemplate>
            <ContentTemplate>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Panel ID="Panel1" runat="server" Visible="false">
                            Data: <%# Eval("Value") %><br />
                        </asp:Panel>
                        <asp:Label ID="Label1" runat="server"></asp:Label>
                        <asp:HiddenField ID="HiddenField1" runat="server" OnValueChanged="HiddenField_ValueChanged" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </ContentTemplate>
        </ajaxToolkit:Accordion>
        
        <hr />   
        <asp:UpdatePanel ID="UpdateMessages" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Label ID="lblMessages" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />   
     
    <script language="javascript">
        timerID = 0;
        function paneOnClick(el) {
            var trigger = $get(el);
            if ( trigger.value != "loaded" ) {
                trigger.value = (new Date()).getTime();
                clearTimeout(timerID);
                timerID = setTimeout("timeoutTrigger('" + el + "')", 2000);
            }
        }
        function timeoutTrigger(el) {
            clearTimeout(timerID);
            __doPostBack(el, '');
        }
    </script> 
    
       
        </div>
        </form>
    </body>
    </html>
    

      

     

    test.aspx.cs:

     

     

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    
    
    using System.Collections.Generic; // for dictionary
    
    public partial class test : System.Web.UI.Page
    {
    	protected void Page_Load( object sender, EventArgs e )
    	{
    		if ( !IsPostBack )
    		{
    			this.DataBind();
    			Dictionary<string, string> values = new Dictionary<string, string>();
    			values["A"] = "This is the value for A";
    			values["B"] = "This is the value for B";
    			values["C"] = "This is the value for C";
    			values["D"] = "This is the value for D";
    			MyAccordion.DataSource = values;
    			MyAccordion.DataBind();
    			lblMessages.Text = "My Accordion Loaded... " + MyAccordion.Panes.Count;
    			UpdateMessages.Update();
    			int ctr = 0;
    			foreach ( AjaxControlToolkit.AccordionPane ap in MyAccordion.Panes )
    			{
    				HiddenField hidden = (HiddenField)ap.ContentContainer.FindControl("HiddenField1");
    
    				//ap.ContentContainer.ID = "AccordionContent" + ctr;
    
    				Label myLabel = (Label)ap.ContentContainer.FindControl("Label1");
    				myLabel.Text = DateTime.Now.ToLongTimeString();
    				lblMessages.Text = "Selected index is " + MyAccordion.SelectedIndex;
    				UpdateMessages.Update();
    				if ( MyAccordion.SelectedIndex == ctr )
    				{
    					Panel myPanel = (Panel)ap.ContentContainer.FindControl("Panel1");
    					myPanel.Visible = true;
    
    					//lb.Enabled = false;
    				}
    				else
    				{
    					ap.HeaderContainer.Attributes.Add("onclick", "paneOnClick('" + hidden.ClientID + "');");
    				}
    
    				ctr++;
    			}
    		}
    	}
    
    	protected void HiddenField_ValueChanged( object sender, EventArgs e )
    	{
    		AjaxControlToolkit.AccordionPane ap = (AjaxControlToolkit.AccordionPane)MyAccordion.Panes[MyAccordion.SelectedIndex];
    
    		HiddenField hidden = (HiddenField)ap.ContentContainer.FindControl("HiddenField1");
    		hidden.Value = "loaded";
    
    		Panel myPanel = (Panel)ap.ContentContainer.FindControl("Panel1");
    		myPanel.Visible = true;
    
    		Label myLabel = (Label)ap.ContentContainer.FindControl("Label1");
    		myLabel.Text = "Updated on " + DateTime.Now.ToLongTimeString();
    
    		lblMessages.Text = "changed: " + DateTime.Now.ToLongTimeString();
    		UpdateMessages.Update();
    	}
    }
      

     

Page 1 of 1 (4 items)