Add paging in Content Query Web Part

1.7k views Asked by At

I created a custom style in Content Editor Web Part by following this article: SharePoint 2010 XSLT date formatting and I achieved the desired result. But now I want to add paging to this new style. For adding paging I followed several articles but failed to achieve the result. I am a beginner in XSLT and cannot make out how exactly I can add paging in my custom style.

For paging I followed below articles but I don't have idea how can I combine the feature of paging with above custom calendar style. Any help is appreciated.

SharePoint 2010 Content Query Web Part with paging

Retro-fitting existing XSL Stylesheets with the Paging Controls

OOTB SharePoint CQWP Paging - CodePlex

1

There are 1 answers

0
Zakir HC On

Finally !! I did it myself. Following is what I executed:

  1. I Opened SPD and copied ContentQueryMain.xsl and ItemStyle.xsl from XSL Stylesheet folder to a custom folder, while keeping both default xsl files unchanged.
  2. I copied the xsl code and css code given in this article SharePoint 2010 XSLT date formatting to create the customized event calendar "Upcoming Events" (as shown in article) to my copied ItemStyle.xsl file. (Read the whole article and you will understand how you can perform this step).
  3. Download: ImtechContentQueryWebPart.wsp custom web part from this link: http://imtech.codeplex.com/ [This web part is a custom Content Query Web Part through which you can apply your own xsl files).
  4. Install the ImtechContentQueryWebpart to your SharePoint server and activate it through site collection features in Site Settings.
  5. Now go step by step and make changes again to your copied ItemStyle.xsl and ContentQueryMain.xsl files as explained in this article: Retro-fitting existing XSL Stylesheets with the Paging Controls
  6. The author in the article referenced in point 5 has pasted the code below <xsl:template name="Default" match="*" mode="itemstyle"> Instead a I posted the code below this line <xsl:template name="EventDisplay" match="Row[@Style='EventDisplay']" mode="itemstyle"> The above line having EventDisplay you will find in your copied & edited ItemStyle.xsl file. Simply search the term EventDisplay and you will get it.

    Finally insert the Imtech Content Query Web Part to your page and copy the path of copied ItemStyle.xsl and ContentQueryMain.xsl files. Paste these paths as shown below in first image:

    enter image description here

    And the final result you get is: [*Please note the Leave Type and Click Here is appearing due to my own customized code in ItemStyle.xsl. Rest the output is same as shown in article referenced in point 2.]

    enter image description here