SharePoint: Extending the DVWP – Part 1: Layout Enhancement – Rearranging Columns – Default and Edit Templates

Author: Jim Bob Howard

You probably know from reading Laura Rogers‘ posts that one of the great things you can do with the Dataview Web Part (DVWP) is use it to edit list items without ever having to leave your list page. (See Laura’s post: 3 Minute Screencast: Data View Web Part, The Basics – Multiple Edit Forms.)

I want to show you how you can extend that functionality even further.

I have used the information from Laura’s screencast many times since I first watched it. One problem I recently ran into is that SPD adds the links to the left and my requirements were to have them on the right.

So I moved them.

Note: For this article, we’ll only be looking at the Default and Edit Templates. We’ll look at the Insert Template in a future article.

What Won’t Work

First, let’s talk about what won’t work. Moving the column in Design seems like it would work, but doesn’t:

Non-working Steps

From the Design pane in SPD:

1. Right-click on the link column and choose Select > Column.
2. Right-click again and choose Cut.
3. Right-click on the right-most column and choose Insert > Column to the Right.
4. Right-click on the new column and choose Paste.
5. Right-click on the right-most column (still empty) and choose Delete > Delete Columns

At first, this will appear to work, but you’ll soon see that the links have gotten messed up on the Edit Template: the save and cancel links have been replaced with the edit and delete links from the Default Template, but they haven’t moved to the right column like we planned.

To do it right, we’ll need to edit the XSL (eXtensible Stylesheet Language) for the page. For more information on XSLT Templates, see Marc Anderson’s excellent series, Unlocking the Mysteries of Data View Web Part XSL Tags.

Rearranging the Columns

We’ll need to move three things, because this page is divided into three functional areas, all of which help draw the column that contains the edit and delete column:

• the table header row,
• the column in the Default Template, and
• the data column in the Edit Template.

1. First move the header cell…
1. In the Design pane in split mode, click on the cell above the top pair of edit / delete links

Click on the cell above the edit/delete links

2. The Code pane will now show where in the code that this is being drawn

The grey box shows where the cell is that is drawing this blank space above the edit/delete links

3. Since we’re moving the links column to the far right, we’ll also need to move this header cell over to correspond with that column.
4. Simply change…

<tr valign="top">
    <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
        <th class="ms-vh" width="1%" nowrap=""></th>
    </xsl:if>
    <th class="ms-vh" nowrap="">Title</th>
    <th class="ms-vh" nowrap="">Content Type</th>
          . . .
    <th class="ms-vh" nowrap="">Expires</th>
</tr>

…to…

<tr valign="top">
    <th class="ms-vh" nowrap="">Title</th>
    <th class="ms-vh" nowrap="">Content Type</th>
          . . .
    <th class="ms-vh" nowrap="">Expires</th>
    <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
        <th class="ms-vh" width="1%" nowrap=""></th>
    </xsl:if>
</tr>

2. Then move the default data cell…
1. Again, from the Design pane in split view, click on first cell next to the edit/delete links (not the links themselves)

In the Design pane, click on the first field to find the code in the Code pane.

2. Notice that the part you want to move is actually inside a block that checks to see what mode we’re in (if test="$dvt_1_automode = ‘1′"). Don’t worry about all of those details, just know that this portion of the template is what causes the edit and delete links to be drawn for each particular row.

   Move the entire <xsl:if> block down to the end of the list, which will cause it to be drawn last (read: on the far right) on the row:

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
    <td class="ms-vb" width="1%" nowrap="">
        <xsl:call-template name="dvt_1.automode">
            …
        </xsl:call-template>
    </td>
</xsl:if>
<td class="ms-vb">
    <xsl:value-of select="@Title"/>
</td>
<td class="ms-vb">
    <xsl:value-of select="@ContentType"/>
</td>
. . .
<td class="ms-vb">
    <xsl:value-of select="ddwrt:FormatDate(string(@Expires), 1033, 5)"/>
</td>

…to…

<td class="ms-vb">
    <xsl:value-of select="@Title"/>
</td>
<td class="ms-vb">
    <xsl:value-of select="@ContentType"/>
</td>
. . .
<td class="ms-vb">
    <xsl:value-of select="ddwrt:FormatDate(string(@Expires), 1033, 5)"/>
</td>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
    <td class="ms-vb" width="1%" nowrap="">
        <xsl:call-template name="dvt_1.automode">
            …
        </xsl:call-template>
    </td>
</xsl:if>

Save the page and look at it in the browser; it now looks similar to this:

The edit/delete links and the space in the header have moved to the far right

But Wait… There’s More

Since we’re working with a DVWP, and since we’ve turned on the edit and delete links, we have another view we need to modify so that our links are on the right in both views.

If you save this page and open it up in your browser, clicking on an edit link does not open the EditForm.aspx form, but instead will redraw this page with all of the editable fields for that record replaced with editable controls.

Edit template, as seen from the browser. Notice the header row doesn’t line up right.

To see what it looks like in SPD:

1. Click on the arrow (or chevron) that appears when you hover over the webpart, and
2. Choose Edit Template from the Data View Preview list.

Data View Preview = Edit Template


Notice that we now have an issue with our page: the headers don’t line up…


Headers are off by one (Title is over the links; Content Type  is over Title; et.al.)


That’s because both templates use the same header row, but draw their own data rows. But, we can easily fix that by repeating our previous steps to move the save/cancel cell to the far right.

3. Click on one of the fields in the Display pane (not the links, but one of the actual fields), and we’ll find that we’re in a different template in the Code pane: dvt_1.rowedit. Again, we’ll move the entire <xsl:if> block:

<xsl:template name="dvt_1.rowedit">
  <xsl:param name="Pos" />
  <tr>
    <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
      <td class="ms-vb" width="1%" nowrap="nowrap">
        <xsl:call-template name="dvt_1.automode">
          …
        </xsl:call-template>
      </td>
    </xsl:if>
    <td class="ms-vb">
      <SharePoint:formfield … FieldName="Title" ... />
      <SharePoint:fielddescription … />
    </td>
    <td class="ms-vb">
      <xsl:value-of select="@ContentType" />
    </td>
    . . .
    <td class="ms-vb">
      <SharePoint:formfield … FieldName="Expires" ... />
      <SharePoint:fielddescription … />
    </td>
  </tr>
</xsl:template>

4. Again, we’ll move the template call from the top to the bottom since each of these is simply a <td> block within the same <tr>.

<xsl:template name="dvt_1.rowedit">
  <xsl:param name="Pos" />
  <tr>
    <td class="ms-vb">
      <SharePoint:formfield … FieldName="Title" ... />
      <SharePoint:fielddescription … />
    </td>
    <td class="ms-vb">
      <xsl:value-of select="@ContentType" />
    </td>
    . . .
    <td class="ms-vb">
      <SharePoint:formfield … FieldName="Expires" ... />
      <SharePoint:fielddescription … />
    </td>
    <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
      <td class="ms-vb" width="1%" nowrap="nowrap">
        <xsl:call-template name="dvt_1.automode">
          …
        </xsl:call-template>
      </td>
    </xsl:if>
  </tr>
</xsl:template>

But now that we’ve done that in the Code pane and click on the Design pane, it reverts to Default view, so we have to switch back to Edit Template like we did in Step 2, above, to see how our changes look.


Design view with the save/cancel block moved to the right side

And there you have it: Action links on the right-hand side of a DVWP for edit and/or delete.

The final page layout now looks like this:

Default Template

Edit Template

Next time in the Extending the DVWP series, we’ll do the same thing to the Insert Template.

Author: Jim Bob Howard

Jim Bob Howard is a web designer / webmaster in the healthcare industry. He has been working with SharePoint since March 2009 and enjoys sharing what he has learned. He is a moderator and frequent contributor to Stump the Panel, and answers SharePoint questions on Twitter (@jbhoward) and via email ([email protected]).