Advanced Fixing SharePoint 2010 Large Lookup dropdowns

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. 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! :)

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! :)

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