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 to 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 a 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 allready customized the new and edit form, I had the full control over the form self (which elements should be placed on the form / which parameters do they use). So I had a form build 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 descision is done, if the dropdown should render a normal

<select>

element or a complex 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 does on the FormField, but I did not found any documentation about the property or the use of it... 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 excelent 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 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 are any comments or informations 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! :)