Using jQuery add cascading dropdown to newform.aspx page of list

Question

How can I add cascading dropdown to newform.aspx page of list using jQuery. I tried SPServices from codeplex but it's not working. Can anybody please guide me.

Thanks

Maybe add a little more description of what you want and why SPServices isn't working for you — Per Jakobsen
– Per Jakobsen, Commented Mar 20, 2012 at 8:48
i am using this code $(document).ready(function () { $().SPServices.SPCascadeDropdowns({ listName:"Test", relationshipList:"Sub Department", relationshipListParentColumn:"Department", relationshipListChildColumn:"Sub Department", parentColumn:"Department", childColumn:"Sub Department", debug:true }); }); The cascading functionality is not working for the above script — alam235
– alam235, Commented Mar 20, 2012 at 9:16
At least the relationshipListChildColumn is wrong it should be the static name of the column which probably is Sub_x0020_Department (try to click the field in the list settings and see what url specifies as Field= then you need to urldecode this (%2F -> _) — Per Jakobsen
– Per Jakobsen, Commented Mar 20, 2012 at 9:28
If you have debug turned on, which your script shows, then SPServices will alert you as to what is wrong (ie: Cannot find list "Sub Department"). If it's not working and you're not seeing any debug, double check that jQuery is being loaded prior to the script running, and check the console for the page in something like the Google Chrome dev tools to see if any JavaScript errors are being thrown. — webdes03
– webdes03, Commented Mar 20, 2012 at 11:42
Also remember that when using jQuery with SharePoint it should be in noConflict mode and then you must use jQuery instead of $ — Per Jakobsen
– Per Jakobsen, Commented Mar 20, 2012 at 13:19

Bernd Rickenberg · Accepted Answer · 2012-03-20 08:41:51Z

One way to use cascading dropdowns (from SPServices) is the following approach:

Register a user control (ASCX) for the new form in the list schema definition (schema.xml), e.g. YourCustomListNewForm
Create the user control (ASCX) that you have registered for the new form, e.g. YourCustomListNewForm.ascx

I have cut&paste an example from some working code. I have not tested this, but it should help you along. Note that the list 'Some List' must have a lookup column called 'SomeField' and a 'Title' column that contains the values you want to display in the dropdown. The list with custom the new form has two looup columns called 'SomeField' and 'OtherField' (to 'Some List').

Step 1 - Register ASCX:

<List ...>
  <MetaData>
        <XmlDocuments>
          <XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
            <FormTemplates xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
              <New>YourCustomListNewForm</New>
            </FormTemplates>
          </XmlDocument>
        </XmlDocuments>

Step 2 - Create ASCX:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="YourCustomListNewForm.ascx.cs" Inherits="YourCustomListNewForm" %>

<script type="text/javascript">
    $(window).load(function () {
        $().SPServices.SPCascadeDropdowns({
            relationshipList: "Some List",
            relationshipListParentColumn: "SomeField (internal name)",
            relationshipListChildColumn: "Title",
            relationshipListSortColumn: "ID",
            parentColumn: "SomeField (display name)",
            childColumn: "OtherField (display name)",
            promptText: "(None)"
            // ,debug: true
        });
    });
</script>
<table cellpadding="0" cellspacing="0">
    <tr>
        <td width="190" class="ms-formlabel">
            <h3 class="ms-standardheader">
                <asp:Label ID="lblSomeField" runat="server" Text="Some Field" /></h3>
        </td>
        <td class="ms-formbody">
            <SharePoint:LookupField ID="lfSomeField" runat="server" FieldName="SomeField" />
        </td>
    </tr>
    <tr>
        <td width="190" class="ms-formlabel">
            <h3 class="ms-standardheader">
                <asp:Label ID="lblOtherField" runat="server" Text="Other Field" /></h3>
        </td>
        <td class="ms-formbody">
            <SharePoint:LookupField ID="lfOtherField" runat="server" FieldName="OtherField" />
        </td>
    </tr>
</table>

I haven't seen this approach before, but I like it. Most people using SPServices are SharePoint Designer people, as opposed to using managed solutions. This gives you the flexibility of SPServices matched with the convenience of a package and source control. Thanks for posting! — webdes03
– webdes03, Commented Mar 20, 2012 at 11:44

Stack Exchange Network

Using jQuery add cascading dropdown to newform.aspx page of list

1 Answer 1

Your Answer

Hot Network Questions

Using jQuery add cascading dropdown to newform.aspx page of list

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions