Accordion Data View Web Part

Slalom Consultant Maarten Sundman

Slalom Consultant Maarten Sundman specializes in .NET, SharePoint, and Silverlight solutions and has experience in the Financial Services, Software, and Utilities and Energy sectors.

by Maarten Sundman

Even more ‘fun’!

Making nifty things with jQuery with the data view web part.

First component is a jQuery powered faked accordion script with highlight of mouse over.

A real accordion will not work in DVWP due to how the markup is output.

Requires:
jQuery WebUI plugin

Here’s the code:

$(document).ready(function()
{
$(“.accordion”).toggle(
function()
{
$(this).css(“font-size”, “17pt”);
$(“.cssClass”).css(“display”, “none”);
$(this).next().toggle(‘fast’);
},
function()
{
$(this).css(“font-size”, “16px”);
$(this).next().toggle(‘fast’);
});
$(“.accordion”).mouseover(
function()
{
$(this).css(“background”, “black”);
$(this).css(“color”, “white”);
}).mouseout(function()
{
$(this).css(“background”, “white”);
$(this).css(“color”, “black”);
});
});

Next, in your DVWP markup itself change all tr’s to div’s and all table tags to div as well. If you have a grouping within the view you can use this line for building the div which should be right above the xsl:choose:

<div id=”group{$groupid}” style=”display: {$displaystyle}; cursor:hand”>

The end div goes right above the end of the xsl:template.

Next, we need to make the wrapper div’s (which do not work as you’d expect preventing a real accordion). Look for “dvt_1.groupheader0″ and locate where the template is called: <xsl:call-template name=”dvt_1.groupheader1”>… On either side of this put .

You’ll need to this in two places as the first row check and all other rows both need the div wrapper.

Next, you need to remove the call-template for dvt_1.rowview altogether as we move it to be a child of the template of the group container.

<div>
<xsl:call-template name=”dvt_1.groupheader1>
<xsl:with-param name=”fieldtitle”>Field
<xsl:with-param name=”fieldname”>Field
<xsl:with-param name=”fieldvalue” select=”$groupheader1 />
<xsl:with-param name=”fieldtype” select=”‘int’” />
<xsl:with-param name=”nodeset” select=”msxsl:node-set($dvt_Rows)/root//Row[((@Field)=$groupheader1 or ((not(@Field) or @Field='') and $groupheader1=' '))]” />
<xsl:with-param name=”groupid” select=”’1” />
<xsl:with-param name=”displaystyle” select=”‘auto’” />
<xsl:with-param name=”imagesrc” select=”‘/_layouts/images/plus.gif’” />
<xsl:with-param name=”alttext” select=”‘expand’” />
<xsl:with-param name=”altname” select=”‘collapse’” />
<xsl:with-param name=”hidedetail” select=”false()” />
<xsl:with-param name=”showheader” select=”true()” />
<xsl:with-param name=”showheadercolumn” select=”false()” />
xsl:call-template>
<xsl:variable name=”dvt_KeepItemsTogether” select=”false()” />
<xsl:variable name=”dvt_HideGroupDetail” select=”false()” />
<xsl:if test=”(position() >= $FirstRow and position() <= $LastRow) or $dvt_KeepItemsTogether”>
<xsl:if test=”not($dvt_HideGroupDetail)” ddwrt:cf_ignore=”1>
<xsl:call-template name=”dvt_1.rowview” />
xsl:if>
xsl:if>
</div>

This will give you a basic AJAX enabled/ready DVWP.

accordion dvwp

Finished Product

    I normally ignore the tables for the filter and footer areas altogether as there is no real benefit to ajax there unless you want to reinvent the wheel 🙂

    -Maarten

    4 Responses to Accordion Data View Web Part

    1. Dorinda says:

      how can i take this approach and show images in a row not in a list view in accordion style?

    2. Maarten Sundman says:

      For displaying in a row you can just use one of the format templates for the list view shown in sharepoint designer. theres one template that previews as ‘_____,_____,_____’ that will do everything in a row for you. You will want to then update the field display to be something like this:

      Play with the different fields available on the image to get the combination you want 🙂

    3. raju says:

      Hi, Can you post complete xslt with jquery please.

    4. Maarten Sundman says:

      Unfortunately I cannot post the full xslt (nor would you really want it due to the length of the xslt). As it’s list specific, using the example you should be able to make it work for any list.Full jQuery needed is already in the example above.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: