Customise List view webpart using custom XSL file in Sharepoint - 2013

I had this requirement of customising the XSLT list view webpart .Where in I had to redirect the users with few query string to a page.
Usually I used to go ahead with adding the List view webpart into the page by using the browser and edit the same page using the sharepoint designer later I would start editing the XSLT of the webpart using the design-->Edit XSLT view option in the designer .That does the job

But this time I tried to customise the XSLT by adding the cutom XSL file as link in the WebPart property of the List view webpart in the browser the Property name is "XSL Link".

Here are the steps how I achieved this
1)Create a blog site
2) Added a categories webpart as I wanted to customise this webpart .
3)Opened Visual studio and create new XSL file
4)Added the below code in the XSL file and saved it as testCustomise.xsl




<?xml version="1.0" encoding="utf-8" ?>
<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">
 <xsl:output method="html" indent="no"/>

 <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">


  <xsl:variable name="TempSortedRows">
        <xsl:for-each select="/dsQueryResponse/Rows/Row">
          <xsl:sort select="@Title" order="ascending"/>       
    <xsl:copy-of select="."/>
   </xsl:for-each>
  </xsl:variable>
  <xsl:variable name="SortedRows" select="msxsl:node-set($TempSortedRows)/*"/>
  <xsl:variable name="TotalRows" select="$SortedRows"/> 
    <xsl:call-template name="DisplayCategories">
   <xsl:with-param name="Rows" select="$SortedRows"/>
  </xsl:call-template>
 </xsl:template>

 <xsl:template name="DisplayCategories" ddwrt:ghost="" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
  <xsl:param name="Rows" />
        <ul>
   <xsl:for-each select="$Rows">
    <xsl:variable name="thisNode" select="."/>
    <xsl:variable name="catid" select="$thisNode/@ID"/>
    <xsl:variable name="catName" select="$thisNode/@Title"/>
    <xsl:variable name="targeturl" select="concat('Lists/Categories/Category.aspx?CategoryId=',$catid, '&amp;','Name=', $catName)" />
    <li><a href="{$targeturl}"> <xsl:value-of select="$thisNode/@Title" /></a></li> 
   </xsl:for-each>

  </ul>
 </xsl:template>
</xsl:stylesheet>


U can change the design using any HTML tags in "DisplayCategories" template name is the tag which describes how your design looks like in the webpage.You can go use any Coulmns I have made customisation to display only the Title  columns as anchor tag which will be redirected to categories page with few query strings .You can achieve any design or funcatinallity just by editing this XSL.


Later Since I was working in SharePoint-13 I placed the testCustomise.xsl in 15/Layouts/XSL .

Now You go back to browser

5)Edit Page-->Edit category List view webpart --> in the webpart property -->XSL Link
6)Add this /_Layouts/15/xsl/testCustomise.xsl
7)then say apply and ok

Now you should be able to see those styling changes with the hyperlink to different page


If you are workin in sharepoint 2010 place the file in 14 hive xsl your link will look as
/_Layouts/xsl/testCustomise.xsl


You could also place the file in site assets or site library and provide the XSL file link of the same to the webparts .That will work too !!