Cascading Drop-Down Project (Information Gathering)

Sep 13, 2013 at 3:20 AM
Hi Guys,

As a new member of this site I figured I should do some practice or replication of something that looks easy and was somewhat relevant to what I want to accomplish in our SP 2007 site. And thus, I chose the cascading drop down as a first exploration project. Getting this project working should help me get a better understanding on how to use the tools in this site.

What I did was, create 3 Lists. Cascading List, Parents, Children.

Parents List has a title field containing values Father 1-4 and Mother 1 - 4,

Children List has a title field containing Son 1 -8 and Daughter 1-8, and a Parent Field look up to the Parents List.

2 Sons was assigned to each Father and 2 Daughters assigned to each Mother.
ie: Son 1 and 2 was assigned to Father 1, Son 3 and 4 was assigned to Father 2, ...,... ,
Daughter 7 and 8 was assigned to Mother 4

Cascading List contains a Title field renamed to Family, Parent Field looking up to the Title of the Parents list, a Child field looking up to the Title of the Children List

I created a copy of the New Item form of the cascading list and pasted and edited the code into the ASPX file.

<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
    <SharePoint:ListFormPageTitle runat="server"/>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
    <SharePoint:ListProperty Property="LinkTitle" runat="server" id="ID_LinkTitle"/>
    <SharePoint:ListItemProperty id="ID_ItemProperty" MaxLength=40 runat="server"/>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
    <IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt="">
<asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"/>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<table cellpadding=0 cellspacing=0 id="onetIDListForm">
 <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
<WebPartPages:ListFormWebPart runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="{8C1ABBF4-EF9D-4FE2-8C62-F07A46FC10A8}" >
<WebPart xmlns:xsi="" xmlns:xsd="" xmlns="">
  <Title>Cascading List 2</Title>
  <Description />
  <Height />
  <Width />
  <DetailLink />
  <HelpLink />
  <PartImageSmall />
  <MissingAssembly>Cannot import this Web Part.</MissingAssembly>
  <PartImageLarge />
  <IsIncludedFilter />
  <ListName xmlns="">{AD305392-38C3-4305-A198-FA4069B1573F}</ListName>
  <ListItemId xmlns="">0</ListItemId>
  <ControlMode xmlns="">New</ControlMode>
  <TemplateName xmlns="">ListForm</TemplateName>
  <FormType xmlns="">8</FormType>
  <ViewFlag xmlns="">1048576</ViewFlag>
 <IMG SRC="/_layouts/images/blank.gif" width=590 height=1 alt="">
<asp:Content ContentPlaceHolderId="PlaceHolderTitleLeftBorder" runat="server">
<table cellpadding=0 height=100% width=100% cellspacing=0>
 <tr><td class="ms-areaseparatorleft"><IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt=""></td></tr>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
<script id="onetidPageTitleAreaFrameScript">
__<script language="javascript" type="text/javascript" src="../../JQueryLibraries/jquery.SPServices-2013.01.js"></script>
<script language="javascript" type="text/javascript" src="../../JQueryLibraries/jquery.SPServices-2013.01.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    relationshipList: "{7691E83F-09AA-4025-B9D3-F50922769E97}",
    relationshipListParentColumn: "Parent",
    relationshipListChildColumn: "Title",
    CAMLQuery:"<Eq><FieldRef Name='Parent'/><Value Type='Text'>"+CurrentValue+"</Value></Eq>", 
    parentColumn: "Parent",
    childColumn: "Child",
    debug: true
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe {
    padding: 8px;
    border: none;
<asp:Content ContentPlaceHolderId="PlaceHolderBodyLeftBorder" runat="server">
<div class='ms-areaseparatorleft'><IMG SRC="/_layouts/images/blank.gif" width=8 height=100% alt=""></div>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleRightMargin" runat="server">
<div class='ms-areaseparatorright'><IMG SRC="/_layouts/images/blank.gif" width=8 height=100% alt=""></div>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyRightMargin" runat="server">
<div class='ms-areaseparatorright'><IMG SRC="/_layouts/images/blank.gif" width=8 height=100% alt=""></div>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaSeparator" runat="server"/>
Form being edited was the Cascading List new item form

relationshipList: "{7691E83F-09AA-4025-B9D3-F50922769E97}" = The Children List ID
relationshipListParentColumn: "Parent" = The Parent column under Children List
relationshipListChildColumn: "Title" = The Title Column under Children List also contains Son and Daughters 1 -8.

CAMLQuery:"<Eq><FieldRef Name='Parent'/><Value Type='Text'>"+CurrentValue+"</Value></Eq>",

For CAML Query I used Field Ref Name Parent thinking that it will determine the value of the dropdowns available for the Child field lookup

This might be a bit optimistic but am I closer to the truth with what I'm doing here or am I already lost that I am now at a different dimension.
Sep 13, 2013 at 11:11 AM
I'm not sure if you have an actual question, but it looks like you are loading the minified and non-minified version of SPServices but not jQuery.

I'd suggest you start by reading the documentation more thoroughly, as the way to get this set up is pretty well spelled out.

Sep 14, 2013 at 8:01 AM
Thanks for this info, so I copy pasted the code in the cascading list documentation and made a few adjustments. BTW did I paste the code in an acceptable area, I cant seem to paste it outside "asp:content" tags.

I'm kinda new at jquery but do I need to download a jquery file and add it to my site? also do I need to add another code to call on the jquery on the page?

Thanks Again, I'm kinda new at this but getting something like this working should just start my learning in using these tools.
Sep 15, 2013 at 5:26 PM
Take a look at the bottom of the first documentation page for answers to your questions here.

Sep 16, 2013 at 9:31 AM
Edited Sep 16, 2013 at 9:33 AM
:D Thanks for your patience,

I read the instructions before, but wasn't able to understand it, only after re-reading it that I got a good idea how. I feel both stupid and enlightened at the same time.

:D Reading trully is a gift that keeps on giving.

Sep 16, 2013 at 11:31 AM
Everyone starts somewhere!

Sep 20, 2013 at 8:56 PM
Edited Sep 20, 2013 at 9:31 PM
Thanks Mark, It's awesome that youre shareing these knowledge to everyone here.

I got it working a few days ago, I have another question with cascading drop down. How do I get a child to be related to multiple parents?
For example X in column C will only be available if Column B is equal to Y and Column A is equal to Z.

Would adding another parameter here work?

relationshipList: "{7691E83F-09AA-4025-B9D3-F50922769E97}",
relationshipListParentColumn: "B",
relationshipListChildColumn: "C",
CAMLQuery:"<Eq><FieldRef Name='Parent'/><Value Type='Text'>"+CurrentValue+"</Value></Eq>", 
parentColumn: "B",
childColumn: "C",
debug: true

relationshipList: "{7691E83F-09AA-4025-B9D3-F50922769E97}",
relationshipListParentColumn: "A",
relationshipListChildColumn: "C",
CAMLQuery:"<Eq><FieldRef Name='Parent'/><Value Type='Text'>"+CurrentValue+"</Value></Eq>", 
parentColumn: "A",
childColumn: "C",
debug: true

OR can I set the relationship using CAMLQuery?

Thanks Again,
Sep 20, 2013 at 9:48 PM
No, the function isn't built to support multiple parents. However, you can certainly build something using SPServices to meet your specific needs.

Sep 24, 2013 at 4:07 PM
Thanks for all the help. I will study them first and I'll share it here if I ever suceeded on it.
Sep 24, 2013 at 4:12 PM
Great. I look forward to hearing how it goes.

Oct 29, 2013 at 1:23 PM uses SPServices to provide best free solution which support multi level dropdown list with no limits.
It is javascript/jquery based solution with no page refreshes and involves only one look up list for multiple columns.
Saves data in single line text instead of Ids that are used by typical look up columns.
Very easy to use syntax too!
    destListColTitles: ['Continent','Country','State','City'], 
    srcListColInternalNames: ['Continent','Country','State','Title'],
    srcListName: 'CitiesLookupList',
    srcListFilterCAMLQuery: "<Query><Where><Contains>
    <FieldRef Name='Continent'/><Value Type='Text'>America</Value>