SharePoint 2010: How to create Cascading Lookup Field using Client Object Model

English

In previous post I have demonstrated “How to create cascading lookup field” in SharePoint 2010 using InfoPath. I will extend the possibility by utilizing Client Object Model and SharePoint Designer; therefore we don’t need InfoPath to have the cascading lookup field.

Using same scenario where City is cascading lookup field from the selected Country, we’ll see together how Client Object Model solve the problem. In this solution we need to create JS referral to SP.js for Client Object Model and JQuery to help us working with DOM.

Some key points in the video:

1. Put JQuery distribution in 14hive\Layouts.

2. Add Javascript link referral in the AdditionalPageHead place holder.

 1: <SharePoint:ScriptLink Language="Javascript" Localizable="False" runat="server" Name="jquery-1.4.4.min.js"/>

 2: <SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false"/>

3. Add Javascript code to modify cascading selector and create Client Object Model call to retrieve cascaded value in Main conten place holder.

 1: <script type="text/javascript">

 2: // JQuery_Script

 3:

 4: var spListItems;

 5:

 6: // Cascading lookup main function

 7: function FilterLookup(filterSource,lookupList)

 8: {

 9:    var filterElement = $("select[title='" + filterSource + "'] option:selected");

 10:    if(filterElement.length == 0) return;

 11:

 12:    var selectedFilterText =  filterElement.text();

 13:    var selectedFilterValue = filterElement.value;

 14:

 15:    var clientCtx = new SP.ClientContext.get_current();

 16:    var spList = clientCtx.get_web().get_lists().getByTitle(lookupList);

 17:

 18:    var camlQuery = new SP.CamlQuery();

 19:    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\''+ filterSource +'\'/>' +

 20:         '<Value Type=\'Text\'>'+ selectedFilterText +'</Value></Eq></Where></Query></View>');

 21:

 22:    this.spListItems = spList.getItems(camlQuery);

 23:    clientCtx.load(spListItems);

 24:    clientCtx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );

 25:

 26: } // 

 27:

 28: function onQuerySucceeded(sender, args) {

 29:

 30:    alert(this.selectedFilterText);

 31:    // Get CityElement Select or Input

 32:    var cityElement = $("select[title='City']");

 33:    if(cityElement.length == 0) { alert('Unknown'); }

 34:

 35:     var options = '';

 36:     var listItemEnumerator = spListItems.getEnumerator();

 37:

 38:     while (listItemEnumerator.moveNext()) {

 39:         var oListItem = listItemEnumerator.get_current();

 40:         options += '<option value="' + oListItem.get_id() + '">' + oListItem.get_item('Title') +'</option>';

 41:     }

 42:    cityElement.html(options);

 43: }

 44:

 45: function onQueryFailed(sender, args) {

 46:     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

 47: }

 48:

 49:

 50: // Attach function on document ready

 51: $(document).ready(

 52:    function() {

 53:       ExecuteOrDelayUntilScriptLoaded(FilterLookup,"sp.js");

 54:       //FilterLookup("Country","City");

 55:

 56:        // Get CountryElement Select or Input

 57:       var countryElement = $("select[title='Country']");

 58:       if(countryElement.length == 0)

 59:       {

 60:            countryElement = $("input[title='Country']");

 61:       }

 62:       if(countryElement.length != 0) {

 63:        if(countryElement[0].optHid) {

 64:           $("input[id='" + countryElement[0].optHid + "']").bind("propertychange", function() { FilterCity(); });

 65:

 66:        } else{

 67:           $("select[title='Country']").change(function() { FilterLookup("Country","City"); });

 68:

 69:        }

 70:

 71:    }

 72:

 73:

 74:    }); // Document ready

 75:

 76: </script>

4. Finally save and set the new form as default form.

15 Replies to “SharePoint 2010: How to create Cascading Lookup Field using Client Object Model”

  1. Pingback: SharePoint 2010: How to create Cascading Lookup Field | Ideas For Free

  2. Pingback: Tweets that mention SharePoint 2010: How to create Cascading Lookup Field using Client Object Model | Ideas For Free -- Topsy.com

  3. When I add new item and choose Country then window popup appear with text “undefined” after click ok I can choose from correct cities. What means undefined warning popup? Where is FilterCity() function defined?

  4. Hi getting same error as vladmir. when choosing country webpage message popup appears with text “undefined”. can you resolve this? thanks

  5. Hi,
    Thank you for your efforts in developing this piece of code which is easy to use and short.

    I was wondering where is the filterCity() function defined. If there are more than 19 items in the drop down, we face an issue in Internet Explorer:

    http://www.sharepointboris.net/2009/10/sharepoint-lookup-field-how-does-it-work-and-how-to-add-javascript-event-handler-function-to-it/

    In your code, you have rightly selected the fields based on optHid but the function filterCity() which has the code is missing. Any help on this would be appreciated. Thanks.

  6. Pingback: Cascading lookup field in SharePoint 2007 / 2010 « Microsoft Sharepoint Services

  7. Anything I did wrong as it just display An unexpected error has occurred. while I preview it,…. ???
     
    Thanks
     
     
    <%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"  %>
    <%@ 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" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
     <SharePoint:ListFormPageTitle runat="server"/>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
     <span class="die">
     <SharePoint:ListProperty Property="LinkTitle" runat="server" id="ID_LinkTitle"/>: </span>
     <SharePoint:ListItemProperty id="ID_ItemProperty" maxlength="40" runat="server"/>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
     <img src="/_layouts/images/blank.gif" width='1' height='1' alt="" />
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server" >
    <SharePoint:UIVersionedContent UIVersion="4" runat="server">
     <ContentTemplate>
        <div class="ms-quicklaunchouter">
        <div class="ms-quickLaunch">
        <Sharepoint:UIVersionedContent runat="server" UIVersion="4">
         <ContentTemplate>
          <h2 style="display:inline;" class="ms-hidden"><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,quiklnch_pagetitle%>" EncodeMethod="HtmlEncode"/></h2>
         </ContentTemplate>
        </SharePoint:UIVersionedContent>
        <SharePoint:UIVersionedContent UIVersion="3" runat="server">
         <ContentTemplate>
          <h3 class="ms-standardheader"><label class="ms-hidden"><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,quiklnch_pagetitle%>" EncodeMethod="HtmlEncode"/></label>
          <Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="ViewFormPages">
           <div class="ms-quicklaunchheader"><SharePoint:SPLinkButton id="idNavLinkViewAll" runat="server" NavigateUrl="~site/_layouts/viewlsts.aspx" Text="<%$Resources:wss,quiklnch_allcontent%>" accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>"/></div>
          </SharePoint:SPSecurityTrimmedControl>
          </h3>
         </ContentTemplate>
        </SharePoint:UIVersionedContent>
        <Sharepoint:SPNavigationManager
        id="QuickLaunchNavigationManager"
        runat="server"
        QuickLaunchControlId="QuickLaunchMenu"
        ContainedControl="QuickLaunch"
        EnableViewState="false"
        CssClass="ms-quicklaunch-navmgr"
        >
        <div>
         <SharePoint:DelegateControl runat="server" ControlId="QuickLaunchDataSource">
          <Template_Controls>
          <asp:SiteMapDataSource SiteMapProvider="SPNavigationProvider" ShowStartingNode="False" id="QuickLaunchSiteMap" StartingNodeUrl="sid:1025" runat="server" />
          </Template_Controls>
         </SharePoint:DelegateControl>
         <SharePoint:UIVersionedContent UIVersion="3" runat="server">
          <ContentTemplate>
           <SharePoint:AspMenu id="QuickLaunchMenu" runat="server" DataSourceId="QuickLaunchSiteMap" Orientation="Vertical" StaticDisplayLevels="2" ItemWrap="true" MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="0" SkipLinkText="" CssClass="s4-die">
            <LevelMenuItemStyles>
             <asp:menuitemstyle CssClass="ms-navheader" />
             <asp:menuitemstyle CssClass="ms-navitem" />
            </LevelMenuItemStyles>
            <LevelSubMenuStyles>
             <asp:submenustyle CssClass="ms-navSubMenu1" />
             <asp:submenustyle CssClass="ms-navSubMenu2" />
            </LevelSubMenuStyles>
            <LevelSelectedStyles>
             <asp:menuitemstyle CssClass="ms-selectednavheader" />
             <asp:menuitemstyle CssClass="ms-selectednav" />
            </LevelSelectedStyles>
           </SharePoint:AspMenu>
          </ContentTemplate>
         </SharePoint:UIVersionedContent>
         <SharePoint:UIVersionedContent UIVersion="4" runat="server">
          <ContentTemplate>
           <SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="0" SkipLinkText="" CssClass="s4-ql" />
          </ContentTemplate>
         </SharePoint:UIVersionedContent>
        </div>
        </Sharepoint:SPNavigationManager>
       <Sharepoint:UIVersionedContent runat="server" UIVersion="3">
        <ContentTemplate>
         <Sharepoint:SPNavigationManager
         id="TreeViewNavigationManager"
         runat="server"
         ContainedControl="TreeView"
         >
           <table class="ms-navSubMenu1" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td>
           <table class="ms-navheader" width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
            <td nowrap="nowrap" id="idSiteHierarchy">
              <SharePoint:SPLinkButton runat="server" NavigateUrl="~site/_layouts/viewlsts.aspx" id="idNavLinkSiteHierarchy" Text="<%$Resources:wss,treeview_header%>" accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>"/>
            </td>
             </tr>
           </table>
            </td>
          </tr>
           </table>
           <div class="ms-treeviewouter">
          <SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">
            <Template_Controls>
           <SharePoint:SPHierarchyDataSourceControl
            runat="server"
            id="TreeViewDataSource"
            RootContextObject="Web"
            IncludeDiscussionFolders="true"
           />
           <SharePoint:SPRememberScroll runat="server" id="TreeViewRememberScroll" onscroll="javascript:_spRecordScrollPositions(this);" style="overflow: auto;height: 400px;width: 150px; ">
             <Sharepoint:SPTreeView
            id="WebTreeView"
            runat="server"
            ShowLines="false"
            DataSourceId="TreeViewDataSource"
            ExpandDepth="0"
            SelectedNodeStyle-CssClass="ms-tvselected"
            NodeStyle-CssClass="ms-navitem"
            NodeStyle-HorizontalPadding="2"
            SkipLinkText=""
            NodeIndent="12"
            ExpandImageUrl="/_layouts/images/tvplus.gif"
            CollapseImageUrl="/_layouts/images/tvminus.gif"
            NoExpandImageUrl="/_layouts/images/tvblank.gif"
             >
             </Sharepoint:SPTreeView>
           </Sharepoint:SPRememberScroll>
            </Template_Controls>
          </SharePoint:DelegateControl>
           </div>
         </Sharepoint:SPNavigationManager>
        </ContentTemplate>
       </SharePoint:UIVersionedContent>
       <Sharepoint:UIVersionedContent runat="server" UIVersion="4">
        <ContentTemplate>
         <Sharepoint:SPNavigationManager
         id="TreeViewNavigationManagerV4"
         runat="server"
         ContainedControl="TreeView"
         CssClass="s4-treeView"
         >
           <SharePoint:SPLinkButton runat="server" NavigateUrl="~site/_layouts/viewlsts.aspx" id="idNavLinkSiteHierarchyV4" Text="<%$Resources:wss,treeview_header%>" accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>" CssClass="s4-qlheader" />
            <div class="ms-treeviewouter">
           <SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">
             <Template_Controls>
            <SharePoint:SPHierarchyDataSourceControl
             runat="server"
             id="TreeViewDataSourceV4"
             RootContextObject="Web"
             IncludeDiscussionFolders="true"
            />
            <SharePoint:SPRememberScroll runat="server" id="TreeViewRememberScrollV4" onscroll="javascript:_spRecordScrollPositions(this);" style="overflow: auto;height: 400px;width: 155px; ">
              <Sharepoint:SPTreeView
             id="WebTreeViewV4"
             runat="server"
             ShowLines="false"
             DataSourceId="TreeViewDataSourceV4"
             ExpandDepth="0"
             SelectedNodeStyle-CssClass="ms-tvselected"
             NodeStyle-CssClass="ms-navitem"
             SkipLinkText=""
             NodeIndent="12"
             ExpandImageUrl="/_layouts/images/tvclosed.png"
             ExpandImageUrlRtl="/_layouts/images/tvclosedrtl.png"
             CollapseImageUrl="/_layouts/images/tvopen.png"
             CollapseImageUrlRtl="/_layouts/images/tvopenrtl.png"
             NoExpandImageUrl="/_layouts/images/tvblank.gif"
              >
              </Sharepoint:SPTreeView>
            </Sharepoint:SPRememberScroll>
             </Template_Controls>
           </SharePoint:DelegateControl>
            </div>
         </Sharepoint:SPNavigationManager>
        </ContentTemplate>
       </SharePoint:UIVersionedContent>
        <SharePoint:UIVersionedContent UIVersion="3" runat="server" id="PlaceHolderQuickLaunchBottomV3">
         <ContentTemplate>
          <table width="100%" cellpadding="0" cellspacing="0" border="0" class="s4-die">
          <tbody>
          <tr><td>
          <table class="ms-recyclebin" width="100%" cellpadding="0" cellspacing="0" border="0">
          <tbody>
          <tr><td nowrap="nowrap">
          <SharePoint:SPLinkButton runat="server" NavigateUrl="~site/_layouts/recyclebin.aspx" id="v3idNavLinkRecycleBin" ImageUrl="/_layouts/images/recycbin.gif" Text="<%$Resources:wss,StsDefault_RecycleBin%>" PermissionsString="DeleteListItems" />
          </td></tr>
          </table>
          </td></tr>
          </table>
         </ContentTemplate>
        </SharePoint:UIVersionedContent>
        <SharePoint:UIVersionedContent UIVersion="4" runat="server" id="PlaceHolderQuickLaunchBottomV4">
         <ContentTemplate>
          <ul class="s4-specialNavLinkList">
           <li>
            <SharePoint:ClusteredSPLinkButton
             runat="server"
             NavigateUrl="~site/_layouts/recyclebin.aspx"
             ImageClass="s4-specialNavIcon"
             ImageUrl="/_layouts/images/fgimg.png"
             ImageWidth=16
             ImageHeight=16
             OffsetX=0
             OffsetY=428
             id="idNavLinkRecycleBin"
             Text="<%$Resources:wss,StsDefault_RecycleBin%>"
             CssClass="s4-rcycl"
             PermissionsString="DeleteListItems" />
           </li>
           <li>
            <SharePoint:ClusteredSPLinkButton
             id="idNavLinkViewAllV4"
             runat="server"
             PermissionsString="ViewFormPages"
             NavigateUrl="~site/_layouts/viewlsts.aspx"
             ImageClass="s4-specialNavIcon"
             ImageUrl="/_layouts/images/fgimg.png"
             ImageWidth=16
             ImageHeight=16
             OffsetX=0
             OffsetY=0
             Text="<%$Resources:wss,quiklnch_allcontent_short%>"
             accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>"/>
           </li>
          </ul>
         </ContentTemplate>
        </SharePoint:UIVersionedContent>
        </div>
        </div>
     </ContentTemplate>
    </SharePoint:UIVersionedContent>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
    <script type="text/javascript">
    // JQuery_Script
    var spListItems;
    // Cascading lookup main function
    function FilterLookup(filterSource,lookupList)
    {
      var filterElement = $("select[title='" + filterSource + "'] option:selected");
      if(filterElement.length == 0) return;  
      var selectedFilterText =  filterElement.text();
      var selectedFilterValue = filterElement.value;
      var clientCtx = new SP.ClientContext.get_current();
      var spList = clientCtx.get_web().get_lists().getByTitle(lookupList);
      var camlQuery = new SP.CamlQuery();
      camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\''+ filterSource +'\'/>' +
      '<Value Type=\'Text\'>'+ selectedFilterText +'</Value></Eq></Where></Query></View>');
      this.spListItems = spList.getItems(camlQuery);
      clientCtx.load(spListItems);
      clientCtx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );
     } // 
    function onQuerySucceeded(sender, args) {
      alert(this.selectedFilterText);
      // Get CityElement Select or Input
      var cityElement = $("select[title='City']");
      if(cityElement.length == 0) { alert('Unknown'); }
      var options = '';
      var listItemEnumerator = spListItems.getEnumerator();
      while (listItemEnumerator.moveNext()) {
           var oListItem = listItemEnumerator.get_current();
           options += '<option value="' + oListItem.get_id() + '">' + oListItem.get_item('Title') +'</option>';
       }
       cityElement.html(options);
     }
    function onQueryFailed(sender, args) {
       alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }
    // Attach function on document ready
     $(document).ready(
    function() {
           ExecuteOrDelayUntilScriptLoaded(FilterLookup,"sp.js");
           //FilterLookup("Country","City");
           // Get CountryElement Select or Input
          var countryElement = $("select[title='Country']");
          if(countryElement.length == 0)
          {
               countryElement = $("input[title='Country']");
          }
          if(countryElement.length != 0) {
           if(countryElement[0].optHid) {
              $("input[id='" + countryElement[0].optHid + "']").bind("propertychange", function() { FilterCity(); });
           } else{
              $("select[title='Country']").change(function() { FilterLookup("Country","City"); });
         }
       }
      }); // Document ready
    </script>
    <SharePoint:UIVersionedContent UIVersion="4" runat="server">
     <ContentTemplate>
     <div style="padding-left:5px">
     </ContentTemplate>
    </SharePoint:UIVersionedContent>
     <table cellpadding="0" cellspacing="0" id="onetIDListForm" style="width:100%">
      <tr>
       <td>
      <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
      <WebPartPages:DataFormWebPart runat="server" Description="" ListDisplayName="" PartOrder="2" Default="FALSE" HelpLink="" AllowRemove="True" IsVisible="True" AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True" DataSourceID="" Title="Country" ViewFlag="1048584" NoDefaultStyle="TRUE" AllowConnect="True" DisplayName="Country" PageType="PAGE_NEWFORM" FrameState="Normal" PageSize="-1" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default" DetailLink="" ShowWithSampleData="False" ListId="11fddea6-ca73-4047-8fc8-9226d61d2c89" ListName="{11FDDEA6-CA73-4047-8FC8-9226D61D2C89}" FrameType="None" PartImageSmall="" IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False" ChromeType="None" AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId="" InitialAsyncDataFetch="False" MissingAssembly="Cannot import this Web Part." HelpMode="Modeless" ListUrl="" ID="g_f80c0fc5_8b92_47b6_8864_aab585ff38cc" ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True" IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{F80C0FC5-8B92-47B6-8864-AAB585FF38CC}" __AllowXSLTEditing="true" WebPart="true" Height="" Width=""><ParameterBindings>
       <ParameterBinding Name="ListItemId" Location="QueryString(ID)" DefaultValue="0"/>
       <ParameterBinding Name="weburl" Location="None" DefaultValue="http://fgssp2010/gy/TEST"/>
       <ParameterBinding Name="ListID" Location="None" DefaultValue="{11FDDEA6-CA73-4047-8FC8-9226D61D2C89}"/>
       <ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
       <ParameterBinding Name="ManualRefresh" Location="WPProperty[ManualRefresh]"/>
       <ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
       <ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
      </ParameterBindings>
    <DataFields>
    </DataFields>
    <Xsl>
    <xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
     <xsl:output method="html" indent="no"/>
     <xsl:decimal-format NaN=""/>
     <xsl:param name="dvt_apos">'</xsl:param>
     <xsl:param name="ManualRefresh"></xsl:param>
     <xsl:variable name="dvt_1_automode">0</xsl:variable>
     <xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:dsp="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
      <xsl:choose>
       <xsl:when test="($ManualRefresh = 'True')">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
          <td valign="top">
           <xsl:call-template name="dvt_1"/>
          </td>
          <td width="1%" class="ms-vb" valign="top">
           <img src="/_layouts/images/staticrefresh.gif" id="ManualRefresh" border="0" onclick="javascript: {ddwrt:GenFireServerEvent('__cancel')}" alt="Click here to refresh the dataview."/>
          </td>
         </tr>
        </table>
       </xsl:when>
       <xsl:otherwise>
        <xsl:call-template name="dvt_1"/>
       </xsl:otherwise>
      </xsl:choose>
     </xsl:template>
     
     <xsl:template name="dvt_1">
      <xsl:variable name="dvt_StyleName">ListForm</xsl:variable>
      <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
      <div>
       <span id="part1">
        <table border="0" width="100%">
         <xsl:call-template name="dvt_1.body">
          <xsl:with-param name="Rows" select="$Rows"/>
         </xsl:call-template>
        </table>
       </span>
       <SharePoint:AttachmentUpload runat="server" ControlMode="New"/>
       <SharePoint:ItemHiddenVersion runat="server" ControlMode="New"/>
      </div>
     </xsl:template>
     <xsl:template name="dvt_1.body">
      <xsl:param name="Rows"/>
      <tr>
       <td class="ms-toolbar" nowrap="nowrap">
        <table>
         <tr>
          <td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/images/blank.gif" width="1" height="18"/></td>
          <td class="ms-toolbar" nowrap="nowrap">
           <SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1"/>
          </td>
          <td class="ms-separator"> </td>
          <td class="ms-toolbar" nowrap="nowrap" align="right">
           <SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton1"/>
          </td>
         </tr>
        </table>
       </td>
      </tr>
      <tr>
       <td class="ms-toolbar" nowrap="nowrap">
        <SharePoint:FormToolBar runat="server" ControlMode="New"/>
       </td>
      </tr>
      <xsl:call-template name="dvt_1.rowedit"/>
      <tr>
       <td class="ms-toolbar" nowrap="nowrap">
        <table>
         <tr>
          <td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/images/blank.gif" width="1" height="18"/></td>
          <td class="ms-toolbar" nowrap="nowrap">
           <SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton2"/>
          </td>
          <td class="ms-separator"> </td>
          <td class="ms-toolbar" nowrap="nowrap" align="right">
           <SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton2"/>
          </td>
         </tr>
        </table>
       </td>
      </tr>
     </xsl:template>
     <xsl:template name="dvt_1.rowedit">
      <xsl:param name="Pos" select="position()"/>
      <tr>
       <td>
        <table border="0" cellspacing="0" width="100%">
         <tr>
          <td width="190px" valign="top" class="ms-formlabel">
           <H3 class="ms-standardheader">
            <nobr>Title<span class="ms-formvalidation"> *</span>
            </nobr>
           </H3>
          </td>
          <td width="400px" valign="top" class="ms-formbody">
           <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
           <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
          </td>
         </tr>
         <tr id="idAttachmentsRow">
          <td nowrap="true" valign="top" class="ms-formlabel" width="20%">
           <SharePoint:FieldLabel ControlMode="New" FieldName="Attachments" runat="server"/>
          </td>
          <td valign="top" class="ms-formbody" width="80%">
           <SharePoint:FormField runat="server" id="AttachmentsField" ControlMode="New" FieldName="Attachments" __designer:bind="{ddwrt:DataBind('i','AttachmentsField','Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Attachments')}"/>
           <script>
              var elm = document.getElementById(&quot;idAttachmentsTable&quot;);
              if (elm == null || elm.rows.length == 0)
              document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;;
            </script>
          </td>
         </tr>
         <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
          <tr>
           <td colspan="99" class="ms-vb">
            <span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
           </td>
          </tr>
         </xsl:if>
        </table>
       </td>
      </tr>
     </xsl:template>
    </xsl:stylesheet> </Xsl>
    <DataSources>
    <SharePoint:SPDataSource runat="server" DataSourceMode="ListItem" SelectCommand="&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&quot;ContentType&quot;/&gt;&lt;Value Type=&quot;Text&quot;&gt;Item&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;/View&gt;" UseInternalName="True" UseServerDataFormat="True"><SelectParameters><WebPartPages:DataFormParameter ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0" Name="ListItemId"></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey="weburl" PropertyName="ParameterValues" DefaultValue="http://fgssp2010/gy/TEST" Name="weburl"></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{11FDDEA6-CA73-4047-8FC8-9226D61D2C89}" Name="ListID"></WebPartPages:DataFormParameter>
    </SelectParameters><UpdateParameters><WebPartPages:DataFormParameter ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0" Name="ListItemId"></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey="weburl" PropertyName="ParameterValues" DefaultValue="http://fgssp2010/gy/TEST" Name="weburl"></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{11FDDEA6-CA73-4047-8FC8-9226D61D2C89}" Name="ListID"></WebPartPages:DataFormParameter>
    </UpdateParameters><InsertParameters><WebPartPages:DataFormParameter ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0" Name="ListItemId"></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey="weburl" PropertyName="ParameterValues" DefaultValue="http://fgssp2010/gy/TEST" Name="weburl"></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{11FDDEA6-CA73-4047-8FC8-9226D61D2C89}" Name="ListID"></WebPartPages:DataFormParameter>
    </InsertParameters><DeleteParameters><WebPartPages:DataFormParameter ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0" Name="ListItemId"></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey="weburl" PropertyName="ParameterValues" DefaultValue="http://fgssp2010/gy/TEST" Name="weburl"></WebPartPages:DataFormParameter><WebPartPages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{11FDDEA6-CA73-4047-8FC8-9226D61D2C89}" Name="ListID"></WebPartPages:DataFormParameter>
    </DeleteParameters>
    </SharePoint:SPDataSource>
    </DataSources>
    </WebPartPages:DataFormWebPart>
    </ZoneTemplate></WebPartPages:WebPartZone>
      <img src="/_layouts/images/blank.gif" width='590' height='1' alt="" />
       </td>
      </tr>
     </table>
    <SharePoint:UIVersionedContent UIVersion="4" runat="server">
     <ContentTemplate>
     </div>
     </ContentTemplate>
    </SharePoint:UIVersionedContent>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
     <SharePoint:UIVersionedContent UIVersion="4" runat="server"><ContentTemplate>
      <SharePoint:CssRegistration Name="forms.css" runat="server"/>
      <sharepoint:scriptlink language="Javascript" Localizable="False" runat="server" name="../BannerImages/jquery-1.7.1.min.js"/>
      <SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false"/> 
     </ContentTemplate></SharePoint:UIVersionedContent>
    </asp:Content>
    <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>
    </table>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
    <script type="text/javascript" id="onetidPageTitleAreaFrameScript">
     if (document.getElementById("onetidPageTitleAreaFrame") != null)
     {
      document.getElementById("onetidPageTitleAreaFrame").className="ms-areaseparator";
     }
    </script>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
    <style type="text/css">
    .ms-bodyareaframe {
     padding: 8px;
     border: none;
    }
    </style>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderBodyLeftBorder" runat="server">
    <div class='ms-areaseparatorleft'><img src="/_layouts/images/blank.gif" width='8' height='100%' alt="" /></div>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderTitleRightMargin" runat="server">
    <div class='ms-areaseparatorright'><img src="/_layouts/images/blank.gif" width='8' height='100%' alt="" /></div>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderBodyRightMargin" runat="server">
    <div class='ms-areaseparatorright'><img src="/_layouts/images/blank.gif" width='8' height='100%' alt="" /></div>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaSeparator" runat="server"/>
     

  8. Hello,
     
    This turtorial is very helpful but after implementing thos functions i get error in IE


    You can not safely put the URL to the file jquery-1.4.4.min.js in the cache. File not found. Verify that the file exists in the directory system.
     
    Someone can help me with that??

    • Hello,

      12hive is short name for c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\. For SharePoint 2010 it changes to 14hive, which is c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14.

      -Riwut-

  9. Thanks for sharing this code. It has helped me alot. As mentioned in some of the post I had the undefined error message also. I removed the line ‘alert(this.selectedFilterText); ‘ from the function ‘onQuerySucceeded(sender, args)’ and it resolved the issue for me.

Leave a Reply