Posts Tagged ‘Add expand/collapse using XSLT in SharePoint 2013’

Adding expand/collapse using XSLT in SharePoint 2013

June 18, 2015 Leave a comment


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” />