Posts Tagged "ajax"

How to Using a ModalPopupExtender in a SharePoint Webpart Class

How to Using a ModalPopupExtender in a SharePoint Webpart Class

Almost all of the examples on how to use the Ajax Control Toolkit ModalPopupExtender are done in ASP.Net, however in this example I’ll explain how to use this control in a SharePoint Webpart with all of the code living in the class.

For our purpose here this example assumes that you have already intergrated the Ajax Control Toolkit with your SharePoint environment.

First create the target control which is going to be used to show the modal view. In my example I made the button invisible because I plan to show the modal on page load. If you haven’t already done so, also add the System.Web.Extensions reference to your project:

Button btn = new Button();
btn.Attributes.Add(“style”, “display: none”);
btn.Text = “Show Modal”;
btn.ID = “btn”;

Next, create you ModalPopupExtender

AjaxControlToolkit.ModalPopupExtender mp = newAjaxControlToolkit.ModalPopupExtender();
mp.CancelControlID = “CancelBTN”;
mp.OkControlID = “OkBTN”;
mp.PopupControlID = “ModalPanel”;
mp.PopupDragHandleControlID = “ModalHeader”;
mp.BackgroundCssClass = “ModalPopupBG”;
mp.TargetControlID = “btn”;

Now create the main panel for your modal view as well as the DIV’s for the main body content

Panel pan = new Panel();
pan.Attributes[“display”] = “none”;
pan.Attributes[“id”] = “ModalPanel”;

HtmlGenericControlDivMain = new HtmlGenericControl(“div”);
DivMain.Attributes[“class”] = “Container”;

HtmlGenericControl div1 = new HtmlGenericControl(“div”);
div1.Attributes[“id”] = “PopupHeader”;
div1.Attributes[“class”] = “PopupHeader”;
LiteralHeaderText = new Literal();
HeaderText.Text = “<p>ALERT</p>”;
div1.Controls.Add(HeaderText);

HtmlGenericControl div2 = new HtmlGenericControl(“div”);
div2.Attributes[“id”] = “PopupBody”;
div2.Attributes[“class”] = “PopupBody”;
LiteralBodyText = new Literal();
BodyText.Text = “<p>This is a simple modal dialog</p>”;
div2.Controls.Add(BodyText);

HtmlGenericControl div3 = new HtmlGenericControl(“div”);
div3.Attributes[“id”] = “PopupBody”;
div3.Attributes[“class”] = “PopupBody”;
LiteralControlText = new Literal();
ControlText.Text = “<input id=’ReviewBTN’ type=’button’ value=’Okay’ /><input id=’DismissBTN’
type=’button’ value=’Dismiss’ />”;
div3.Controls.Add(ControlText);

DivMain.Controls.Add(div1);
DivMain.Controls.Add(div2);
DivMain.Controls.Add(div3);
pan.Controls.Add(DivMain);

Now add your controls to the webpart

this.Controls.Add(btn);
this.Controls.Add(pan);
this.Controls.Add(mp);

// I execute this on load, however it can be applied to an action on the target control button
mp.Show();

Here are the styles I used for the modal

.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}

.PopupHeader
{
background-color: #5e8cc5;
padding: 5px 15x 5px 15px;
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
padding: 1px;
}

.PopupBody
{
padding: 5px 15px 5px 15px;
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: #000000;
clear: both;
}

.Container
{
background-color: #ebf4fe;
border: 2px solid #000000;
padding: 0px 0px 0px 0px;
}

Read More

Using the AJAX Control Toolkit with SharePoint 2010

Using the AJAX Control Toolkit with SharePoint 2010

The AJAX Control Toolkit offers so much useful functionality, however for some reason Microsoft refuses to integrate it as part of their product. This has caused problems with SharePoint 2003 – 2010, however as SharePoint now has standard Ajax integration we are now faced with another problem.

With previous versions of SharePoint you would need to add the AJAX references to the Web.config file as well as register the AJAX assemblies. In addition you would need to do the same for the AJAX Control Toolkit as well as incorporating a script manager into your master pages.Well with SharePoint 2010, the AJAX stuff is already there, but the script managers do not work with the AJAX Control Toolkit. Here is how I finally managed to get this working:

Registering the AJAX Control Toolkit

First you need to download the AJAX Control Toolkit binaries. After some headaches I found out that the latest release does not work with SharePoint 2010. You get a bunch of ‘sys’ errors after implementation. You will therefore need to download the 30930 version which can be found here.

Copy the “AjaxControlToolkit.dll” file into the “<Drive>\inetpub\wwwroot\wss\VirtualDirectories\80\bin” SharePoint directory (obviously if you didn’t use port 80, the path would have a different port number).

Open up your Web.config file and find the <assemblies> section add the following entry (notice that the version includes *.28736, this took me a while to figure out):

<add assembly=”AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

Also add the following entry in the Web.config file in the <SafeControls> section:

<SafeControl Assembly=”ajaxcontroltoolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e, processorArchitecture=MSIL”Namespace=”AjaxControlToolkit” TypeName=”*” />

Adding the AJAX Control Toolkit to Visual Studio 2010

Open up VSTO and start a new Web Part project. When you have the project open, add a new reference to the project by browsing to the “AjaxControlToolkit.dll” file in the “<Drive>\inetpub\wwwroot\wss\VirtualDirectories\80\bin”  directory.

Once you have this added to your project, go ahead and add the following line to your user control:

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit”TagPrefix=”asp” %>

Now, add a new Tab to your Toolbox, then right click and ‘choose items’. Browse to the “AjaxControlToolkit.dll” file in the “<Drive>\inetpub\wwwroot\wss\VirtualDirectories\80\bin”  directory and add the controls. You should see the following results:

WAIT! There’s more

OK, you have everything in place and you start to build a Web Part with the AJAX Toolkit Controls and find that the control is being rendered, but it is not functioning. You get a Javascript error pointing to your AJAX files being out of date. This is because SharePoint 2010 now has a ScriptManager added to every Master Page by default. You need to open up the Master Page you’re using (typically with SharePoint Designer) and remove the existing <asp:ScriptManager> tag and replace it with the following:

<asp:ToolkitScriptManager ID=”ToolkitScriptManager1″ runat=”server” />

as well as adding the following assembly reference:

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit”TagPrefix=”asp” %>

Woohoo. You now have the Toolkit fully functional in SharePoint 2010. Hope this helps you save some of the headaches I went through.

Read More