Users were complaining about a slow lookupfield (shown as dropdowns) that contained over 2000 items. It was not only loading slow, they had issues with typing in values as well.
I asked this question at the msdn forum and had some great responses.
Jeroen Van Bastelaere told me that SP2010 dropdowns had a special behavior: if there are less then 20 items, SP renders the lookup field as a normal dropdownlist. If you have more then 20 items, it is rendered totally different: a textfield with ajax populating dropdown.
Forum user M_K_A then pointed me to a blogpost on codeproject. There, the writer noticed the same behavior.
He came up with a solution for customized edit/new pages: Setting the Indesign property to true on the formfield.
<SharePoint:FormField runat="server" InDesign="true" ID="field_FieldName" ControlMode="New" FieldName="FieldName" />
The writer also links to another blog, sharepointegg by Wilson Jeung who has a jquery solution.
That solution hides the current control (be it a dropdown or a textfield) and replaces it with a new dropdownlist.
A copy of the code (don’t forget to reference to the jquery library:
<script> $(document).ready(function () { // Name of the column (Display Name) var columnName = "Lookup"; // Override the Drop Down List OverrideDropDownList(columnName); // Main Function function OverrideDropDownList(columnName) { // Construct a drop down list object var lookupDDL = new DropDownList(columnName); // Do this only in complex mode... if (lookupDDL.Type == "C") { // Hide the text box and drop down arrow lookupDDL.Obj.css('display', 'none'); lookupDDL.Obj.next("img").css('display', 'none'); // Construct the simple drop down field with change trigger var tempDDLName = "tempDDLName_" + columnName; if (lookupDDL.Obj.parent().find("select[ID='" + tempDDLName + "']").length == 0) { lookupDDL.Obj.parent().append("<select name='" + tempDDLName + "' id='" + tempDDLName + "' title='" + tempDDLName + "'></select>"); lookupDDL.Obj.parent().find("select[ID='" + tempDDLName + "']").bind("change", function () { updateOriginalField(columnName, tempDDLName); }); } // Get all the options var splittedChoices = lookupDDL.Obj.attr('choices').split("|"); // get selected value var hiddenVal = $('input[name=' + lookupDDL.Obj.attr("optHid") + ']').val() if (hiddenVal == "0") { hiddenVal = lookupDDL.Obj.attr("value") } // Replacing the drop down object with the simple drop down list lookupDDL = new DropDownList(tempDDLName); // Populate the drop down list for (var i = 0; i < splittedChoices.length; i++) { var optionVal = splittedChoices[i]; i++; var optionId = splittedChoices[i]; var selected = (optionId == hiddenVal) ? " selected='selected'" : ""; lookupDDL.Obj.append("<option" + selected + " value='" + optionId + "'>" + optionVal + "</option>"); } } } // method to update the original and hidden field. function updateOriginalField(child, temp) { var childSelect = new DropDownList(child); var tempSelect = new DropDownList(temp); // Set the text box childSelect.Obj.attr("value", tempSelect.Obj.find("option:selected").val()); // Get Hidden ID var hiddenId = childSelect.Obj.attr("optHid"); // Update the hidden variable $('input[name=' + hiddenId + ']').val(tempSelect.Obj.find("option:selected").val()); } // just to construct a drop down box object. Idea token from SPServces function DropDownList(colName) { // Simple - when they are less than 20 items if ((this.Obj = $("select[Title='" + colName + "']")).html() != null) { this.Type = "S"; // Compound - when they are more than 20 items } else if ((this.Obj = $("input[Title='" + colName + "']")).html() != null) { this.Type = "C"; // Multi-select: multi-select column control on English and most other languages sites where Title looks like 'Column Name possible values' } else if ((this.Obj = $("select[ID$='SelectCandidate'][Title^='" + colName + " ']")).html() != null) { this.Type = "M"; // Multi-select: multi-select column control on a Russian site (and perhaps others) where Title like 'Выбранных значений: Column Name' } else if ((this.Obj = $("select[ID$='SelectCandidate'][Title$=': " + colName + "']")).html() != null) { this.Type = "M"; } else this.Type = null; } // End of function dropdownCtl }); </script>
Visit the SharePointEgg blog for a SPservices cascadeddropdown solution!