Home > SharePoint 2010 > Cascading Dropdown In SharePoint 2010 using SPService

Cascading Dropdown In SharePoint 2010 using SPService


Hi all,

try this example to create cascading Dropdown in SharePoint 2010 using SPService

Step 1 : Download the Jquery file jquery-1.7.2.min.js by Jquery.com. Download jquery.SPServices-0.7.1a.zip from the Jquery Library for SharePoint Codeplex site. Upload jquery-1.7.2.min.js and jquery.SPServices-0.7.1a.min.js (from the zip file) to a document library.

Step 2 : Create your relational List and in this case i will create Three Custom Lists

– Countries List (The Parent List)

countries

– Cities List (The Child List) which has has one field in addition to the Title field; the Country field. This is a lookup field from the Countries list.

cities

– Hotels List (The Grandchild List) which has a Title field and a City field. The City field is a lookup field from the Cities list.

hotels

– Vacation Plans list which will contains cascading Dropdown which has Three lookup fields from Countries , Cities , and Hotels list

vacations

Step 3 : Open SharePoint 2010 Designer and from “Lists and Libraries” in the left pane select Vacation Plans List and click on NewForm.aspx or EditForm.aspx and select Edit in Advanced Mode in the ribbon and add the following code below

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

Insert this Lines of code :


<script language="javascript" type="text/javascript" src="/addressToDocumentLibrary/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/addressToDocumentLibrary/jquery.SPServices-0.7.1a.min.js"></script>
<script language="javascript" type="text/javascript">
 $(document).ready(function() {
 $().SPServices.SPCascadeDropdowns({
 relationshipList: "Cities",
 relationshipListParentColumn: "Country",
 relationshipListChildColumn: "Title",
 relationshipListSortColumn: "Title",
 parentColumn: "Country",
 childColumn: "City",
 debug: true
 });
$().SPServices.SPCascadeDropdowns({
 relationshipList: "Hotels",
 relationshipListParentColumn: "City",
 relationshipListChildColumn: "Title",
 parentColumn: "City",
 childColumn: "Hotel",
 debug: true
 });
});
</script>

save the changes and open your list and select add new item in Vacation Plans List

vacation

for more information you can visit this link

 

Hope this helps

Good Luck

Advertisements
Categories: SharePoint 2010
  1. No comments yet.
  1. No trackbacks yet.

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: