Web Application Generator

When you select or edit a record in the grid view of Employees in a Northwind sample application, it will display the data fields in their respective columns.

You can change the layout of form views using custom form templates. Custom templates can also be applied to the grid view, in order to rearrange the layout of the selected row.

Start Code On Time web application generator, click on the project name, and select Design. At the top of the page, switch to the User Controls tab. On the action bar, select New | New User Control. Give this user control the name of “Employees_GridTemplate”.

Press OK to save the new user control.

Let’s apply this user control to the Employees page. In the Project Explorer, right-click on Employees / container1, and press New Control. In the User Control property, select “Employees_GridTemplate”.

Press OK to save the control.

Let’s add the Photo and Notes data fields to the grid for use with the custom template. Right-click on Employees / container1 / view1 / grid1, and press New Data Field. Use the following settings:

Press OK to save the data field. Create another data field, with the following settings:

Press OK to save.

Let’s change the column and row properties of the data fields to better fit the grid layout when in inline edit mode. Right-click on Employees / container1 / view1 / grid1, and select Show All Data Fields. Make the following changes:

On the toolbar, press Exit, and press Generate to create the user control and regenerate the web application.

When complete, switch back to the web app generator, click on the project name, and press Develop. This will open the project in Visual Studio. In the Solution Explorer, double-click on ~/Controls/Employees_GridTemplate.ascx.

Press Ctrl+K, Ctrl+D to format the document.

Make sure to preserve the @Control header that matches your programming language.

Replace the UpdatePanel element with the following markup:

<div style="display: none;">
    <div id="Employees_grid1">
        <table>
            <tr>
                <td style="vertical-align:top;margin-top:10px;">
                    <div class="FieldPlaceholder DataOnly" style="width: 90px; height: 70px; 
                        margin-right: 5px;">
                        {Photo}</div>
                </td>
                <td style="vertical-align: top;">
                    <div class="FieldPlaceholder DataOnly" style="margin-top: 4px;">
                        {TitleOfCourtesy}</div>
                    <div class="FieldPlaceholder DataOnly" style="margin: 4px;">
                        {FirstName}</div>
                    <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                        {LastName}</div>
                    <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                        {BirthDate}</div>
                    <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                        {Title}</div>
                    <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                        {HireDate}</div>
                </td>
                <td style="vertical-align: top; padding-left: 10px;">
                    <table>
                        <tr>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {Address}</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {City}</div>
                                <span style="float: left; margin-right: 4px;">,</span>
                                <div class="FieldPlaceholder DataOnly">
                                    {Region}</div>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top;">
                                <div class="FieldPlaceholder DataOnly">
                                    {PostalCode}</div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="vertical-align: top; padding-left: 10px; width:300px;">
                    <div class="FieldPlaceholder DataOnly">
                        {Notes}</div>
                </td>
            </tr>
        </table>
    </div>
</div>

The outermost div in the custom template has CSS property display set to “none”, to prevent the static template from being displayed to the users. The next div has an id of “Employees_grid1”, which means that the template will be used for the grid1 view of Employees controller.

Inside, there is a table with three columns, each containing field placeholders wrapped in curly brackets. The CSS class FieldPlaceholder makes each data field float, while the class DataOnly hides the label of the data field.

Save the file, and refresh the web application page. Select any record, and you will see the new custom grid template at work.

There is one small problem. When a row is selected, there is no way of editing the record inline. This requires addition of an Edit action in the row scope.

Switch back to the web application Designer. In the Project Explorer, right-click on Employees / container1 / view1 / Actions / ag8 (Row), and select New Action. Enter the following properties:

The When Client Script property is needed to hide the action in Data Sheet mode.

Please note that custom templates are not supported in Data Sheet mode.

Press OK to save, and press Browse on the tool bar to regenerate and open the web application in your default web browser. Go to the Employees page, and select any employee. You will see that there is now an Edit button underneath the selected row.

If you press this Edit button, the row will change to inline edit mode, using the custom grid template.

Press Cancel, mouse over the context menu of one of the rows, and press New. This will activate inline new mode, also using the custom template.

The default editForm1 view of Orders is displayed below.

If you want to modify the layout of the entire form view, you can create a custom form template. However, this method has some disadvantages: multi-column data field categories, tabbed categories, and annotations will no longer be available in the customized form view.

You can preserve this functionality with the use of category-level templates, which customize individual data field categories, instead of replacing the entire form.

Start Code On Time web application generator, click on the project name, and press Design. Switch to the User Controls tab at the top of the page. On the action bar, select New | New User Control. Give this user control the name of “Orders_CategoryTemplate”.

Press OK to save the user control.

Let’s add the user control to the Orders page. Right-click on Customers / Orders / container1, and select New Control.

In the User Control property, select Orders_CategoryTemplate.

Press OK to save the control.

Next, we’ll need to create a new category and move some of the data fields. Right-click on Customers / Orders / container1 / view1 / editForm1, and select New Category. Give it the following settings:

Press OK to save the category, and you will see it appear in the Project Explorer. Right-click on the new category, and select New Data Field.

For the Field Name property, select “ShipName”. Press OK to save the data field. You will see the data field removed from category c1 and added to category c100. Using the same procedure, add the following data fields:

Exit the Designer, and press Generate to generate the application and create the user control.

Once complete, switch back to the web app generator, click on the project name, and press Develop. This will open the project in Visual Studio. Double-click on ~/Controls/Orders_CategoryTemplate.ascx to open the file. Press Ctrl+K, Ctrl+D to format the document. You will see a @Control header at the top, and an UpdatePanel underneath.

Delete the UpdatePanel, preserving the @Control header, and paste in the following markup:

<div style="display: none;">
    <div id="Orders_editForm1_c100">
        <div style="padding: 4px 4px 4px 0px">
            <div class="FieldPlaceholder DataOnly">
                {ShipName}</div>
            <div style="clear: both">
            </div>
        </div>
        <div style="padding: 0px 4px 4px 0px">
            <div class="FieldPlaceholder DataOnly">
                {ShipAddress}</div>
            <div style="clear: both">
            </div>
        </div>
        <div style="padding: 0px 4px 4px 0px">
            <div class="FieldPlaceholder DataOnly">
                {ShipCity}</div>
            <div style="float: left; margin-right: 8px;">
                ,</div>
            <div class="FieldPlaceholder DataOnly" style="margin-right: 8px">
                {ShipRegion}</div>
            <div class="FieldPlaceholder DataOnly">
                {ShipPostalCode}</div>
            <div style="clear: both">
            </div>
        </div>
        <div style="padding: 0px 4px 4px 0px">
            <div class="FieldPlaceholder DataOnly">
                {ShipCountry}</div>
            <div style="clear: both">
            </div>
        </div>
    </div>
</div>

The markup above has one div wrapping the entire block that sets a CSS style of “display:none”. This will prevent the text of the template from being displayed to the end user. There is another div with id “Orders_editForm1_c100”, which specifies the controller name, view ID, and category ID that the template will be applied to. The rest of the HTML is used to format the field placeholders, which consist of the field names surrounded by curly brackets. The class FieldPlaceholder makes the data field float in the template body, and the class DataOnly hides the field label.

Switch back to the generator, click on the project name, and click Browse to start the application in your default browser. Navigate to Orders page, and select any order. You will see that there is a standard list of fields in a category on the left side of the page. On the right side, there is the category with a custom template.

You can define templates for all or some of the categories of the form view in the same user control. The order of the templates does not matter. Your own custom category-level template will look similar to the sample below.

<%@ Control . . . . .%>
<div style="display: none;">
    <div id="Orders_editForm1_c100">
        . . . . .
    </div>
    <div id="Orders_editForm1_c1">
        . . . . .
    </div>
</div>