Pages

Showing posts with label multilevel sharepoint cascading dropdowns. Show all posts
Showing posts with label multilevel sharepoint cascading dropdowns. Show all posts

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>