Cascading Drop Down - jQuery Sharepoint

Cascading Drop down or otherwise called Dependent Drop Down in one of the most sought after control in SharePoint environment and for the matter all the business systems. I am not sure why Microsoft has not built a control in SharePoint that achieves this functionality Out of the box (OOTB). I would happy to see Microsoft create a custom field type called cascading lookup and make it available in the upcoming SharePoint version.

Alright, now let us see how we can achieve this. There are couple of different ways you can achieve this

Creating custom field type

Using jQuery

I would not recommend creating custom field unless you are selling a product and want to include this in your product. Jquery is better for couple of different reasons

Do not require GAC deployment. Hence can be used in sandboxed solution and SharePoint Online

Simpler to maintain and since it is client side would not cause any problem when migrating to newer version of SharePoint.

Let us see how we can get the ball rolling with cascading drop down using javascript/jquery

There are some prerequisite that we need to do before we can get fully working dependent drop down.

a.       Get jQuery from here

b.      Get SPService library from here

SPService is a javaScript/jQuery Library for SharePoint. Once you have the files downloaded boom all pre-requisites are done. Now let us see how we can assemble all these things together to solve the puzzle.

Create a List in SharePoint to contain the parent column information. In this case I am creating a List called Category which is going to contains entire product category.

Create another list that contains information for child column or the dependent column. I am creating a sub category List which contains product sub category information

 

Now create a Look up field in the sub category List looking information against the category list. This is done to create a relationship between category and sub category.

Create a Document Library in SharePoint to house the jQuery and SPServices file. The lIbrary should be accessible by all users. Upload

1.       jQuery-<version>.min.js

2.       SPServices-<version>.min.js

I am mentioning the version here because number varies depending on the version of jQuery and SPServices you download. At the time of writing I am using

·         jQuery 1.3.2 and

·         SPServices-0.7.0

We now have necessary infrastructure for the cascading dropdown. In order to see this working we need to create a List/Library with lookup columns for parent and child columns. I am creating a list to track the products issue. You can have library but the procedure still remains same.

 

Once you have the List click on Forms web part in the Ribbon and select default new form. The New form page will be available for editing where we can add web part.

 

I am adding a Content editor web part and here you can either directly add the following code to content editor web part or you could do the way I am doing where I am creating a file containing this script and add the link to file in content editor web part. I am going to upload the file with the script to the same library. The reason for me to do this is, I can now enable versioning and every time I modify or someone modifies there is audit for changes and always go back to previous version if needed.

You can see from the image where I have a hidden Content Editor Web Part and Cascading dropdown is working.

 

 Code:

<script language="javascript" type="text/javascript" src="/Information technology/Shared Documents/jquery-1.3.2.min.js"></script>

<script language="javascript" type="text/javascript" src="/Information technology/Shared Documents/jquery.SPServices-0.7.0.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function () {
    Cascade("{0B4E64E9-FB9A-4B42-9FEA-F428D4B56B7A}", "Category_x0020_Name", "LinkTitle", "Category Name", "Sub Category");
  
});

function Cascade(relationshipList, relationshipListParentColumn, relationshipListChildColumn, parentColumn, childColumn) {
    $().SPServices.SPCascadeDropdowns({
   
        relationshipList: relationshipList,
        relationshipListParentColumn: relationshipListParentColumn,
        relationshipListChildColumn: relationshipListChildColumn,
        parentColumn: parentColumn,
        childColumn: childColumn,
        debug: true
    });
}

Details description about each one of the parameter in spservices can be found here.

You could also do this by modifying the page in the SharePoint Designer and adding the script directly in the content place holder main

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

I would not suggest doing this because it is using SharePoint designer and could

• ·         Cause problems when changing in production if you do not have proper change control procedures
• ·         Cause validation issues in controlled environment because the pages are now ghosted and roll back will be problem.

 If you are using List remember to add the content editor webpart in Edit form also.