Displaying a Multi-Select Column "Nicely"

UPDATE 2010-08-26: I’ve added this template to the SPXSLT project on Codeplex. There’s a bit more explanation there.

UPDATE 2010-04-27: Shalin Parmar pointed out in a comment below that I had  a bug in the template where the separator would only be displayed between the first and second values.  I’ve made a change to the template to fix this as well as to allow markup in the separator.  Thanks, Shalin!

Here’s another little utility piece of XSL which I have used from time to time.  It takes as its parameters the multi-select column’s value and a separator string.  The template will replace every occurrence of the semi-colon (;) in the multi-select value with the separator string.  This is another example of what you can pull off with recursion in your XSL templates.

Instead of seeing something like this:

value1;value2;value3

if you pass in ‘ | ‘ as the separator, you’ll see

value1 | value2 | value3

<xsl:template name="MultiSelectDisplay">
  <xsl:param name="MultiSelectValue"/>
  <xsl:param name="MultiSelectSeparator"/>
  <xsl:choose>
    <xsl:when test="contains($MultiSelectValue, ';')">
      <xsl:value-of select="concat(substring-before($MultiSelectValue, ';'), $MultiSelectSeparator)" disable-output-escaping="yes"/>
      <xsl:call-template name="MultiSelectDisplay">
        <xsl:with-param name="MultiSelectValue" select="substring-after($MultiSelectValue, ';')"/>
        <xsl:with-param name="MultiSelectSeparator" select="$MultiSelectSeparator"/>
      </xsl:call-template>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="$MultiSelectValue" disable-output-escaping="yes"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

Similar Posts

85 Comments

  1. When I do a content rollup in SharePoint 2010 using “Content Query Tool Part”, columns that are defined as choices with multi select check boxes contain special characters ;# in them.

    Example: If the column contains values “A, B”, they are displayes as ;#A;#B;#

    How do I remove these?

    Please help.

    1. Content Query Web Parts (CQWPs) are XSL driven, just like DVWPs. The #; separators are what SharePoint uses when you have multiple values in a column.

      You have two choices if you don’t want to write what the .NET folks call ‘code’:
      * Adapt the CQWP’s XSL to use a template like I show here to change the display
      * Use client-side script to change the formatting of the values on page render

      M.

  2. Hi Marc,

    I am knew to using SPD and XSLT etc. Little bit confused as to how to use the code that you posted.

    I have created a dataview webpart, one of the columns of which displays a multi-select parameter as follows:

    td class=”ms-vb”>
    xsl:value-of select=”@Responsible_x0020_Area” />
    /td>

    Do I replace with your code? If so, what do I need to change to reference my parameter?

    1. Nirav:

      It’s a bit lengthy to explain if you haven’t done any XSL/DVWP work before. The example in the post ought to give you enough to go on, but post back if you have specific questions. I’ve also added the template to SPXSLT and updated the post to show the link.

      M.

  3. Thank you for your post. I am new with using XSL template, could you give me some more explaination how to use your template.

    This is what I want to do. My list has 2 columns title, and keyword. Keyword is multiple choices. I want to group by the keyword in the views. I used SharePoint Desginer 2010 to open the that view, and convert it into XSLT. Now I dont’ know how to apply your post into my list. Could you please give me some instructions.

    MY LIST
    title 1 keyword 1;keyword 2;keyword 3
    title 2 keyword 1
    title 3 keyword 1;keyword 3

    DVWP – desired
    +keyword 1
    – title1
    – title2
    – title3
    +keyword 2
    – title1
    +keyword 3
    – title1
    – title3

    Thank you very much,

    1. Andy:

      What you’re trying to do is more complex than the template here. This template simply reformats the multi-select column to make it look nicer. You’re trying to do a transformation on the values. That’ll take some different XSL magic.

      M.

  4. Is there any way to accomplish this with javascript? I am not using a DVWP.
    I have a lookup field within a picture library that is displaying “value;valu2;value3” in a < .

    The only way I can figure to do what I need is insert javascript in the SP designer.

    1. Ninel:

      Sure, you could reformat the values using JavaScript. One thing to consider is that even if you do that reformatting with script on page load, your users may see the original delimiters for a second as it’s loading up.

      M.

  5. I guess I’m trying to ask if you have any sample javascript code available for this. I’m not a JS developer.

    1. I thought you might be. ;+) I don’t have anything specific to point you to, and in any case there would be some debugging to do.

      M.

  6. Hi Marc,

    Is there a way to skip the &(&)in the above template.
    The sceanrio is in the multiselect value for one of the value I have & in the word, the template is splitting that too as a separate word as & is encoded as &

    Is there any efficient way to handle this in the above Multi select display, without using another template with some logic to handle this.

    Thanks In Advance for any suggestions.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.