Cascading Drop Down Sharepoint Foundation 2010

After the release of Sharepoint 2010, the request for Cascading Drop Down, filtered drop down, dependent drop down or what you call them is not so common anymore. The reason for this is of course the Managed Metadata Service, which is included in Sharepoint Server 2010.

There are still times, however, when you’d want to use the functionality below to filter your drop downs. If you for instance are running Sharepoint Foundation, not Server, you won’t have the Managed Metadata Service available at all. Or perhaps you are running server, but you want to use list data and not terms from the term store.

Read more about Cascading Drop Down in my previous post for Sharepoint 2007.

The solution
The solution below is tested with Sharepoint 2010, and is basically the same procedure as the one for 2007. The list is still standard Sharepoint, which gives great flexibility and stability. This way, the filtering is done in the forms for creating and editing elements. Because of this, you don’t even have access to the server to implement this.

1. Add the Jacascript
Download the Jquery file jquery-1.6.2.min.js by Jquery.com. Download jquery.SPServices-0.6.2.zip from the Jquery Library for Sharepoint Codeplex site (newer version is probably also OK). Upload jquery-1.6.2.min.js and jquery.SPServices-0.6.2.min.js (from the zip file) to a document library that everyone accessing your site has access to (a library on the top level site can be wise).

2. Create your relationship lists
Make two lists, one for the parent (Country) and one for the child (City):

Countries list:

Cities list:

The Country column can be a look up from the Countries list, but you can just as well use a standard single line of  text column, which I have done here. This can theoretically give better performance, but you must of course be precise when filling out the County column so that the values here matches the ones in the Countries list.

3. Create the list that is actually using the Drop Down

Vacation Plans list:

This is the list where I want my Cascading Drop Downs. Country and City are lookup columns against Countries and Cities lists. The lookups goes against the title field in the respective columns.

4. Make the magic happen
In Sharepoint Designer, create your own NewForm.aspx (or EditForm.aspx, you’ll need both if you want it to work when editing items). Editing forms is a lot easier now with Designer 2010.

Just below
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

insert this code:

<script language="javascript" type="text/javascript" src="/address to document library/jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/address to document library/jquery.SPServices-0.0.6.min.js"></script>
<script language="javascript" type="text/javascript">
 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Cities",
   relationshipListParentColumn: "Country",
   relationshipListChildColumn: "Title",
   parentColumn: "Country",
   childColumn: "City",
   debug: true
  });

 });
</script>

Save and create a new item using your new form:

Voila!

5.Explained:
relationshipList: “Cities” : this is the name of the relationship list = the list containing parent and child
relationshipListParentColumn: “Country” : Column name from the Cities list
relationshipListChildColumn: “Title” : Column name from the Cities list
parentColumn: “Country”: Column name from the list where the drop down is = Vacation Plans
childColumn: “City”: Column name from the list where the drop down is = Vacation Plans

You have lost of other options explained at the project site on Codeplex like sorting, multiple levels and so on.

Thanks to Marc D. Anderson for making this available.

I tested this on Sharepoint Server Enterprise 2010 with Service Pack 1 installed. It should work just as fine on Sharepoint Foundation. My installation is English Sharepoint with Norwegian Language Pack, but pure English should be jsut as fine.