Monday, June 13, 2011

Sharepoint 2010 Customize Paging in XSLTListViewWebPart

The blog explains to add paging to our XSLTListViewWebPart in Sharepoint 2010.

  1. Create a customized html by going through one of my last blog. Click here to read my last blog.
  2. Once you have the html. There are few small things you need to keep in mind.
    1. Control your page size from the tag given below.
      <RowLimit Paged="TRUE">2</RowLimit>
    2. There are 3 major templates which you need to take care of for the paging. There will be an attribute "ddwrt:ghost="hide"" in all 3 of them. Remove them from it as it wont allow your template to get into shape.
      <xsl:template name="pagingButtons">
      <xsl:template name="CommandFooter">
      <xsl:template name="Navigation">
      
    3. In the template name Naviagtion, You can delete everything for customization, but not "id="bottomPagingCell{$WPQ}"". You will have to assign that to any element.
  3. Call the template from main row.
    <xsl:call-template name="pagingButtons" />
  4. Here are the images with myself customizing the paging.
  5. Have a look at the view what i have created for the custom paging. Below given xsl style is the complete working example for the screenshots above.
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
    version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
    xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:sharepoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal"
    xmlns:o="urn:schemas-microsoft-com:office:office" ddwrt:ghost="show_all">
  <xsl:include href="/_layouts/xsl/main.xsl" />
  <xsl:include href="/_layouts/xsl/internal.xsl" />
  <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes" />
  <xsl:output method='html' indent='yes' />
  <xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
       xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
       xmlns:sharepoint="Microsoft.SharePoint.WebControls" xmlns:o="urn:schemas-microsoft-com:office:office"
       ddwrt:ghost="" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
    <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[$EntityName = '' or (position() &gt;= $FirstRow and position() &lt;= $LastRow)]" />
    <table cellpadding="10" cellspacing="0" border="1" style="padding:25px;">
      <tr>
        <td colspan='2'>
          <b style="font-size:25px;">Friend's List</b>
        </td>
      </tr>
      <xsl:for-each select="$Rows">
        <xsl:call-template name="RowView">
        </xsl:call-template>
      </xsl:for-each>
      <tr>
          <td colspan="2"><xsl:call-template name="pagingButtons" /></td>
      </tr>
    </table>    
  </xsl:template>

  <xsl:template name="RowView">
   <xsl:variable name="thisNode" select="." />
    <tr>
      <td align="center">
        <img style="height:100px;border:5px solid #888;">
          <xsl:attribute name="src">
            <xsl:value-of select="@Picture"></xsl:value-of>
          </xsl:attribute>
          
          <xsl:attribute name="alt">
            <xsl:value-of select="@Title"></xsl:value-of>
          </xsl:attribute>
        
        </img>
      </td>
      <td valign="top">
        <b>Name : </b>
        <xsl:value-of select="@Title"></xsl:value-of>
        <br></br>
        <b>Email : </b>
        <xsl:value-of select="@Email" disable-output-escaping="yes"></xsl:value-of>
        <br></br>
        <b>Address :</b>
        <br></br>
        <blockquote>
          <xsl:value-of select="@Address" disable-output-escaping="yes"></xsl:value-of>
        </blockquote>
      </td>
    </tr>
  </xsl:template>
  
  <xsl:template name="pagingButtons">
    <xsl:choose>
          <xsl:when test="$XmlDefinition/List/@TemplateType = 106 and $XmlDefinition/@RecurrenceRowset='TRUE'">
            <xsl:if test="$dvt_nextpagedata or $dvt_prevpagedata">
                  <xsl:call-template name="CalendarExpandedRecurrenceFooter"/>
        </xsl:if>
      </xsl:when>
          <xsl:otherwise>
              <xsl:if test="$XmlDefinition/RowLimit[@Paged='TRUE']">
                <xsl:call-template name="CommandFooter">
                      <xsl:with-param name="FirstRow" select="$FirstRow" />
                      <xsl:with-param name="LastRow" select="$LastRow" />
                      <xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
                </xsl:call-template>
      </xsl:if>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>
  <xsl:template name="CommandFooter">
    <xsl:param name="FirstRow" select="1"/>
    <xsl:param name="LastRow" select="1"/>
    <xsl:param name="dvt_RowCount" select="1"/>
    <xsl:if test="$FirstRow &gt; 1 or $dvt_nextpagedata">
          <xsl:call-template name="Navigation">
            <xsl:with-param name="FirstRow" select="$FirstRow" />
            <xsl:with-param name="LastRow" select="$LastRow" />
            <xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
          </xsl:call-template>
    </xsl:if>
  </xsl:template><xsl:template name="Navigation">
    <xsl:param name="FirstRow" select="1"/>
    <xsl:param name="LastRow" select="1"/>
    <xsl:param name="dvt_RowCount" select="1"/>
    <xsl:variable name="LastRowValue">
        <xsl:choose>
            <xsl:when test="$EntityName = '' or $LastRow &lt; $RowTotalCount">
              <xsl:value-of select="$LastRow"/>    
            </xsl:when>
            <xsl:otherwise>
              <xsl:value-of select="$RowTotalCount"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:variable>
    <xsl:variable name="NextRow">
      <xsl:value-of select="$LastRowValue + 1"/>
    </xsl:variable>
        <table id="bottomPagingCell{$WPQ}" style="font-size:25px;width:100%;padding:5px;" border="0">
            <tr>
                            <td style="width:50%">
                <xsl:if test="$dvt_firstrow &gt; 1">
                  <a>
                    <xsl:choose>
                          <xsl:when test="$dvt_RowCount = 0 and not($NoAJAX)">
                            <xsl:attribute name="onclick">javascript:RefreshPageTo(event, "<xsl:value-of select="$PagePath"/>?<xsl:value-of select="$ShowWebPart"/>\u0026<xsl:value-of select='$FieldSortParam'/><xsl:value-of select='$SortQueryString'/>\u0026View=<xsl:value-of select="$View"/>");javascript:return false;</xsl:attribute>
                            <xsl:attribute name="href">javascript:</xsl:attribute>
                        <img src="/_layouts/{$LCID}/images/prev.gif" border="0" alt="{$Rows/@idRewind}" />
                        <img src="/_layouts/{$LCID}/images/prev.gif" border="0" alt="{$Rows/@idRewind}" />
                      </xsl:when>
                          <xsl:otherwise>
                            <xsl:variable name="RealRowLimit">
                                  <xsl:choose>
                                    <xsl:when test="$XmlDefinition/Query/GroupBy[@Collapse='TRUE']/@GroupLimit">
                              <xsl:value-of select ="$XmlDefinition/Query/GroupBy[@Collapse='TRUE']/@GroupLimit"/>
                            </xsl:when>
                                    <xsl:otherwise>
                              <xsl:value-of select = "$XmlDefinition/RowLimit"/>
                            </xsl:otherwise>
                                  </xsl:choose>
                        </xsl:variable>
                            <xsl:choose>
                                  <xsl:when test="not($NoAJAX)">
                                    <xsl:attribute name="onclick">javascript:RefreshPageTo(event, "<xsl:value-of select="$PagePath"/>?<xsl:value-of select="$dvt_prevpagedata"/><xsl:value-of select="$ShowWebPart"/>\u0026PageFirstRow=<xsl:value-of select="$FirstRow - $RealRowLimit"/>\u0026<xsl:value-of select='$FieldSortParam'/><xsl:value-of select='$SortQueryString'/>\u0026View=<xsl:value-of select="$View"/>");javascript:return false;</xsl:attribute>
                                    <xsl:attribute name="href">javascript:</xsl:attribute>
                          </xsl:when>
                                  <xsl:otherwise>
                                    <xsl:attribute name="href">
                              javascript: <xsl:call-template name="GenFireServerEvent">
                                            <xsl:with-param name="param" select="concat('dvt_firstrow={',$FirstRow - $XmlDefinition/RowLimit,'};dvt_startposition={',$dvt_prevpagedata,'}')"/>
                                          </xsl:call-template>
                            </xsl:attribute>
                          </xsl:otherwise>
                            </xsl:choose>
                        <img src="/_layouts/{$LCID}/images/prev.gif" border="0" alt="{$Rows/@idPrevious}" />Pre
                      </xsl:otherwise>
                    </xsl:choose>
                  </a>
              </xsl:if>
            </td>
            
                 <td style="width:50%" align="right">
                  <xsl:if test="$LastRowValue &lt; $dvt_RowCount or string-length($dvt_nextpagedata)!=0">

                  <a>
                    <xsl:choose>
                          <xsl:when test="not($NoAJAX)">
                            <xsl:attribute name="onclick">javascript:RefreshPageTo(event, "<xsl:value-of select="$PagePath"/>?<xsl:value-of select="$dvt_nextpagedata"/><xsl:value-of select="$ShowWebPart"/>\u0026PageFirstRow=<xsl:value-of select="$NextRow"/>\u0026<xsl:value-of select='$FieldSortParam'/><xsl:value-of select='$SortQueryString'/>\u0026View=<xsl:value-of select="$View"/>");javascript:return false;</xsl:attribute>
                            <xsl:attribute name="href">javascript:</xsl:attribute>
                      </xsl:when>
                          <xsl:otherwise>
                            <xsl:attribute name="href">javascript: <xsl:call-template name="GenFireServerEvent">
                                <xsl:with-param name="param" select="concat('dvt_firstrow={',$NextRow,'};dvt_startposition={',$dvt_nextpagedata,'}')"/>
                                  </xsl:call-template>
                        </xsl:attribute>
                      </xsl:otherwise>
                    </xsl:choose>
                    Next<img src="/_layouts/{$LCID}/images/next.gif" border="0" alt="{$Rows/@tb_nextpage}" />
                  </a>
              </xsl:if>
              </td>
            </tr>            
        </table>
    
    <xsl:if test="not($GroupingRender)">
    <script>
      var topPagingCell = document.getElementById(&quot;topPagingCell<xsl:value-of select="$WPQ" />&quot;);
      var bottomPagingCell = document.getElementById(&quot;bottomPagingCell<xsl:value-of select="$WPQ" />&quot;);
      if (topPagingCell != null &amp;&amp; bottomPagingCell != null)
      {
      topPagingCell.innerHTML = bottomPagingCell.innerHTML;
      }
    </script>
    </xsl:if>
  </xsl:template>
  </xsl:stylesheet>

13 comments:

  1. Hi,
    I tried to use the paging logic and i have encounterd with an error stating something like "Could not resolve SortQueryString as it is not in scope/defined".

    Could you please help me to resolve this.

    ReplyDelete
    Replies
    1. I just have one thought. Did you tried this example with the exactly same List columns which i have mentioned. If not please try that once, because the example u are watching is from that particular setting of SharePoint List.

      Once you get that working you will have to check and compare the important points i mentioned in the blog. Beleive me it should help you out.

      Thanks,
      Maulik Dhorajia

      Delete
  2. Thanks Maulik..great work...:)

    ReplyDelete
  3. Hi Maulik,

    I have list with meeting details and datetime filed, I need to view the list like "when the page loads i view the current date meeting and when i scroll back , i see the previous meeting and when i scroll forward i see the upcoming meeting. I am facing issue how to set the paging of my to current date .

    ReplyDelete
    Replies
    1. Vijay,

      Keep all the items in hidden div. On scroll forward or backwork show/hide the related data using javascript. I hope this helped.

      Thanks,
      Maulik Dhorajia

      Delete
  4. Hi Maulik,
    Great work man. I tried this and its working. I have One question. Is it possible to update the data via Ajax(Asynchronously) without the entire page post back, as it happens in case when we use List view webpart without XSLT. Because i am displaying this webpart on click of one of the Tabs on my page, and all tabs data is already present on the page.

    ReplyDelete
    Replies
    1. Yeah it should be possible. Give the path in xslt. Can on the events you can do it.

      Delete
  5. Where should i add Rowlimit tag? urgent please

    ReplyDelete
    Replies
    1. Just above or below the XSLT template.

      Delete
    2. Can you please inform where is exactly put this tag? I try above and below but not working.

      Delete
    3. @Anonymous,

      http://maulikdhorajia.blogspot.com/2011/06/sharepoint-2010-xsltlistviewwebpart.html

      Thanks

      Delete
  6. How about sorting by the headers? Any way to add that to this code?

    ReplyDelete
    Replies
    1. Nope this blog is just for the starters who are clueless when they are assigned a task like this. To do sorting and all further logic needs to be added.

      Thanks,
      Maulik Dhorajia

      Delete