Click here to Skip to main content
Click here to Skip to main content
Go to top

Advanced fixing SharePoint 2010 large lookup dropdowns

, 10 May 2011
Rate this:
Please Sign up or sign in to vote.
A simple element with big lists.

Introduction

Consider the following scenario:

  • There is a large source list with more than 20 entries
  • You have a destination list with a lookup field (single-lookup) to the source list
  • For the destination list, you created (or have the possibility to create) custom new and edit forms

If you look at the new / edit form of the destination list, you will see that the dropdown rendering is no longer a simple <select> HTML element, but a complex dropdown with filtering possibilities. In some cases, this is really great, but sometimes, you just want a simple <select> element also with big lists (especially if you have an AJAX updating script for example, which populates this dropdown).

Solutions

There are several possibilities. One good solution I found was from here: http://sharepointegg.blogspot.com/2010/10/fixing-sharepoint-2010-lookup-drop-down.html. This solution uses only client script (jQuery) and does not change the rendering directly on the server.

My solution (only possible on customized new / edit forms)

Since I already customized the new and edit form, I had full control over the form itself (which elements should be placed on the form / which parameters do they use). So I had a form built with the following elements for each column:

<tr runat="server" id="FormField_FieldName">
    <td width="190px" valign="top" class="ms-formlabel">
        <h3 class="ms-standardheader">
            <nobr>
                <SharePoint:FieldLabel runat="server" 
                   ID="field_FieldName_Label" 
                   ControlMode="New" FieldName="FieldName" />
            </nobr>
        </h3>
    </td>
    <td width="400px" valign="top" class="ms-formbody">
        <SharePoint:FormField runat="server" 
          ID="field_FieldName" ControlMode="New" 
          FieldName="FieldName" />
        <SharePoint:FieldDescription runat="server" 
          ID="field_FieldName_Description" 
          FieldName="FieldName" ControlMode="New" />
    </td>
</tr>

With this markup, you get a standard SharePoint 2010 form field rendered.

In my form, I rendered all fields of my destination list with the above markup construct (just changed the "FieldName" to the actual field name), including the lookup field. After some testing, I noticed that the lookup dropdown was rendered very weird (the behaviour described in the introduction) and I needed to change that to get a standard <select> tag.

After looking at the source for the SP:FormField control using the RedGate Reflector, I saw the following part:

if ((((this.DataSource != null) && 
    (this.DataSource.Count > 20)) && 
    (!base.InDesign && SPUtility.IsIE55Up(this.Page.Request))) && 
    !SPUtility.IsAccessibilityMode(this.Page.Request))
{
    ....
}

This is where the decision is done, if the dropdown should render a normal <select> element or a complex filtering dropdown.

What is this code part deciding?

(
    Check if the DataSource != null
    AND Check if the DataSource.Count > 20
)
AND
(
    Check if the bool InDesign is false
    AND Check if the current request is from a IE5.5 (or more)
)
AND Check if the current request is NOT in accessibility mode

After looking at the code, I only saw one possibility to "override" this hardcoded >20 limit... I decided to set the property "InDesign" to true on the FormField.

I was feeling bad about this change.. I tried to find out what exactly this "InDesign" property did on the FormField, but I did not find any documentation about the property or its use... So I only saw this solution.

After changing the form HTML markup of the lookup field to this markup:

<tr runat="server" id="FormField_FieldName">
    <td width="190px" valign="top" class="ms-formlabel">
        <h3 class="ms-standardheader">
            <nobr>
                <SharePoint:FieldLabel runat="server" 
                   ID="field_FieldName_Label" 
                   ControlMode="New" FieldName="FieldName" />
            </nobr>
        </h3>
    </td>
    <td width="400px" valign="top" class="ms-formbody">
        <SharePoint:FormField runat="server" InDesign="true" 
           ID="field_FieldName" ControlMode="New" FieldName="FieldName" />
        <SharePoint:FieldDescription runat="server" 
           ID="field_FieldName_Description" 
           FieldName="FieldName" ControlMode="New" />
    </td>
</tr>

*tadaaa*, the dropdown was working excellent and it rendered the <select> markup as expected! Smile | :)

Conclusion

I found a solution for this problem, but anyway, I'm still feeling bad about this change... is there anyone out there who can explain the use of this "InDesign" property on the FormField control? Or is it just inherited and unused?

If there is any information available for this, please leave a comment! Also leave a comment if it was working on your site! Smile | :)

So, this is it for today! Happy coding and may the source be with you! Smile | :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Christoph Keller
Software Developer
Switzerland Switzerland
I'm a software developer with ASP.NET experience since 2007
 
Projects:
=========
See my projects list here: http://dotnetcorner.ch/Home/Projects
 
=========
More about me: http://dotnetcorner.ch
My Blog: http://dotnetcorner.ch/Home/Blog

Comments and Discussions

 
QuestionKnown issues PingroupDmitriy Kozlov25-Jul-13 7:49 
QuestionAdvanced fixing SharePoint 2010 large lookup dropdowns Pinmemberkishoreappini27-Sep-11 4:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 10 May 2011
Article Copyright 2011 by Christoph Keller
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid