Skip to content
June 10, 2011 / red1s

How To – Create a Cascade Dropdown in SharePoint 2010


If you’ve ever need to create a cascade dropdown in SharePoint 2010 you can use the following process to get going

Upload the necessary Jquery Files to your shared folder:

The JQUery files can be download from the following location, depending on which files you need

For this example you’ll need jquery-1.6.2.js (however I have both version in my directory for other purposes)

Make sure this folder is accessible to all users accessing the site

clip_image001

Now create the two lists that you’d need to cascade – (You’ll notice that I’ll be doing a subset of Ireland as my country) – Note if the Title is changed it doesn’t seem to pick up the name of the identifier so I had to create a ‘countries’ column to which I used to identify the column list

clip_image002

clip_image003

Create the list with the required parent child lookups:

clip_image004

Using the Title as the identifier:

clip_image005

Part 2: Editing the New and Edit Pages for the required functionality

Edit the new form by accessing the ribbon list item:

clip_image006

And selecting Default new form from the Form web parts menu

clip_image007

Once in edit mode add a Content Editor webpart

clip_image008

Add the below code into an HTML section of the content editor for the page:

<script language="javascript" src="/Shared%20Documents/Src/jquery-1.6.2.min.js" type="text/javascript"></script>

<script language="javascript" src="/Shared%20Documents/Src/jquery.SPServices-0.0.6.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

$().SPServices.SPCascadeDropdowns({

relationshipList: "Hierarchy Levels",

relationshipListParentColumn: "Level",

relationshipListChildColumn: "Description",

parentColumn: "Next Level",

childColumn: "Next Identifier",

debug: true

});

});</script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

clip_image009

clip_image010

You can use the following litmus test to ensure that your JavaScript code is being picked up:

clip_image011

For further clarification regarding the lookups and mappings see below diagram:

clip_image012

References

MOSS 2007 SharePoint Cascading drop downs using jQuery

Cascading Dropdown overview using SP Services

http://spservices.codeplex.com/wikipage?title=$().SPServices.SPCascadeDropdowns

MOSS 207 Demo cascading dropdowns

http://www.sympraxisconsulting.com/Demos/Demo%20Pages/CascadingDropdowns.aspx

Cascading Drop Down SharePoint Foundation 2010

http://www.uccorner.com/253/sharepoint/cascading-drop-down-sharepoint-foundation-2010/

JQUery

SP Services Codeplex project

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: