SharePoint Dragons

In this blog post we’ll discuss how to use jQuery in a visual web part to help implementing parent/child radio buttons. To accomplish this, we’ve borrowed ideas from other places, we’ll mention them as we go along.

First, create a new SharePoint project and add a visual web part to it. Then, download the latest version of the jQuery library. We’ll be using jquery-1.7.js.

Please note: This is the developer version, which we’ll be using throughout this example. In a production environment, you should use the minified version instead (called jquery-1.7.min.js, or the equivalent of the version you are using).

SPS 2010 contains a new type of library called Site Assets. It can be used to store resource files such as images, style sheets, and JavaScript files. We’ll use it as a new home for jquery-1.7.js. Later, we’ll discuss how to do this automatically, but the next procedure explains how to add the jQuery library manually:

1. Open a site collection SharePoint Designer 2010 (SPD).
2. Click the Site Assets node.
3. Open Windows explorer and browse to jquery-1.7.js.
4. Drag and drop it within the Site Assets node.

Since we’ve made the jQuery library available within SharePoint, we’ll be able to leverage it. We’ll do this by adding a link to it in our user control (*.ascx), like so:

<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server”

Name=”~sitecollection/SiteAssets/jquery-1.7.js” />

Please note: You shouldn’t use the ondemand=true attribute, as we want the jQuery library to be available right away.

To test if this has worked, we’re borrowing some ideas from http://blogs.msdn.com/b/yojoshi/archive/2010/06/17/using-jquery-with-sharepoint-2010.aspx :

1. Press F5 to open MSIE (we’re assuming you’ll be able to add the visual web part to the web part page).
2. Press F12 to bring up “Developer Tools”  (for MSIE 8 and higher).
3. Click the Script tab and verify jQuery is getting loaded. You know this to be true if you find this entry:

   document.write(‘<script src=”/siteassets/jquery-1.7.js”></’ + ‘script>’);

4. In the right console window, add the following jQuery command:

   $(“#MSO_ContentTable”).css(“background-color”,”cyan”);

5. Click the Run Script button.

If the page background turns cyan, you’ll know that it works and that jQuery did it for you.

(From: http://blogs.msdn.com/b/yojoshi/archive/2010/06/17/using-jquery-with-

At this point, jQuery can be used for client-side scripting.  At this point, the code of the user control of the visual web part looks like this:
<%@ Assembly

Name=”$SharePoint.Project.AssemblyFullName$” %>
<%@ Assembly Name=”Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral,

PublicKeyToken=71e9bce111e9429c” %>
<%@ Register TagPrefix=”SharePoint” Namespace=”Microsoft.SharePoint.WebControls”
    Assembly=”Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,

PublicKeyToken=71e9bce111e9429c” %>
<%@ Register TagPrefix=”Utilities” Namespace=”Microsoft.SharePoint.Utilities”

Assembly=”Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,

PublicKeyToken=71e9bce111e9429c” %>
<%@ Register TagPrefix=”asp” Namespace=”System.Web.UI”

Assembly=”System.Web.Extensions, Version=3.5.0.0, Culture=neutral,

PublicKeyToken=31bf3856ad364e35″ %>
<%@ Import Namespace=”Microsoft.SharePoint” %>
<%@ Register TagPrefix=”WebPartPages”

Namespace=”Microsoft.SharePoint.WebPartPages”
    Assembly=”Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral,

PublicKeyToken=71e9bce111e9429c” %>
<%@ Control Language=”C#” AutoEventWireup=”true”

CodeBehind=”VisualWebPart1UserControl.ascx.cs”
    Inherits=”VisualWebPartProject1.VisualWebPart1.VisualWebPart1UserControl” %>
<asp:Label ID=”Label1″ runat=”server” Text=”Label”></asp:Label>
<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server”

Name=”~sitecollection/SiteAssets/jquery-1.7.js” />

It only contains a reference to the jQuery library. Now, add the code to it that creates a parent/child radio button list. This idea was taken from: http://www.billsternberger.net/jquery/using-jquery-to-enable-and-disable-radio-buttons-onclick/ and it looks like this:

<script>
    $(function () {

        //init Texas
        $(‘#DivTexas :input’).attr(‘checked’, false);
        $(‘#DivTexas :input’).attr(‘disabled’, true);

        //init Virginia
        $(‘#DivVirginia :input’).attr(‘checked’, false);
        $(‘#DivVirginia :input’).attr(‘disabled’, true);
    });

    function EnableTexas() {
        //disable Virginia options
        $(‘#DivVirginia :input’).attr(‘checked’, false);
        $(‘#DivVirginia :input’).attr(‘disabled’, true);

        //enable Texas options
        $(‘#DivTexas :input’).removeAttr(‘disabled’);
    }

    function EnableVirginia() {
        //disable Texas options
        $(‘#DivTexas :input’).attr(‘checked’, false);
        $(‘#DivTexas :input’).attr(‘disabled’, true);

        //enable Virginia options
        $(‘#DivVirginia :input’).removeAttr(‘disabled’);
    }
</script>

<asp:RadioButton Value=”A” Text=”A” runat=”server” GroupName=”ParentGroup” ID=”parent1″ onclick=”EnableTexas()” />
<div id=”DivTexas”>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:RadioButton Value=”AA” Text=”AA” runat=”server” GroupName=”ChildGroupA” ID=”child1″ /><br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:RadioButton Value=”AB” Text=”AB” runat=”server” GroupName=”ChildGroupA” ID=”child2″ /><br />
</div>
<asp:RadioButton Value=”B” Text=”B” runat=”server” GroupName=”ParentGroup” ID=”parent2″ onclick=”EnableVirginia()” />
<div id=”DivVirginia”>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:RadioButton Value=”BA” Text=”BA” runat=”server” GroupName=”ChildGroupB” ID=”child3″ /><br />
</div>

The result is that you can only check a child radio button if the parent radio button is checked. It looks like this:

Since we don’t want to add the jQuery library manually once we start deploying it, we’re taking an idea from http://www.lightningtools.com/blog/archive/2009/12/06/add-javascript-files-once-to-a-page—sharepoint-sandbox.aspx We’ll add the jQuery library as a module to our SharePoint project, and deploy it to a subfolder in the Site Assets library.

1. Right-click SharePoint project and choose Add > New Item.
2. Choose Module and call it MyAssets.
3. Within the MyAssets folder, delete Sample.txt.
4. Right-click the MyAssets folder and choose Add.
5. Locate jquery-1.7.js (or better yet: locate the minified version) and add jquery-1.7.js.
6. Open up Elements.xml, and add the following attribute: Url=”SiteAssets” to the Module element.

Now, the Module XML should look like this:

<?xml version=”1.0″ encoding=”utf-8″?>
<Elements xmlns=”http://schemas.microsoft.com/sharepoint/”>
  <Module Name=”MyAssets” Url=”SiteAssets”>
  <File Path=”MyAssets\jquery-1.7.js” Url=”MyAssets/jquery-1.7.js” />
</Module>
</Elements>

Pressing F5 causes jquery-1.7.js to be deployed to the Site Assets library, in the My Assets folder. This means you should update the link in the user control like so:

<SharePoint:ScriptLink ID=”ScriptLink1″ runat=”server”

Name=”~sitecollection/SiteAssets/MyAssets/jquery-1.7.js” />

And there you have it!