Alpha Selection of List Items in a Data View Web Part (DVWP)
Say you have a list of people (or rooms or products or whatever) where you would like to let the user specify the first letter of the person and then show them all of the people’s names which start with that letter. Doable, of course, and a nice little recursive XSL template can get you there. The little screenshot below doesn’t look like much, but it shows an example of this type of alpha listing with the letter C selected.
The Alpha template below takes two parameters:
- Rows: The nodeset which contains the rows you want to work with (needed to make the right letters links vs. static text)
- RemainingLetters: The list of ‘remaining’ letters you have to work with. On first call, this should be ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’, since you still have the whole alphabet to go.
The template is recursive; as long as there’s still work to do, it calls itself again with the remaining letters to work with. There are a couple of slick bits to this:
- The xsl:attribute setting of the style bolds the letter if it is the letter the user has chosen
- If there aren’t any items in the list which start with the letter, then we don’t make the letter a link. (It’s always annoying to have a link that returns you nothing.)
- The links simply call the same page with the chosen letter on the Query String (?Letter=X)
<xsl:template name="Alpha">
<xsl:param name="Rows"/>
<xsl:param name="RemainingLetters"/>
<xsl:variable name="ThisLetter" select="substring($RemainingLetters, 1, 1)"/>
<td>
<xsl:attribute name="style">
<xsl:if test="$ThisLetter = $Letter">
font-weight:bold;
</xsl:if>
</xsl:attribute>
<xsl:choose>
<xsl:when test="count(/dsQueryResponse/Rows/Row[starts-with(@Title, $ThisLetter)])">
<a href="{$URL}?Letter={$ThisLetter}"><xsl:value-of select="$ThisLetter"/></a>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$ThisLetter"/>
</xsl:otherwise>
</xsl:choose>
</td>
<xsl:if test="string-length($RemainingLetters) &> 1">
<xsl:call-template name="Alpha">
<xsl:with-param name="Rows" select="$Rows"/>
<xsl:with-param name="RemainingLetters" select="substring-after($RemainingLetters, $ThisLetter)"/>
</xsl:call-template>
</xsl:if>
</xsl:template>
You can call the Alpha template like this:
<xsl:call-template name="Alpha"> <xsl:with-param name="Rows" select="$Rows"/> <xsl:with-param name="RemainingLetters" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/> </xsl:call-template>
and the row selection looks like this:
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[ starts-with(@Title, $Letter) or string-length($Letter) = 0 ]"/>
Marc, this is sooo neat :) Thanks very much for posting and making SP Dev world better!
Glad it helped!
M.
This is awesome. I have one question here.
Is this working with XsltListViewWebPart? My problem is with DataViewWebpart I can’t manage default list view style, means when I add new DVWP and bind list with it I lost all visual formating. Is there any way to apply default listview style to the dataview?
Kapil:
It should work with any XSL-based Web Part if you implement it right.
M.
Hello Marc,
Thanks for the post this is great. I was thinking that SharePoint should have a tool for the same features but I couldn’t find it yet. Do you know a way to write this as a aspx. page? I’m trying to make it so when you click the initial letter, page will display a table of information(stored in a list) for each employee name that starts with the clicked letter.
Thanks a lot in advance
Serkan:
This post gives you what you’re looking for by adding this XSL template into your DVWP and calling it as I outline. SharePoint doesn’t have anything like this out of the box that I’m aware of, thus the post.
M.
Hello Marc,
You’re solutions are so clean and elegant. I do enjoy visiting your site. It always inspires me to try something new!
Frankly on this one though… I give up. I’ve tried every possible scenario and can’t get this to work. I’m on Sp 2007, don’t have access to SPD, and I *thought* I had the xsl pointing correctly. I have searched for 2 weeks on a viable coded solution to get something as simple as an A-Z index done, and haven’t found anything that works. I guess I may have to just do it all by hand-coded html.
Thanks for the kind words. This solution should work for you if you are using a DVWP. The nice thing about it is that it only “lights up” the letters that have content behind them. If you hard code the links, you’ll have “dead” ones.
M.
Thank you Marc.. I was looking for this solution everywhere. The only problem is I am trying to implement this for a document library. It’s a report library and when I use this approach I lose all the links to files/reports in the title column. How can I achieve that? Thanks for your help..
Thanks Marc.. how to do this on a document library? The links to documents are lost after creating a DVWP..
moore:
I’m not sure what’s going on for you. Document Libraries are just special lists, so it should work the same.
M.
@moore – when you apply this to a document library, you’ll have to take an extra few steps to alter the column property from text to hyperlink. Here’s a video of it being done in SPD2010, to a listviewebpart by Laura Rogers (she’s amazing with OOB solutions).
The details will start ~2:27 – http://www.youtube.com/watch?v=-ZBF_J1RWis
Good luck.