Let’s create a custom HTML table layout that will use the field placeholders to position the data fields.
Below is the new, longer version of the template. The style element defines CSS rules .FieldLabel and .RightAlignedInputs. Several div and table elements organize the field references surrounded by curly brackets into a complex layout.
Make sure to paste the markup text below the Control instruction in the .ascx file. The Control instruction looks as follows:
<%@ Control Language . . . %>
Template for ~/Controls/OrderFormTemplate.ascx:
<style type="text/css">
.FieldLabel
{
font-weight: bold;
padding: 4px;
width: 90px;
}
.RightAlignedInputs input
{
text-align: right;
}
</style>
<div style="display:none">
<div id="Orders_editForm1">
<table style="width: 100%">
<tr>
<td valign="top">
<table>
<tr>
<td class="FieldLabel">
Customer:
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{CustomerID}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Employee:
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{EmployeeID}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Order Date:
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{OrderDate}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Required Date:
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{RequiredDate}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Shipped Date:
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{ShippedDate}</div>
</td>
</tr>
</table>
</td>
<td valign="top">
<table style="float: right" class="RightAlignedInputs">
<tr>
<td class="FieldLabel">
Address:
</td>
<td>
<div class="FieldPlaceholder DataOnly" style="float: right">
{ShipAddress}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
City:
</td>
<td>
<div class="FieldPlaceholder DataOnly" style="float: right">
{ShipCity}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Region:
</td>
<td>
<div class="FieldPlaceholder DataOnly" style="float: right">
{ShipRegion}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Postal Code:
</td>
<td>
<div class="FieldPlaceholder DataOnly" style="float: right">
{ShipPostalCode}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Ship Country:
</td>
<td>
<div class="FieldPlaceholder DataOnly" style="float: right">
{ShipCountry}</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
{dv101Extender}
</td>
</tr>
<tr>
<td valign="bottom">
<table>
<tr>
<td class="FieldLabel">
Ship Name:
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{ShipName}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Ship Via:
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{ShipVia}</div>
</td>
</tr>
</table>
</td>
<td align="right">
<table style="margin-right: 4px;" class="RightAlignedInputs">
<tr>
<td class="FieldLabel">
Subtotal:
</td>
<td align="right">
<div class="FieldPlaceholder DataOnly" style="float: right">
{Subtotal}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Freight:
</td>
<td align="right">
<div class="FieldPlaceholder DataOnly " style="float: right">
{Freight}</div>
</td>
</tr>
<tr>
<td class="FieldLabel">
Total:
</td>
<td>
<div class="FieldPlaceholder DataOnly" style="float: right">
{Total}</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
From within Visual Studio, switch to Design View using the Design button in the bottom left corner. You can see that there is a text label next to each field placeholder. Visual tools can be used to rearrange the fields in the order of your preference.
One key element is {dv101Extender}, located in the center of the layout. This placeholder refers to Details View with ID of “dv101”, which shows Order Details.
Save the template file, and refresh the web application. Select an order, and you will see the new layout.
The Customer, Employee, and Date fields are presented on the left side. Shipping Information is displayed on the right side.
The Details grid is automatically inserted in the next row of the template.
Ship Name and Ship Via are displayed in the bottom left.
Subtotal, Freight, and Total are in the bottom right, underneath the Extended Price row of Order Details.
If you edit the record, you can see that the fields are using the lengths specified previously. If you use the up and down arrows to move through Orders, you can see the order record and order details change.
If you have a lot of Order Detail records, you can sort and filter using the columns. You can also search for specific products with Quick Find. For more complex searches, you can use the advanced search bar. The Sum aggregate in the bottom Extended Price column shows a sum of the filtered rows, while Subtotal will be calculated for all rows that belong to the Order regardless of the filter.
Users can activate the Data Sheet view mode to quickly enter line items using the keyboard.
