locked
Adding Panels ajax accordion RRS feed

  • Question

  • User458200495 posted

    can anybody give me any example how to add  "AjaxControlToolkit . AccordionPane"  to the ASP.NET Ajax Accordion Control.

     

    the situation, in short, is that i need to fill up Categories Names in HEADERS and  Lists of Sub Categories in the Contents of Accordion panel. So lots of headers and then clicking on a header would drop a list of its sub categories. i have all data stored in sql server. and need to fill in C# source view(not in html design view)

     

    my accordion controls name is MyAccordion

     

    guess something like MyAccordion.Panes.Add(

    But WHATS NEXT?

    and BRIEF example? 

    Tuesday, May 27, 2008 2:39 AM

Answers

  • User1335925338 posted

    Hi Asif Ashraf,

    To add AccordionPanes to the Accordion, please refer to this sample code: 

        Protected Sub AddDetailAccordion(ByVal parentAd As AjaxControlToolkit.Accordion)
            For p = 0 To 1
                Dim ap As New AjaxControlToolkit.AccordionPane
    
                Dim aphead As New Label
                aphead.Text = "This is the pane" & p.ToString
                ap.HeaderContainer.Controls.Add(aphead)
    
                Dim subAd As New AjaxControlToolkit.Accordion
                subAd.ID = "subAcc"
                subAd.HeaderCssClass = "accordionHeader"
                subAd.ContentCssClass = "accordionContent"
                subAd.RequireOpenedPane = "false"
                subAd.FadeTransitions = "True"
                subAd.SelectedIndex = "0"
                subAd.SuppressHeaderPostbacks = "true"
                subAd.FramesPerSecond = "40"
                subAd.TransitionDuration = "250"
                For i = 0 To 1
    
                    Dim subADP1 As New AjaxControlToolkit.AccordionPane
                    Dim head1 As New Label
                    head1.Text = "Head" & i.ToString
                    subADP1.HeaderContainer.Controls.Add(head1)
    
                    For j = 0 To 2
                        Dim content1 As New Label
                        content1.Text = "content" & j.ToString & "<br /> "
                        subADP1.ContentContainer.Controls.Add(content1)
                    Next
    
                    subAd.Panes.Add(subADP1)
                Next
                ap.ContentContainer.Controls.Add(subAd)
    
                parentAd.Panes.Add(ap)
            Next
        End Sub
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            AddDetailAccordion(MyAccordion)
    
        End Sub
    I hope this has resolved your issue. If there are any more questions do not hesitate to contact me.

    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 27, 2008 4:00 AM

All replies

  • User1335925338 posted

    Hi Asif Ashraf,

    To add AccordionPanes to the Accordion, please refer to this sample code: 

        Protected Sub AddDetailAccordion(ByVal parentAd As AjaxControlToolkit.Accordion)
            For p = 0 To 1
                Dim ap As New AjaxControlToolkit.AccordionPane
    
                Dim aphead As New Label
                aphead.Text = "This is the pane" & p.ToString
                ap.HeaderContainer.Controls.Add(aphead)
    
                Dim subAd As New AjaxControlToolkit.Accordion
                subAd.ID = "subAcc"
                subAd.HeaderCssClass = "accordionHeader"
                subAd.ContentCssClass = "accordionContent"
                subAd.RequireOpenedPane = "false"
                subAd.FadeTransitions = "True"
                subAd.SelectedIndex = "0"
                subAd.SuppressHeaderPostbacks = "true"
                subAd.FramesPerSecond = "40"
                subAd.TransitionDuration = "250"
                For i = 0 To 1
    
                    Dim subADP1 As New AjaxControlToolkit.AccordionPane
                    Dim head1 As New Label
                    head1.Text = "Head" & i.ToString
                    subADP1.HeaderContainer.Controls.Add(head1)
    
                    For j = 0 To 2
                        Dim content1 As New Label
                        content1.Text = "content" & j.ToString & "<br /> "
                        subADP1.ContentContainer.Controls.Add(content1)
                    Next
    
                    subAd.Panes.Add(subADP1)
                Next
                ap.ContentContainer.Controls.Add(subAd)
    
                parentAd.Panes.Add(ap)
            Next
        End Sub
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            AddDetailAccordion(MyAccordion)
    
        End Sub
    I hope this has resolved your issue. If there are any more questions do not hesitate to contact me.

    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 27, 2008 4:00 AM
  • User458200495 posted

    hmm.. looking good..

    anyhow i already got a solution.. can you tell me if its best or yours...

     

    i created a class PaneTemplateItem like 


        //START CLASS


        public class PaneTemplateItem : ITemplate
        {
            private string template;
            public string Template
            {
                get
                {
                    return template;
                }
                set
                {
                    template = value;
                }
            }

            public PaneTemplateItem(string temp)
            {
                template = temp;
            }

            public void InstantiateIn(Control container)
            {
                LiteralControl ltr = new LiteralControl(this.template);
                container.Controls.Add(ltr);
            }

        }

    //END Class

     

     

     and using like this

     

    //adding header

    AjaxControlToolkit.AccordionPane pane = new AjaxControlToolkit.AccordionPane();
                     MyAccordion.Panes.Add(pane);
                     PaneTemplateItem header = new PaneTemplateItem(category.Name);
                     pane.Header = header;

     

    //adding sub categories to the pane like

    PaneTemplateItem body = new PaneTemplateItem(
                        "<div id=\"div\"><ul>"
                        );

    //Loop through sub categories

    foreach (SubCategories subCategory in subCategoryCollection)
                    {

                        body.Template += "<li><a href=\"#\">" + subCategory.Name + "</a></li>";                 
                      
                    }
                    body.Template += "</ul></div>";
                    pane.Content = body;

     

     

     

    Please suggest me which way should i use?

    am i doing wrong or right.THANX anyways... the stuff im using is doing right with me instead the accodion uses to show me horizontal scroll when i drop a header to view sub categorie.. and sometimes show vertical too..

     

    ANY IDEAS?

     

    Thanks
     

    Tuesday, May 27, 2008 4:23 AM
  • User-1616778647 posted

    Hi Asif, I think scrollbar is your problem as of now. Remove div tag from your code and check if you are not getting the scroll bars. Let me know if the problem continues. Anand
    Tuesday, May 27, 2008 5:12 AM
  • User1335925338 posted

    Hi Asif Ashraf,
     
    Both of my sample and your solution are feasible, the different between them are that:

      1. My sample code is to simply show the relationship between the Accordion and the AccordionPane, you may add loop through sub categories if you prefer.
      2. You solution is to build the sub AccordionPane’s Head and Content directly by using a class which inherits the ITemplate interface.

    If you need to add many sub panes to the Accordion and would like to write a code for refactoring, we recommend using your solution.

    Otherwise, if you only add a few panes, please write your application by rewriting my code.
     
    Best regards,
     
    Zhi-Qiang Ni

    Tuesday, May 27, 2008 5:42 AM
  • Thursday, January 23, 2014 11:26 AM