Customize XSLTListViewWebPart

…this post was published on 2012 January 5.

starting from a post on Sharepoint Forum, I created an example page, which can be found here.

Step 1

​Nothing special except , creation new aspx page, with some little customizations, just to looks nice! for my site; and there I inserted a XSLTListViewWebPart for a list , a testing list of my site.As you can see, I will use in next steps, same columns, 4 columns.

 

Step 2

Now, was requested to add some rows on the top of the XSLTListViewWebPart.

For this, fi created a new XSLTListViewWebPart, for same list and with same cols. From SHP Designer Ribbons i selected to ‘Customize the entire xslt”

What you have to do is to go to the code and check this code

<tr valign=”top” class=”{concat(‘ms-viewheadertr’,$dirClass)}”>
        <xsl:if test=”$MasterVersion=4 and $TabularView=’1′”>
           <xsl:if test=”($ViewStyleID = ” or $ViewStyleID = ’17’) and $ShowSelectAllCheckbox = ‘True'”>
            <th class=”ms-vh-icon” scope=”col”><input type=”checkbox” title=”{$select_deselect_all}” onclick=”ToggleAllItems(event,this,{$ViewCounter})” onfocus=”EnsureSelectionHandlerOnFocus(event,this,{$ViewCounter})” /></th>
          </xsl:if>
        </xsl:if>
        <xsl:if test=”$InlineEdit”><th class=”ms-vh2 ms-vh-inlineedit”/></xsl:if>
        <xsl:if test=”not($GroupingRender)”>
          <xsl:apply-templates mode=”header” select=”ViewFields/FieldRef[not(@Explicit=’TRUE’)]”/>
        </xsl:if>
    </tr>

Just before, and just after these code lines

I inserted my own rows, with this code:

<tr ><td style=”background-color: yellow;color:red” colspan=”4″>A new row! –  i used colspan=’4′ beacause i have 4 cols</td></tr>
<tr><td colspan=”4″ style=”background-color: yellow;color:red”>A row bellow columns title</td></tr>

 

STEP 3 – backgroud color

To change the background color, on same <tr>…</tr> element , i added a javascript function called onmouseover(), like this

<tr valign=”top” class=”{concat(‘ms-viewheadertr’,$dirClass)}” onmouseover=”change_color()” id=”wanted_row}”>

Also to identify the element i gave it , an ID :wanted_row

Last think to do is to insert a little kavascript function , just after

<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>

and the code is:

 <script type=”text/javascript” >
function change_color(){
alert(“Will change color on mouse over”);
document.getElementById(‘wanted_row’).style.backgroundColor = ‘red’;
}
</script>
This entry was posted in Coding, Javascript. Bookmark the permalink.