Multi Select options updated for Dynamics CRM 2011 Rollup 14

Multi-select options in Dynamics CRM 2011 (and 4.0) have been solved in a number of ways, many being based on Jim Wang’s excellent solution. With the introduction of cross-browser support and the XRM client API, there are a number of tweaks to make to Jim’s solution making it cross browser compatible and supporting CRM 2011 Rollup 14.

Initially, dependency on a cross-browser script library should be used. In this instance im using jQuery (HREF).  The remaining changes include the use of the XRM.Page functions rather than getElementById througout the script.

The script is called with the function DisplayMultiSelectPickList(“new_CustomOptionsField”, “new_CustomOptionsValue”);
where new_CustomOptionsField is your options field with values that you wish to make multi-select and new_CustomOptionsValue is a string field to hold the pipe delimited list of IDs.  Make sure that new_CustomOptionsValue is sufficiently long to cater for all your selectable items.

The selections held in new_CustomOptionsValue are all by name.  What if you change an option name down the line? Existing selections will not be recognised, perhaps the GUID should be stored? but we then lose the ability to search for selections.  Feel free to take and adjust to suit your own needs.

function DisplayMultiSelectPickList(picklistComboControl, selectedDataControl) {
var DOMpicklist = $(picklistComboControl);
var XRMValuepicklist = Xrm.Page.getAttribute(selectedDataControl);
var XRMCtrlpicklist = Xrm.Page.getControl(picklistComboControl);
if (DOMpicklist != null && XRMValuepicklist != null && XRMCtrlpicklist != null){
// Hide the form control to be replaced, leave the label in place
DOMpicklist.hide();
//XRMCtrlpicklist.setVisible(false);
//XRMCtrlpicklistvalue.setVisible(false);
// Create a DIV container
var addDiv = document.createElement(“div”);
addDiv.style.overflow = “auto”;
addDiv.style.border = “1px #6699cc solid”;
addDiv.style.background = “#ffffff”;
addDiv.style.display=””;
addDiv.onclick = function () {
// build up the tempValue as concatentate selected items.
tempValue = “”;
DOMpicklist.next().find(“:input:checked”).each(function(){
pSelection = $(this);
tempValue += pSelection.next().text() + “||”;
});
XRMValuepicklist.setValue(tempValue);
}
// Append HTML to the picklist DOM node
DOMpicklist.parent().append(addDiv);
// Copy a checkbox into the div for each Picklist option you find
DOMpicklist.children().each(function(){
pOption = $(this); // the option element
// Only include the entry if it has some text to display (avoids the default unselected option)
if(pOption.text().length > 0)
{
var addInput = document.createElement(“input”);
addInput.type = “checkbox”;
addInput.style.width = “25px”;
addInput.style.align = “left”;
addInput.style.border = “none”;
addInput.style.display = “”;
if(isChecked(pOption.text())){
addInput.checked = “checked”;
}
else
{
addInput.checked = “”;
}
var addLabel = document.createElement(“label”);
addLabel.innerText = pOption.text();
var addBr = document.createElement(“br”);
DOMpicklist.next().append(addInput);
DOMpicklist.next().append(addLabel);
DOMpicklist.next().append(addBr);
}
});
// internal function to determine if the entry should be checked
// look for the string in the value field
function isChecked(pText){
// If there is data in the hidden field
if (XRMValuepicklist.getValue() != null && XRMValuepicklist.getValue() != “”) {
// split it into an array
var picklistvaluetemp = XRMValuepicklist.getValue().split(“||”);
// If the array contains the value then the checkbox should be checked
for (var i = 0; i < picklistvaluetemp.length; i++) {
if (picklistvaluetemp[i] == pText) return true;
}
}
return false;
}
}
else
{
alert(“ERROR: Failed to find the control”);
}
}