Saturday, April 7, 2012
Custom Grid Templates

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.

Default 'grid1' view template for Employees in Code On Time web application

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”.

New User Control 'Employees_GridTemplate' in Code On Time Designer

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”.

New Control 'Employees_GridTemplate' for Employees page in Code On Time web application designer

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:

Property Value
Field Name Photo
Read Only Yes
The field is hidden True

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

Property Value
Field Name Notes
The field is hidden True

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:

Field Name Cols Rows
LastName 15  
FirstName 10  
Title 30  
TitleofCourtesy 4  
BirthDate 10  
HireDate 10  
Address 30  
City 15  
Region 4  
PostalCode 10  
Notes 40 5

Data Fields with optimized sizes in Code On Time Designer

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.

Employees grid view using custom template in Code On Time web application

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:

Property Value
Command Name Edit
When Client Script !this.get_isDataSheet()

New 'Edit' Action in 'ag8' Action Group

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.

Employees grid view with custom template and Edit button

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

Employee record using custom template with inline editing mode

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.

Employee record using custom template with inline new mode