Thursday, October 15, 2015

SharePoint 2010 Lookup Issue with Internet Explorer


I have faced an Issue with the Sharepoint Look Up column on Internet Explorer. After some research on Internet i found  Sharepoint 2010 has an issue with Internet Explorer. While Look up column has 20 or less then 20 items then Look up column render as drop down on the page. If the limits exceeds from 20 then it's simply behaving like a Text Box.

I found a jquery solution as a fix for this issue on the Internet which i would like to share. This worked for me and resolved my problem

Paste the below script (under PlaceHolderMain in your NewForm.aspx and EditForm.aspx) to the List where you are facing the lookup dropdown issue.

 <script type="text/javascript">

$(document).ready(function () {

// Name of the column (Display Name)
var columnName = "Lookup Column";

// 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
        lookupDDL.Obj.append("<option selected='selected' value='Select'>Select</option>");

        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: This will find the multi-select column control on English and most other                          languages sites where the Title looks like 'Column Name possible values'
       } else if ((this.Obj = $("select[ID$='SelectCandidate'][Title^='" + colName + " ']")).html() !=                       null) {
             this.Type = "M";
         
       } else if ((this.Obj = $("select[ID$='SelectCandidate'][Title$=': " + colName + "']")).html() !=                      null) {
             this.Type = "M";
       } else
             this.Type = null;
} // End of function dropdownCtl
});
</script>




No comments:

Post a Comment