Custom list view customization using XSLT in SharePoint 2010

Custom list view customize using XSLT:

In custom list we have different types of view to display. But when we have a requirement that to show the items in 3*3 matrix mode. Then how to do it? Here we can achieve this by customize the default available XSLT in the SharePoint designer.

1. Create a custom list with the different fields (Name, Email Id, and Mobile).
2. Create a view as “Display View” in my case.
3. Open SharePoint designer and click on the lists and libraries.
4. Find out your list and open the view (here Display view)
5. Change the view from the “Design” tab in the ribbon under the “List view tools” and select the Boxed, no labels design.
6. Then click on the Customize XSLT option.
7. Then find out the below line in the code
• <xsl:when test="$Position mod 2 = 0">ms-alternating</xsl:when>
• <xsl:when test="$Position mod 2 = 0"
8. Change the $Position mod 3 = 0 in both the places and save
9. Now you can see the change like below.

   

Read More [...]

Posted in Custom list view, Customize, SharePoint 2010, XSLT

Collapsible list view using XSLT in SharePoint 2010

I had a requirement that to show the list in the collapsible manner(Expand/collapse by click on the + sign).I thought to use javascript/jquery, but later on i have decided to do it using SPD and make use of list settings.Here the technique.

To build the ListView in the collapsible manner, Open SharePoint designer and create page                 and place the empty data view web part.

By clicking on the “click here to select data source” select the list and from the right panel just drag and drop fields on the data view.

Now just comment out the headers of the columns as shown below.

Then click on the “Sort&Group” option from the ribbon of designer under the “Options” tab, select the Field from the Available fields and click on Add then select the “Ascending” from the sort properties , in group properties select “Collapse group by default”, click on OK.

Then copy the XSLT between the tags of <XSL></XSL> and save it as a XSLT file and upload into the site.

By adding the list view web part (same list which you used in the dataview) on the page and edit the web part and give this XSLT link and click Ok. Now it appears as desired in collapse and expand manner.

Cheers,

Read More [...]

Posted in List View, SharePoint 2010, XSLT