Arrange multiple selection lookup vertically

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:
IMG

This is the new vertical orientation:
IMG

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”):
IMG

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:IMG

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

14 thoughts on “Arrange multiple selection lookup vertically”

  1. 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…

  2. 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

    1. When combining different scripts you may encounter problems. Try to temporarily remove the other script – or make a “clean” test list.

      Alexander

  3. 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

    1. 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

    1. 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

Leave a Reply