Thursday 3 November 2011

Cascading Drop Downs for Choice and Lookup Columns For a custom list


We can implement Cascading drop downs if we need to change the options or value of a column dynamically based on the selection from a Parent column. Below are code examples.

Cascading Drop Down Code for Lookup columns:

Provide your inputs in the below code.



<script src="/sites/…/jquery-1.4.2.min.js" type=text/javascript></script>
<script src="/sites/…/jquery.SPServices-0.5.2.min.js" type=text/javascript></script>
<script type="text/javascript">
// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function(){
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "Display Name of Master List",
        relationshipListParentColumn: "Parent Column Internal Name from Master List",
        relationshipListChildColumn: "Child Column Internal Name from Master List",
        relationshipListSortColumn: "Sorting Columns Internal Name from Master List",
        parentColumn: "Parent Column Display Name from List/Library",
        childColumn: "Child Column Display Name from List/Library"
    });  
});
</script>



Cascading Drop Down Code for Choice columns:
Note: This is using a slightly altered jquery.spservices library that I have attached. Also this example is for a two level cascading drop down code.


<script src="/sites/…/jquery-1.3.2.js" type=text/javascript></script>
<script src="/sites/…/jquery.SPServices-0.5.2.min.js" type=text/javascript></script>
<script type="text/javascript">
// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function(){
   //Save existing values of Discipline Code and Document Type. The values are lost when cascading code runs.
    var VariableName1 = $("select[title='Display Name of Parent Column in List/Library']").val();
    var VariableName2 = $("select[title='Display Name of Child Column in List/Library']").val();
    // Cascade Dropdowns
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "Display Name of Master List 1",
        relationshipListParentColumn: "Internal Name of Parent Column in Master List 1",
        relationshipListChildColumn: "Internal Name of Parent Column in Master List 1",
        parentColumn: "Display Name of Parent Column in List/Library",
        childColumn: "Display Name of Child Column in List/Library"
    });
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "Internal Name of Master List 2",
        relationshipListParentColumn: "Internal Name of Parent Column in Master List 2",
        relationshipListChildColumn: "Internal Name of Child Column in Master List 2",
        relationshipListSortColumn: "Internal Name of Sorting Column in Master List 2",
        parentColumn: "Display Name of Parent Column in List/Library",
        childColumn: "Display Name of Child Column in List/Library"
    });
        // Reset the Discipline Code to its original value before cascading code ran
        $("select[title='Display Name of Parent Column in List/Lbrary']").val(VariableName1);
        
        // trigger the change event so the cascading code runs again
        $("select[title='Display Name of Parent Column in List/Library']").trigger('change');
        // reset the Document Type to its original value
                                $("select[title='Display Name of Child Column in List/Library']").val(VariableName2);     
});
</script>

No comments:

Post a Comment