Thanks!

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.

45 comments to Cascading Drop Down Sharepoint Foundation 2010

  • […] Cascading Drop Down Sharepoint Foundation 2010 […]

  • Cameron

    You mention that the relationshipListParentColumn can be a lookup column, but upon testing I could not get that to work. Using a text column, as you did, worked fine. My lookup matrix will be updated quite regularly by users so I will have a workflow which updates the text column when a lookup is changed.

  • Hi Cameron,
    I just tested this in 2010 also, and it works fine for me following my own post.

  • Gabriel Peña

    How can I upload the JSqueries to the document library?

  • Hi,
    just download the Jquery files (right-click, Save as..), and unzip them if they are zipped so you have them locally on your computer. then you go into your document library in Sharepoint and upload them just as any other document.

  • C. R. Levy

    thanks for the post.
    it workes. but when i customize the form to info path.
    and drop the script on the page.
    i get an error: parentColumn: Country
    Message: Column not found on page

  • Joe

    I edited the NewForm and EditForm for the Vacation Plans list but there is no luck. When I tried to create a new task. The drop down list is not cascading

  • Kishan

    Hi,

    Thanks for the Post it works fine in SharePoint 2010 with both Library & list.
    I have one query, Can you help me into this :..
    Can we get a Prepopulated column value in the edit form.aspx as it opens.
    Eg: As the Form open the Country column value contain the Norway(as default value) & the city is also populated according to it….!!!

    Much Thanks
    Kishan

  • Sue

    I’m following the instructions to a T on my SP 2010 site list, but keep getting an error on the page – ‘object expected’. Any thoughts?

  • Tiffany

    This is absolutley genius. THANKS!!!

  • Sarfraz

    Dude I love you! Thanks! This saved me a lot of money!

  • Brian

    Hi, Just a quick question… how can i make the the child field as parent field of another field?

    Example:

    Field 1 – Parent
    Field 2 – Child of Field 1
    Field 3 – Child field of Field 3

    Hope you could help me on this…. Many thanks!

  • Hi everybody, I have now made a tutorial on how to do this with more than two levels: http://www.uccorner.com/332/sharepoint/cascading-drop-down-multiple-levels/

  • Hi,

    O follow your procedure but not work. Can you help me?

    Error in function
    SPServices.SPCascadeDropdowns
    Parameter
    relationshipListParentColumn: Country or relationshipListChildColumn: Title
    Message
    Not found in relationshipList Cities

    Click to continue

  • Hi,
    this indicates that either the column “Title” or “Country” does not exist in the list “Cities”. Usually this is because one of the names are misspelled. If you for example first called the “Country” column for “Kountry” and then changed it to “Country”, you still have to use “Kountry” in the code because the Jquery uses the internal name of the columns.

  • Igor Stavnitser

    This solution supports unlimited (coded for up to 9 now) levels of cascading drop downs and supports implementing the hierarchy in a single XML file, which makes editing much easier.

    http://sp-hacks.blogspot.com/2012/08/creating-multilevel-no-limit-cascading.html

  • Thank you for sharing. Although easy for us and a cleaner solution seen from a technical perspective, I think from a end-user perspective that haveing the data in lists like in my solution outlined here might be better that having the end-user to update XML files. But it all depends on how/when/who is maintaining these data, and how you will access them in other places.

  • Jo Wagner

    Hi,

    thats a fine solution, but i did not getting it on work. There are no error messages, but the cities lookup column is not cascading in my vacation plan. It only shows “None” (when the field is marked as “information is not required”). When i change the field to “information is required” the cities lookup column shows nothing….

  • Lamzie

    hi,
    I have done all your instruction but my City dropdowns does not filter when I select a country. I have alla scriptfiles in a documentlibrary in the same site as the list. Can it be that the form can not edit the files???

  • Ziegelwagner

    Hi,
    I am getting this Error
    CRIPT5007: Det går inte att hämta värdet för egenskapen SPCascadeDropdowns: objektet är null eller odefinierat
    What can it be? my childlist is not cascading at all :(

  • Do you or the users experiencing the problem have access to the library where the script files are located? Are you sure you are referencing them using the correct URL? If you have really tightened the permissions, at least in 2007 you could remove the permission for users to view customized forms if I remember correctly, I am not sure how this is in 2010 though.

  • Venkat

    Hi,

    I have two cascading dropdowns which are pointing to lookup columns in a document library. When I create new item ,both dropdowns are working fine, when I change the value in the parent dropdown the child dropdown is filtered with appropriate value. After saving the item in the library , if I click on Edit Properties, the values for both Cascade dropdown are not selected with the saved values. But in the view properties of the item , I am able to see the saved values , which I selected while saving the item…Not sure why the values for the saved item are getting cleared when I click on Edit Properties…I have been searching a lot for this issue….but didn’t find any concrete resolution for it..

    It could be helpful if you can provide some pointer on the issue…

    Thanks,
    Venkat

  • Nicki

    Venkat… have you found any resolution to that issue? I have had the same problem…

  • Hi their,

    I’m also trying to get this to work on a Document Library, everywhere on the internet there are tutorials for cascading dropdowns on Lists but these methods don’t work for a Library.

    It would be great if you can make an extended blog post with lots of picture how you explain for a list and library and different levels. etc. it would help us a lot.

    Thanks,
    Kind regards,
    Maarten

  • Hi,
    I have implemented this without problems for a 2007 Document Library. I would think this should work just as fine for 2010 also. Basically Document Libraries also have forms for New and Edit, which are the forms you use when editing a document’s properties. Customizing these forms should work just as fine as a list form.

    This will not work in the Properties Pane within Word or Excel though, for this you need other solutions.

  • Amar Mohite

    Hi,

    In my case, below two columns contains ” ” (Blank space) in between, i replaced “space” with “-x0020″ still drop downs are not getting filtered

    e.g.
    relationshipListParentColumn: “Country_x0020_Name”,
    relationshipListChildColumn: “City_x0020_Name”,

    and also i am not getting any error though Debug = true..
    when i had used only ‘Country Name’ which is display name, i used to get Column not present in relationship list.

    Am i missing anything? can you shed some light?

    thnks in advance,

  • Koen T

    You sir, are a hero! Works perfect!

    I had a lot of “Column .. Not found in relationshipList ..”, but your explanation ‘If you for example first called the “Country” column for “Kountry” and then changed it to “Country”, you still have to use “Kountry” in the code because the Jquery uses the internal name of the columns.’ is totally correct! And it even gets worse:

    I created a list from importing an Excel file. Sharepoint automatically names Column1 and Column2, but I still need to use ‘Title’ because apparently ‘Title’ is the internal name for Column1, very difficult to troubleshoot..

  • This was very helpful. One lesson from this is that while creating column names in list, aoivd the spaces.e.g. instead of “First Name” just create the column with name as “FirstName” and also avoid to change the name later.If you will change the name, then in jquery use the name that was firstly given.
    Sharepoint used the internal names for the fields created in the list.

  • Mike C

    hello worked great,
    one thing that i been trying to figure out is onchange event for the dropdownds. do you have a sample on how to bind the change event to the one of the dropdowns? I have two cascading (linked) drop down s on my page.

  • Peyman

    Dear,

    Thanks for the tutorial,
    just one quick question,
    what if the look-up list is in the parent website (for example Cities)?
    how to overcome with this scenario?

    Thanks,

  • Martin

    Hi Guys,

    Thank you for the Tutorial. After struggling for a day, I finally managed to get it working.

    My problem was that I renamed columns and my library a few times due to a script error message. Eventually I deleted my “Countries” list and my Cities list, removed them from the recycling bin and started from scratch. This worked like a bomb first time.

    Thank you for your assistance.

  • Vee

    Thanks for the post. Does this work for managed metadata? In my case i’m storing the countries/states in termstore.

  • Anushree

    When I am doing same steps I am not able to filter out city on basis of country.
    java script is not working.

  • […] Update: This also works in Sharepoint Foundation (2010). I have created a new post for 2010 here. […]

  • […] Update: This also works in Sharepoint Foundation (2010). I have created a new post for 2010 here. […]

  • I’m not sure how to rate your video for a beginner there are a lot of hulepfl tips and techniques, but most of it is unfortunately outdated. As I looked through your other videos, you already made css-tutorials. why not continue your design with a split of html and css-style?one other thing: you put all your content in a table, if you want to change your layout someday, you have to change maybe everything. thats when div-tags come handy, where you can format and position them via css-tags

  • There’s definately a lot to find out about this topic.
    I love all the points you’ve made.

  • nadeem

    Its not working for me. I followed the instructions and did exactly what I was suppose to do – verified it multiple times – but nothing happens on the form. The child dropdown shows all cities regardless of what was picked in the parent dropdown. Its like the form is not even reading the code. I am on SP2010 and using the latest js files jquery-2.2.3.min.js and jquery.SPServices-2014.02.min.js ? What could be wrong ?

  • Ian Martin

    Thank you, works brilliantly

  • aurora

    will it work for 2013?

  • JasonL

    Thanks for this post.

    re: src=”/address to document library/jquery-1.6.2.min.js”> could you provide the syntax of the path please?

    ie is this correct: src=”/http://///DocumentLibraryName/jquery-1.6.2.min.js”>

    I’ve recreated your scenario exactly with the use of Vacation Plans / Countries and Cities – so the issue must either with this path or another issue related to the js files…

    Many thanks
    Jason

  • JasonL

    Re last post this is what should have displayed:

    …ie is this correct: src=”/http://WebAppName/SiteCollectionName/SiteName/DocumentLibraryName/jquery-1.6.2.min.js”>

    thanks!

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>