08.12.2009 Small update to fix scroll vertically.
Here’s a tip on how to rearrange the multiple select lookup column in a vertical orientation.
This is the default orientation:
This is the new vertical orientation:
Here’s how its done
As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.
Add a CEWP below your list-form like this:
And add this code:
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();
// Call script
mulitiLookupVertical('MultiLookup');
function mulitiLookupVertical(FieldInternalName,width){
if(width==undefined)width=370;
var thisField = $(fields[FieldInternalName]);
thisField.find("td.ms-formbody td").each(function(){
// Wrap in tr's and set width
$(this).wrap("<tr></tr>")
.find('div')
.css({'width':width});
});
// Buttons
thisField.find('br').replaceWith(' ');
thisField.find('button:first').text('Add');
thisField.find('button:last').text('Remove');
}
function init_fields(){
var res = {};
$("td.ms-formbody").each(function(){
if($(this).html().indexOf('FieldInternalName="')<0) return;
var start = $(this).html().indexOf('FieldInternalName="')+19;
var stopp = $(this).html().indexOf('FieldType="')-7;
var nm = $(this).html().substring(start,stopp);
res[nm] = this.parentNode;
});
return res;
}
</script>
Ragards
Alexander
Works like a charm!
Thanks-
Charlie Epes
too kool!
Hi Alexander,
Thank you for the post which is exactly what I need. I have inserted the CEWP under the new form.aspx but it does not seem to make any difference.
I am pretty sure the src reference is correct and cannot think of anything else..
Do you have any ideas why this might be happening?
P.S: The multilookup field in my list is actually a lookup field to a calculated field of a sharepoint calendar…
Hi, Is the NewForm an unmodified form? If so, there must be an error in the script src.
Alexander
Hi Alexander,
can’t get this to work. Get mixed up (its late tonight) with this FieldInternalname. When it is running, the longer texts for choosing should be better readable…..
Would you please so kind to explain what to change additional to changing the path to jquery?
Should I put it into an extra (=own) CEWP? Have put in to a cascaded dropdown script (at the end) from another codesharing guy.
Thx in advance
Michael
When combining different scripts you may encounter problems. Try to temporarily remove the other script – or make a “clean” test list.
Alexander
you are awesome !
Thank you for the great post. It worked as you have shown. But when I select allow multiple value in child dropdown it did not worked, is there any way I can let users select multiple values???
Hope to get you response,
Thanks
Hi,
I’m not quite sure what your problem is? This solution rearranges the “built-in” multi select lookup in SP2007. For 2010 it requires a little fix.
Alexander
you do such great work, any plans to roll out the fix for 2010?
Hi,
Try replacing ‘div’ in line 13 with ‘select’.
Alexander
Very helpful code! Yes, people still need it in 2012! 😉
What am I changing in the javascript itself? I do not know which internalfieldname to change…
Sorry for the late reply – the only thing you need to change is the name “MultiLookup” in this line:
mulitiLookupVertical('MultiLookup');The code example has been corrupted a bit when I moved the blog to a new server – you will have to change any single quotes as they are formatted wrong.
Another thing to note is that the code example is old and may not work in newer browsers or SharePoint versions.
Alexander