Edit the Data View Webpart Footer

Often I use a Data View webpart just so I can style everything in it. It may be hard to understand how the footer of the webpart is styled, but once you see the elements by themselves it isn’t too bad.


Here is the Footer Section with my CSS (background color of entire webpart is #212121):

< style type="text/css">
.Footer {
background-color:#212121;
text-align:right;
color:#CCCCCC;
font-family:”Segoe UI”;
font-size:11px;
border-top:1px solid #111111;
}
.FooterText {
font-family:”Segoe UI”;
font-size:12px;
color:#EEEEEE;
}
.FooterText a:link, .FooterText a:visited {
text-decoration:none;
cursor:hand;
color:#EEEEEE;
}
.FooterText a:hover {
text-decoration:underline;
cursor:hand;
color:#EEEEEE;
}
</style>

<td nowrap=”" class=”Footer“>
<xsl:if test=”$dvt_firstrow &gt; 1″ ddwrt:cf_ignore=”1″>
<a>
<xsl:attribute name=”href”>
javascript: <xsl:value-of select=”ddwrt:GenFireServerEvent(‘dvt_firstrow={1};dvt_startposition={}’)” />;
</xsl:attribute>
<span class=”FooterText“>
Goto 1
</span>
</a>
<xsl:text disable-output-escaping=”yes” ddwrt:nbsp-preserve=”yes”>
&amp;nbsp;
</xsl:text>
<a>
<xsl:attribute name=”href”>
javascript: history.back();
</xsl:attribute>
<img src=”http://<siteroot>/_layouts/images/prev.gif” border=”0″ alt=”Previous” />
</a>
<xsl:text disable-output-escaping=”yes” ddwrt:nbsp-preserve=”yes”>
&amp;nbsp;
</xsl:text>
</xsl:if>
<xsl:value-of select=”$FirstRow” /> – <xsl:value-of select=”$LastRowValue” />
<xsl:text disable-output-escaping=”yes” ddwrt:nbsp-preserve=”yes” xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime”>
&amp;nbsp;
</xsl:text>
<xsl:if test=”$LastRowValue &lt; $dvt_RowCount or string-length($dvt_nextpagedata)!=0″ ddwrt:cf_ignore=”1″>
<a>
<xsl:attribute name=”href”>
javascript: <xsl:value-of select=”ddwrt:GenFireServerEvent(concat(‘dvt_firstrow={‘,$NestRow,’};dvt_startposition={‘,$dvt_nextpagedata,’}'))” />;
</xsl:attribute>
<img src=”../_layouts/images/next.gif” border=”0″ alt=”Next” />
</a>
</xsl:if>
</td>

Notice the green highlighted Goto 1, where I changed the text, which by default will say Start. Also the Bold <siteroot> which should be replaced with the url of your site collection, as it is unique for your server and I didn’t want to display mine. I also formatted everything so that you can get a feel for the individual elements that are used to display the controls at the bottom of the webpart for enumerating through the sets of rows and allowing you to move through them. Some of it is using the data view template controls and others are javascript. You can style any of these however you wish to if you use spans or divs or whatever necessary and CSS.

Comments

Popular posts from this blog

SharePoint Designer 2013 Approval Workflow with Comments

Change SharePoint server hostname and Web Application Names

The Timer Service Failed to Recycle