SharePoint: Extended DVWP-Part 2: Enhanced Layout-Rearrange columns in default and edit templates

Document directory

• What can't we do?
• Rearrange the columns containing edit/delete operations
• But wait... click Edit.

When we enable editing in the data view and delete the Mode Link, SPD always adds the link to the left. And I want to add it to the right. So you need to move it. You can use the "Edit column" function of the Data View to adjust the order of the data column. However, this does not contain the Edit/delete link column.

Note: In this article, we only focus on default templates and edit templates. The insert template will be discussed separately in the following article.

What can't we do?

First, let's discuss which operations won't work. Some general operations on moving columns (or operations that seem feasible from the design point of view) will occur here.

Unfeasible steps 

In the design view of SPD:

• Right-click the column containing the link and click "select"> "column ".
• Right-click again and select cut ".
• Right-click the rightmost column and Choose Insert> column (on the right )".
• Right-click the newly inserted column and select Paste ".
• Click the column on the rightmost (still empty) and select "delete"> "delete column"

These steps seem to be okay, but soon you will find the link on the page in the editing mode messy: the Edit and delete links in the default mode should be replaced by the Save and cancel links in the edit mode, but they do not appear, and the Edit/delete links do not appear on the right as we planned. The correct method is to edit the XSL (eXtensible Stylesheet Language, eXtensible style sheet Language) on the page ). To rearrange the columns that contain the Edit/delete operation, we need to move three parts, because the entire page is divided into three functional areas, all of which constitute the columns that contain the edit and delete links:

• Table title line
• Columns in the default Template
• Edit the data column in the template

1. move the cursor to the cell in the title bar. In the design pane of the split view, click Edit/Delete the cell at the top of the cell where the link is located. Click Edit/Delete the cell above the linkThe Code pane displays the position of the current cursor in the code. The gray box displays the cells above the Edit/delete link.As we want to move the chain bar to the rightmost, we should move the corresponding title cell to the corresponding position. It's easy to modify the original code...

<Xsl: if test = "$ dvt_1_automode = '1'" ddwrt: cf_ignore = "1"> <th class = "ms-otherwise" width = "1%" nowrap = ""> </th> </xsl: if> <th class = "ms-ku" nowrap = ""> Title </th> <th class = "ms-ku" nowrap = ""> modifier </th> <th class = "ms-Vl" nowrap = ""> modification time </th>

... Is...

<Th class = "ms-ku" nowrap = ""> Title </th> <th class = "ms-ku" nowrap = ""> modifier </th> <th class = "ms-Vl" nowrap = ""> modification time </th> <xsl: if test = "$ dvt_1_automode = '1'" ddwrt: cf_ignore = "1"> <th class = "ms-otherwise" width = "1%" nowrap = ""> </th> </xsl: if>

2. Move the data cell of the default template. In the design pane of the split view, click the first cell next to the Edit/delete Link (not the cell of the link itself ). In the design pane, click the first field and find the corresponding code from the Code view. Note that the part we want to move is actually in a check block, as if it is a mode check (if test = "$ dvt_1_automode = '1 ′"). Don't worry about all these details. You only know that this is part of the template. It is enough to control the display of the edit and delete links. Move the entire <xsl: if> block to the end of the list so that it is displayed at the end (the rightmost of 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:with-param name="KeyField">ID</xsl:with-param><xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" /><xsl:with-param name="Mode">view</xsl:with-param></xsl:call-template></td></xsl:if><td class="ms-vb"><xsl:value-of select="@Title"/></td><td class="ms-vb"><xsl:value-of select="@Editor" disable-output-escaping="yes"/></td><td class="ms-vb"><xsl:value-of select="ddwrt:FormatDate(string(@Modified), 2052, 5)"/></td>

......

<td class="ms-vb"><xsl:value-of select="@Title"/></td><td class="ms-vb"><xsl:value-of select="@Editor" disable-output-escaping="yes"/></td><td class="ms-vb"><xsl:value-of select="ddwrt:FormatDate(string(@Modified), 2052, 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:with-param name="KeyField">ID</xsl:with-param><xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" /><xsl:with-param name="Mode">view</xsl:with-param></xsl:call-template></td></xsl:if>

Save the page and view it in the browser. Now it looks like the following:

The blank content in the edit/delete link and title is moved to the rightmost.

But wait... click Edit.

Because our DVWP enables the edit and delete modes, we have another view to be modified so that our links are at the rightmost of the two views.

If you save the page and open it in a browser, click the edit link and you will find that the EditForm is not opened. aspx, but refreshes the current page. All the fields that can be edited are rendered in the form of an editing control.

Edit the template, as shown in the browser. Note that the fields in the header row are not correctly arranged.

See what SPD looks like:

1. When you hover the mouse over the Web part, a right angle bracket icon is displayed in the upper right corner. Click this icon.

2. select Edit template from the data view preview drop-down list box in the pop-up menu.

Data View Preview = edit a template

Note that there is a problem on our page: The title rows are not correctly arranged...

The title column is always one forward error (title-to-link; modifier-to-title, and so on) 

This is because each template shares the same header row but displays its own data rows. However, we can easily solve this problem by repeating the previous steps to move the Save/Cancel Cell to the rightmost.

1. Click any cell except the link field in the design pane. In the code pane, we will find that it is in a completely different template dvt_1.rowedit. In the same way, we move the entire <xsl: if> block and change the original:

 

<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:with-param name="KeyField">ID</xsl:with-param><xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" /><xsl:with-param name="Mode">edit</xsl:with-param></xsl:call-template></td></xsl:if><td class="ms-vb"><SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Edit" FieldName="Title" ItemId="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}" /><SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="Edit" /></td><td class="ms-vb"><xsl:value-of select="@Editor" disable-output-escaping="yes" /></td><td class="ms-vb"><xsl:value-of select="ddwrt:FormatDate(string(@Modified),2052, 5)" /></td>

......

 

 

<td class="ms-vb"><SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="Edit" FieldName="Title" ItemId="{@ID}" __designer:bind="{ddwrt:DataBind('u',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}" /><SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="Edit" /></td><td class="ms-vb"><xsl:value-of select="@Editor" disable-output-escaping="yes" /></td><td class="ms-vb"><xsl:value-of select="ddwrt:FormatDate(string(@Modified),2052, 5)" /></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:with-param name="KeyField">ID</xsl:with-param><xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" /><xsl:with-param name="Mode">edit</xsl:with-param></xsl:call-template></td></xsl:if>

It also moves xsl: if from the top to the bottom, and each column here is also in the same <tr> <td> block.

 

Now all the modifications are made in the Code pane. When you click the design pane, the data view is restored to the default template, therefore, we must switch back to the edit template (as we have done above) to see the modified appearance.

The Save/cancel block in the design view is moved to the right

So far, we have moved the Edit/delete operation link in DVWP to the right. The final page layout looks like this:
Default Template
 
Edit Template

In the next extended DVWP series, we will accomplish the same goal in the insert template.

 

References

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