Wednesday, June 18, 2008

Using AjaxControlToolkit Accordion Control with Sharepoint 2007 web part

Should you wish to use the AjaxControlToolkit accordion control in a Sharepoint 2007 web part,

firstly make sure you have gone through the following list of prerequisites and notes:
Brief overview of requirements for using Ajax with Sharepoint 2007 web parts

  1. You have to make sure you programmatically create the control in the web part codebehind. Do it in the method "protected override void CreateChildControls()"
  2. Define the control as a global variable:
    Accordion Accordion1;
  3. Initialise the control in the CreateChildControls() method
    Accordion1 = new Accordion();
  4. Make sure you give it an ID
    Accordion1.ID = "Accordion1";
  5. Set the selected index
    Accordion1.SelectedIndex = 0;
  6. Set other properties such as FadeTransitions and TransitionDuration etc
    Accordion1.FadeTransitions = true;
    Accordion1.FramesPerSecond = 20;
    Accordion1.TransitionDuration = 100;
    Accordion1.AutoSize = AutoSize.none;
  7. Add the accordion control to the page's controls collection
    this.Controls.Add(Accordion1) (note: this still takes place in the CreateChildControls() method)
  8. Add panes in the following way:
    AccordionPane pane1 = new AccordionPane()
    string header = "this is the pane header";
    pane1.HeaderContainer.Controls.Add(new LiteralControl(header);
    string content = "this is the pane content";
    pane1.ContentContainer.Controls.Add(new LiteralControl(content));
  9. Remember that the following line of code must ALWAYS be at the end of the CreateChildControls() method:
  10. In your web part's Render(HtmlTextWriter writer) method
    add the following at the location where you want the control to be displayed:
That should do it.


Gaurav said...

Thanks for the article.

seoinheritx said...

Amazing Article, Incredible writing style. i really liked the way you represent the content.

Sharepoint Development | Development