Home > Sharepoint > Adding expand/collapse using XSLT in SharePoint 2013

Adding expand/collapse using XSLT in SharePoint 2013


There is a scenario to add expand/collapse functionality in the Business Data Connectivity Webpart

which pulls the data from SQL.

In the BDC webpart we can customize the look & feel using XSL Editor.

In XSL create your own template as given,

<xsl:template name=”CustomRowview”>
<tr id=”group0{generate-id()}”>
<td class=”ms-gb” colspan=”99″ style=”width:100%”>
               <a onclick=”javascript:ExpGroupBy(this);return false;” href=”javascript:”>
               <img border=”0″ name=”expand” alt=”expand” src=”/_layouts/images/plus.gif”/>
               <xsl:value-of select=”@Last_Name” disable-output-escaping=”yes”/>,
               <xsl:value-of select=”@First_Name” disable-output-escaping=”yes”/>

<tr style=”display:none;”>
<td style=”width: 50%; height: 20px”>

<td><span style=”margin-left:5px;”>Item1:</span>
<xsl:value-of select=”@Item1Value” disable-output-escaping=”yes” /></td>


<td><span style=”margin-left:5px;”>Item2:</span>
<xsl:value-of select=”@Item2Value” disable-output-escaping=”yes” /></td>








ExpGroupBy(this) – internal javascript function called for expand/collapse.

Then you can call your newly created custom template in place of default template as given,

<xsl:for-each select=”$Rows”>
<xsl:if test=”position() &gt;= $FirstRow and position() &lt;= $LastRow”>
<xsl:call-template name=”CustomRowview” />



  1. No comments yet.
  1. No trackbacks yet.

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: