Mahdi Abdulhamid : Embedding Ajax Control ToolKit into SharePoint 2007: Accordion Sample Web Part

Software Development Technologies and Solutions
SharePoint | .NET | MCMS | MS SQL | Office

Let's share our experiences
Home
Search
Downloads
About me

Contact me

Embedding Ajax Control ToolKit into SharePoint 2007: Accordion Sample Web Part

Sunday, July 01, 2007

The ASP.NET AJAX Control Toolkit provides a set of sample controls and extenders that makes it a snap to spice up your web site with rich functionality, and I think it will be very interesting to embed this toolkit into MOSS 2007. In the following example I’ve started with ASP.NET Ajax Accordion control, and may be later I’ll get the opportunity to embed more controls.

Software Needed:

SharePoint Portal Server 2007 (installed with site collection created on port: 80)
Visual Studio 2005
SharePoint 2007 Extensions for Visual Studio 2005
ASP.NET 2.0 AJAX 1.0
Ajax Control ToolKit

For all people who are enabling Ajax for the first time in SharePoint 2007, you need first to configure your SharePoint Portal to support AJAX. To do this, it is better to open a new AJAX web site in Visual Studio to pick a copy from configuration sections in web.config , and if you have configured it before you can start directly from step 9.

1– Add the following part under: <configSections>

2– Add the following part under: <pages >

3– Add the following part under : <compilation><assemblies>

4– Add the following part under: <httpHandlers>

5– Add the following part under: <httpModules>

6– At the end of web.config add the following part under: <configuration>

<system.web.extensions>
    <scripting>
      <webServices>
      
      
      
      
      </webServices>
      
    </scripting>
</system.web.extensions>
<system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules>
      <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </modules>
    <handlers>
      <remove name="WebServiceHandlerFactory-Integrated" />
      <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode"
           type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
</system.webServer>

7– Before closing web.config we should add the AJAX controls dll to SharePoint Safe Controls, so copy the following part under: <SafeControls>

8– It is time to include the AJAX script Manager to the master page, in my case I’ve included the script manager control in the default.master located in the following path:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\GLOBAL
So, according to your portal template; locate the right master page file or you can open the master page from the SharePoint Designer under _catalogs folder.
After you locate the master page file open the file then put the following line inside the top of <form> tag

<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>

As shown below:

9– At this point you’ve configured your SharePoint to support AJAX, once more you need your SharePoint to support the Control Kit, so add the following line under <Controls> tag:
<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>

10 – Also you should copy the DLL “AjaxControlToolkit.dll” into your SharePoint Bin Folder:
C:\Inetpub\wwwroot\wss\VirtualDirectories\80\bin

11– Now it is time to write our code, open a new web part project in Visual studio 2005 then add reference of System.Web.Extensions, AjaxControlToolkit to the project and write the following code to web part code file:

using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;

namespace Accordion
{
    [Guid("6e6ad58b-7e84-46f4-a3f7-e4b276cc0b12")]
    public class _Accordion : System.Web.UI.WebControls.WebParts.WebPart
    {
        protected AjaxControlToolkit.Accordion acc;

        public _Accordion()
        {
            this.ExportMode = WebPartExportMode.All;
        }

protected override void CreateChildControls()
{

base.CreateChildControls();

// Fix Form Action
this.FixingFormAction();

            acc = new AjaxControlToolkit.Accordion();
            acc.ID = "acc";
            acc.FramesPerSecond = 40;
            acc.FadeTransitions = true;
            acc.TransitionDuration = 250;
            acc.SuppressHeaderPostbacks = true;
            AjaxControlToolkit.AccordionPane pane1 = new AjaxControlToolkit.AccordionPane();
            AjaxControlToolkit.AccordionPane pane2 = new AjaxControlToolkit.AccordionPane();

PaneHTMLTemplate header = new PaneHTMLTemplate("<a href=\"\" style=\"border:1px solid #ccc;background-color:#e3eeef\"><b>1. Accordion</b></a>");
PaneHTMLTemplate header2 = new PaneHTMLTemplate("<a href=\"\" style=\"border:1px solid #ccc;background-color:#e3eeef\"><b>2. Accordion</b></a>");

CheckBoxList chk = new CheckBoxList();
CheckBoxList chk2 = new CheckBoxList();

chk.ID = "chk";
chk2.ID = "chk2";

chk.Items.Add(new ListItem("Check1.1"));
chk.Items.Add(new ListItem("Check1.2"));

chk2.Items.Add(new ListItem("Check2.1"));
chk2.Items.Add(new ListItem("Check2.2"));

Control[] myControls = { new LiteralControl("List No.1:<br />"), chk };
Control[] myControls2 = { new LiteralControl("List No.2:<br />"), chk2 };

            PaneControlTemplate cont = new PaneControlTemplate(myControls);
            PaneControlTemplate cont2 = new PaneControlTemplate(myControls2);
            pane1.Header = header;
            pane1.Content = cont;
            pane2.Header = header2;
            pane2.Content = cont2;
            acc.Panes.Add(pane1);
            acc.Panes.Add(pane2);
            this.Controls.Add(acc); ;
        }

        //Fixing Form Action
        private void FixingFormAction()
        {
            if (this.Page.Form != null)
            {
                string formOnSubmitAtt = this.Page.Form.Attributes["onsubmit"];
                if (formOnSubmitAtt == "return _spFormOnSubmitWrapper();")
                {
                    this.Page.Form.Attributes["onsubmit"] = "_spFormOnSubmitWrapper();";
                }
            }
            ScriptManager.RegisterStartupScript(this, typeof(_Accordion), "UpdatePanelFixup", "_spOriginalFormAction = document.forms[0].action; _spSuppressFormOnSubmitWrapper=true;", true);
        }
    }

    //Class for Building Pane HTML Template tempales
    public class PaneHTMLTemplate : ITemplate
    {
        private string template;

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

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

    //Class for Building Pane Control Template tempales
    public class PaneControlTemplate : ITemplate
    {
        private Control[] tempControls;

        public PaneControlTemplate(Control[] tempC)
        {
            tempControls = tempC;
        }

        public void InstantiateIn(Control container)
        {
            foreach (Control ctl in this.tempControls)
            {
                container.Controls.Add(ctl);
            }
        }
    }
}

Then deploy the web part to SharePoint and enjoy.

Posted By Mahdi Abdulhamid At 7:38 AM • Comments (9) Trackbacks (73)

Trackbacks :
http://www.devexpert.net/blog/pt/blog/track.aspx?id=22

Very helpful! Thank you!

Comment By WLTUOYE At 7/3/2007 2:10 PM

We encountered several behaviors while using this toolkit on SPS 2007. First, the tab control's tabs text was not completely visible when used in MOSS wrapped in custom web part code. However, when used in a simple .Net web page as in the examples it worked and looked fine. After obtaining the source and modifying the tab's CSS we were able to see all tab text. Also we found an odd security problem where anonymous users or authenticated users can't view a page with a control from the toolkit wrapped in custom web part code until a site owner/developer first views the page.

Comment By Steve At 8/2/2007 8:52 AM

Dear Steve,
Thank you for submitting your comment, of course the tabs links shall be affected by the portal styles, so you won't get the desired looking without updating the tab styles, but I'm wondering about the security problem which I have not encountered in my environment. but i will check again.

good luck

Comment By Mahdi Abdulhamid At 8/2/2007 2:00 PM

Thanks for this great post. However, when I try to use ajax controls in application page and deploy them in _layouts folder, ajax controls stops functioning. I tried this with a collapsible panel. I also observed that when I do not associate application.master or default.master and directly run the page from _layouts, it works absolutely fine. What am I missing?

Comment By Manoj At 10/25/2007 10:48 AM

We've seen the 'partially obstructed Tabs' problem because the master page did not declare a proper DOCTYPE.

Hope this helps some of you out there trying to use the TabContainer and TabPanel controls withing MOSS2007.

Nate

Comment By Nate At 11/20/2007 12:45 PM

Anyway to tie this to a SharePoint links list instead of hard coding the list items? I'm sure I can give it a URL to a list and iterate through it to add it to this web part, but not sure where to start.

Comment By Ryan At 11/27/2007 4:30 PM

Hi,
I did everything as per this blog, but when I am trying to add the web part to my page, it's giving Unexpected Error occurred. But I couldn't find any error while debugging. Please help me.

Comment By Ven At 7/13/2009 5:26 PM

Hi,

Which web.config file we need to include step 1 - 7. Is it the central administration web.config or the site we created?

I have made all the changes in web.config file on central administration web.config and when tried to include scriptmanager on the master page it throwing error.

Regards,
Naveen

Comment By Naveen At 7/16/2009 4:29 AM

Dear Naveen,
you've picked the wrong file, of course the web.config of the created site.

Comment By Mahdi Abdulhamid At 7/16/2009 5:00 AM

Comments :

Name :

Email :

URL :
Remember Info?

Comments :

Allowed Tags : <A>, <B>, <I>, <BLOCKQUOTE>

Contact | Search | About

Disclaimer:
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way. All posts and codes provided here with no warranties.