Pages

Sunday, September 4, 2011

Multilevel Cascading Dropdown in SharePoint 2007 and 2010


Three Level Cascading Drop-down in SharePoint 2007/2010






I came across this perfect example  of 2 level cascading drop-down in SharePoint 2007/2010 with clear information about cascading drop-down. 
You can also use the example to create 3 level cascading drop-down. Here is how you can do that.

Go to uccorner.com/ and as instructed download 2 jquery files and store them in SharePoint library. Then follow the steps.
Two jquery files to be downloaded are jquery-1.3.2.min.js by jquery.com and jquery.SPServices-0.6.2.zip in codeplex by Mark D. Anderson..


           1.       Create List 1: Continent





2.       Create List2 : Country and create a column name it continent (could be lookup to continent list or single line of text)


      3.       Create List 3: City and Create a column name it country (could be lookup to county list or single line of test)


     4.       Create List 4: Where you use cascading dropdowns.


Create 3 columns in list 4.
1.       Continent: Lookup to title of Continent List
2.       Country: lookup to title of Country list
3.       City: Lookup to title of City list


Add the following code as in new.aspx and edit.aspx of list 4 using SharePoint Designer as instructed here.

<script language="javascript" type="text/javascript" src="/../../jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="http:/../../jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">

 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Country",
   relationshipListParentColumn: "Continent",
   relationshipListChildColumn: "Title",
   parentColumn: "Continent",
   childColumn: "Country",
   debug: true
  });

 });
</script>


<script language="javascript" type="text/javascript">
 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "City",
   relationshipListParentColumn: "Country",
   relationshipListChildColumn: "Title",
   parentColumn: "Country",
   childColumn: "City",
   debug: true
  });

 });
</script>



4 comments:

  1. Thanks Man. It's really helpful.

    ReplyDelete
  2. Hi..This is working fine for me. Have one concern..When i add more than 10 values in any of the Lists(Continent, Country or City) the functionality works, but the drop down looks a bit different and also message saying "Choose ____" on the drop down disappears. Can you please suggest if there is any limit for adding values in the lists.

    Thanks

    ReplyDelete
  3. Hi..This is working fine for me. Have one concern..When i add more than 10 values in any of the Lists(Continent, Country or City) the functionality works, but the drop down looks a bit different and also message saying "Choose ____" on the drop down disappears. Can you please suggest if there is any limit for adding values in the lists.

    ReplyDelete
  4. Hi Vishnu and Star,
    Now you do not have to use this approach.
    Please check the link below by Mark Anderson, this should help you.

    http://spservices.codeplex.com/wikipage?title=$%28%29.SPServices.SPCascadeDropdowns

    ReplyDelete