Dynamic Data Custom PageTemplates - A variation of Part 1 with the Details and SubGrid in Tabs

These articles are now under the title of Custom PageTemplates:

Custom PageTemplates Part 1 - Custom PageTemplates with Ajax Control Toolkit Tabs

Custom PageTemplates Part 2 - A variation of Part 1 with the Details and SubGrid in Tabs

Custom PageTemplates Part 3 - Dynamic/Templated Grid with Insert (Using ListView)

Custom PageTemplates Part 4 - Dynamic/Templated FromView

This article is the same as Part 1 in that it’s all the same code but with just a few changes. Here I’m going to include the DetailsView from Part 1 as the first tab of the tabbed sub grids.

The main changes are:

• The Details and the SubGrids are all generated in the ITemplate class DetailsSubGridsTemplate
• A new PageTemplate TabbedEditWithSubGrids.aspx now only has a FormView
• New FieldTemplates have been added, TableDetail.ascx and TableForm.ascx
• A new Template folder structure has been added to separate all the different template types

The Design

I thought I'd explain what I wanted to achieve and then show the code, so here goes.

What I wanted was the ability to have a compact form for dealing with related entities (i.e. a customer with all it’s related entities Orders, Addresses, Contacts etc) but I also wanted the main Form/Details to be customisable change the column and also be able to change the layout (to which end I’ve added two new FieldTemplates TableDetail.ascx and TableForm.ascx. TableDetail.ascx is just what you’d expect and is the same in appearance as the Edit.aspx page, TableForm.ascx on the other hand is fully customisable via templates (User Controls as mentioned in the previous article Part 1).

So we should end up with something like this:

Figure 1 - TableDetail.ascx	Figure 2 - TableForm.ascx

As you can see Figure 1 is based on the standard Edit.aspx page template and Figure 2 is based on a custom template defined for each table. At runtime the ITemplate class DetailsSubGridsTemplate checks to see if a template exists for the current table and then gives the DynamicControl a UIHint for either TableDetail of TableForm.

Hope that makes sense.

The Implementation of ITemplate

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.DynamicData;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using System.IO;

/// <summary>
/// Creates an item template that renders any children columns in the passed in table as GridViews
/// </summary>
public class DetailsSubGridsTemplate : ITemplate
{
    private MetaTable _table;
    private Page _page;

    public DetailsSubGridsTemplate(MetaTable table, Page page)
    {
        _table = table;
        _page = page;
    }

    public void InstantiateIn(Control container)
    {
        IParserAccessor acessor = container;
        // get all the children columns
        var subGridTables = from c in _table.Columns.OfType<MetaChildrenColumn>()
                            select new SubDetails()
                            {
                                Column = c,
                                SubGridMetaData = c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault(),
                                Order = c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault() != null
                                && c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault().Order > 0
                                ? c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault().Order
                                : int.MaxValue,
                            };

        // sort the according to Order first and column name second
        // note if SubGridViewsAttribute is not allied or the attrivute
        // has no value for Order then just sort but column name
        subGridTables = from sg in subGridTables
                        orderby sg.Order, sg.Column.Name
                        select sg;

        // make sure there are some children columns
        if (subGridTables.Count() > 0)
        {
            // create tab container to hold each children column
            var tabContainer = new TabContainer();
            tabContainer.ID = "tabContainer";

            // enable auto poastback so selected tab is remembered
            //tabContainer.AutoPostBack = true;
            tabContainer.EnableViewState = true;

            // add the tab container to the page
            acessor.AddParsedSubObject(tabContainer);

            // Add DetailsView =======================================================================
            // add tab pannel to hold the parent table
            var tabPanelParent = new TabPanel();
            tabPanelParent.ID = "tpParent" + _table.Name;

            // add the tab panel
            tabContainer.Tabs.Add(tabPanelParent);

            // set the tab header maybe later add an attribute?
            tabPanelParent.HeaderText = _table.DisplayName;

            //Instantiate a DynamicControl for this Children Column
            var parentDetails = new DynamicControl(DataBoundControlMode.Edit)
            {
                ID = "tpParent",

                // set data field to the first column name
                // any column will do not used
                DataField = _table.Columns[0].Name
            };

            // if a template exists then use the TableForm control
            String itemTemplate = _table.Model.DynamicDataFolderVirtualPath + "Templates/FormViewEdit/" + _table.Name + ".ascx";
            String path = _page.Server.MapPath(itemTemplate);
            if (File.Exists(path))
                parentDetails.UIHint = "TableForm";
            else
                // else use TableDetail
                parentDetails.UIHint = "TableDetail";

            // add the DynamicControl to the tab panel
            tabPanelParent.Controls.Add(parentDetails);
            // End DetailsView =======================================================================

            // add a tab panel for each children table
            foreach (SubDetails SubGridDetails in subGridTables)
            {
                var tabPanel = new AjaxControlToolkit.TabPanel();
                tabPanel.ID = "tp" + SubGridDetails.Column.Name;

                // add the tab panel
                tabContainer.Tabs.Add(tabPanel);

                var subGridAttributes = SubGridDetails.Column.Attributes.OfType<SubGridViewsAttribute>().SingleOrDefault();
                // set the Tab's name to be the tables display name 
                // or table Name if no attribute is present
                if (subGridAttributes != null && subGridAttributes.TabName.Length > 0)
                    tabPanel.HeaderText = subGridAttributes.TabName;
                else
                    tabPanel.HeaderText = SubGridDetails.Column.ChildTable.DisplayName;

                //Instantiate a DynamicControl for this Children Column
                var childrenGrid = new DynamicControl(DataBoundControlMode.Edit)
                {
                    ID = SubGridDetails.Column.Name,

                    // set UIHint
                    UIHint = "ChildrenGrid",

                    // set data field to column name
                    DataField = SubGridDetails.Column.Name
                };

                // add the DynamicControl to the tab panel
                tabPanel.Controls.Add(childrenGrid);
            }
            // set the tab pannels index to 0 which
            // forces the first tab to be selected
            if (!_page.IsPostBack)
                tabContainer.ActiveTabIndex = 0;
        }
        else
        {
            // Add DetailsView =======================================================================
            //Instantiate a DynamicControl for this Children Column
            var parentDetails = new DynamicControl(DataBoundControlMode.Edit)
            {
                ID = "tpParent",

                // set data field to the first column name
                // any column will do not used
                DataField = _table.Columns[0].Name
            };

            // if a template exists then use the TableForm control
            String itemTemplate = _table.Model.DynamicDataFolderVirtualPath + "Templates/FormViewEdit/" + _table.Name + ".ascx";
            String path = _page.Server.MapPath(itemTemplate);
            if (File.Exists(path))
                parentDetails.UIHint = "TableForm";
            else
                // else use TableDetail
                parentDetails.UIHint = "TableDetail";

            // add the DynamicControl to the tab panel
            acessor.AddParsedSubObject(parentDetails);
            // End DetailsView =======================================================================

            // if no children columns
            // add label to show no grids
            var label = new Label();
            label.Text = "There are no SubGrids";
            label.CssClass = "droplist";

            // add the label to the page
            acessor.AddParsedSubObject(label);
        }
    }

    private class SubDetails
    {
        /// <summary>
        /// Column to display
        /// </summary>
        public MetaChildrenColumn Column { get; set; }

        /// <summary>
        /// MetaData if any from the original column
        /// </summary>
        public SubGridViewsAttribute SubGridMetaData { get; set; }

        /// <summary>
        /// Holds the sort order value
        /// </summary>
        public int Order { get; set; }
    }
}

Listing 1 – DetailsSubGridsTemplate ITemplate class

As you can see the bulk of the class is the same as the ITemplate class from the previous article (Part 6) the two main changes are, one is the tests for the number of records in the DetailsSubGridsTemplate, this is because there are always tabs if there is one or more children tables. And the second change is the addition of the code to add the Details/Form of the parent table to the first tab or if not children tables are present to the page.

Field Templates

<%@ Control 
    Language="C#" 
    CodeFile="TableDetail.ascx.cs" 
    Inherits="TableDetailField" %>

<asp:DynamicDataManager 
    ID="DynamicDataManager1" 
    runat="server" 
    AutoLoadForeignKeys="true" />
    
<asp:ValidationSummary ID="ValidationSummary1" 
    D="ValidationSummary1" 
    runat="server" 
    EnableClientScript="true"
    HeaderText="List of validation errors" />
    
<asp:DynamicValidator 
    runat="server" 
    ID="DetailsViewValidator" 
    ControlToValidate="DetailsView1"
    Display="None" />
    
<asp:DetailsView 
    ID="DetailsView1" 
    runat="server" 
    DataSourceID="DetailsDataSource" 
    DefaultMode="Edit"
    AutoGenerateEditButton="True" 
    OnItemCommand="DetailsView1_ItemCommand" 
    OnItemUpdated="DetailsView1_ItemUpdated"
    CssClass="detailstable" 
    FieldHeaderStyle-CssClass="bold">
</asp:DetailsView>

<asp:LinqDataSource 
    ID="DetailsDataSource" 
    runat="server" 
    EnableUpdate="true">
    <WhereParameters>
        <asp:DynamicQueryStringParameter />
    </WhereParameters>
</asp:LinqDataSource>

Listing 2 - TableDetail.ascx

using System;
using System.Linq;
using System.Web.DynamicData;
using System.Web.UI.WebControls;

public partial class TableDetailField : FieldTemplateUserControl
{
    protected MetaTable table;

    public String[] DisplayColumns { get; set; }

    protected void Page_Init(object sender, EventArgs e)
    {
        DynamicDataManager1.RegisterControl(DetailsView1);
        table = DetailsDataSource.GetTable();

        var attribute = Table.Attributes.OfType<ShowColumnsAttribute>().SingleOrDefault();

        if (attribute != null)
            DisplayColumns = attribute.DisplayColumns;

        DetailsView1.RowsGenerator = new FieldTemplateRowGenerator(table, DisplayColumns);
    }

    protected void DetailsView1_ItemCommand(object sender, DetailsViewCommandEventArgs e)
    {
        if (e.CommandName == DataControlCommands.CancelCommandName)
        {
            Response.Redirect(table.ListActionPath);
        }
    }

    protected void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)
    {
        if (e.Exception == null || e.ExceptionHandled)
        {
            Response.Redirect(table.ListActionPath);
        }
    }
}

Listing 3 - TableDetail.ascx.cs

Listings 2 and 3 comprise the TableDetail FieltTempalte which uses the DisplayColumns property of the ShowColumnsAttribute to determin which columns to show.

<%@ Control 
    Language="C#" 
    CodeFile="TableForm.ascx.cs" 
    Inherits="TableDetailField" %>

<asp:DynamicDataManager 
    ID="DynamicDataManager1" 
    runat="server" 
    AutoLoadForeignKeys="true" />
    
<asp:ValidationSummary 
    ID="ValidationSummary1" 
    runat="server" 
    EnableClientScript="true"
    HeaderText="List of validation errors" />
    
<asp:DynamicValidator 
    runat="server" 
    ID="DetailsViewValidator" 
    ControlToValidate="FormView1"
    Display="None" />

<asp:FormView 
    ID="FormView1" 
    DefaultMode="Edit" 
    DataSourceID="FormDataSource"
    OnItemCommand="Edit_ItemCommand" 
    OnItemUpdated="Edit_ItemUpdated" 
    runat="server">
    <ItemTemplate>
    </ItemTemplate>
    <EditItemTemplate>
    </EditItemTemplate>
</asp:FormView>

<asp:LinqDataSource 
    ID="FormDataSource" 
    runat="server" 
    EnableDelete="true">
</asp:LinqDataSource>

Listing 4 – TableForm.ascx

using System;
using System.IO;
using System.Linq;
using System.Web.DynamicData;
using System.Web.UI.WebControls;

public partial class TableDetailField : FieldTemplateUserControl
{
    protected MetaTable table;

    public String[] DisplayColumns { get; set; }

    protected void Page_Init(object sender, EventArgs e)
    {
        DynamicDataManager1.RegisterControl(FormView1);

        table = FormDataSource.GetTable();

        var attribute = Column.Attributes.OfType<ShowColumnsAttribute>().SingleOrDefault();

        if (attribute != null)
            DisplayColumns = attribute.DisplayColumns;

        // load item template
        table = FormDataSource.GetTable();
        String itemTemplate = table.Model.DynamicDataFolderVirtualPath + "Templates/FormViewEdit/" + table.Name + ".ascx";
        if (File.Exists(Server.MapPath(itemTemplate)))
        {
            FormView1.EditItemTemplate = LoadTemplate(itemTemplate);
        }
        else
        {
            throw new InvalidOperationException("The TableForm FieldTemplate requires an EditItemTamplate in the " + table.Model.DynamicDataFolderVirtualPath + "Template/FormViewEdit folder");
        }
    }

    protected void Edit_ItemUpdated(object sender, FormViewUpdatedEventArgs e)
    {
        if ((e.Exception == null))
        {
            Edit_RedirectToList();
        }
    }

    protected void Edit_ItemCommand(object sender, FormViewCommandEventArgs e)
    {
        if ((e.CommandName == DataControlCommands.CancelCommandName))
        {
            Edit_RedirectToList();
        }
    }

    protected void Edit_RedirectToList()
    {
        MetaTable table = FormDataSource.GetTable();
        String returnUrl = Request.QueryString["returnUrl"];

        if ((returnUrl == null))
        {
            Response.Redirect(table.ListActionPath);
        }
        else
        {
            Response.Redirect(returnUrl);
        }
    }
}

Listing 5 – TableForm.ascx.cs

Listings 4 and 5 makeup the TableForm FieldTemplate which requires a template in the ~/DynamicData/Template/FormViewEdit folder otherwise it throws an InvalidOperationException.

Both the above FieldTemplates only require access to the MetaTable table to generate their output. The most notable feature is that they are both configured using the DynamicDataManager just like a PageTemplate.

A couple of TableForm template examples

<%@ Control 
    Language="C#" 
    AutoEventWireup="true" 
    CodeFile="Employees.ascx.cs" 
    Inherits="Employees" %>
    
<div style="width: 400px;">
    <p class="droplist" style="border: dotted 1px cyan;">
        <span style="display:inline-block; height: 16px; text-align: right; vertical-align: middle; width: 80px;">
            Title:&nbsp;
        </span>
        <span style="height: 16px; text-align: left; vertical-align: middle;">
            <asp:DynamicControl 
                ID="Title" 
                DataField="Title" 
                Mode="Edit" 
                runat="server">
            </asp:DynamicControl>
        </span>
    </p>
    <p class="droplist" style="border: dotted 1px cyan;">
        <span style="display:inline-block; height: 16px; text-align: right; vertical-align: middle; width: 80px;">
            First Name:&nbsp;
        </span>
        <span style="height: 16px; text-align: left; vertical-align: middle;">
            <asp:DynamicControl 
                ID="FirstName" 
                DataField="FirstName" 
                Mode="Edit" 
                runat="server">
            </asp:DynamicControl>
        </span>
    </p>
    <p class="droplist" style="border: dotted 1px cyan;">
        <span style="display:inline-block; height: 16px; text-align: right; vertical-align: middle; width: 80px;">
            Last Name:&nbsp;
        </span>
        <span style="height: 16px; text-align: left; vertical-align: middle;">
            <asp:DynamicControl 
                ID="LastName" 
                DataField="LastName" 
                Mode="Edit" 
                runat="server">
            </asp:DynamicControl>
        </span>
    </p>
    <div class="droplist">
    <asp:LinkButton 
        ID="UpdateLinkButton" 
        CommandName="Update" 
        runat="server">
        Update
    </asp:LinkButton>&nbsp;
    <asp:LinkButton 
        ID="CancelLinkButton" 
        CausesValidation="false" 
        CommandName="Cancel" 
        runat="server">
        Cancel
    </asp:LinkButton>
    </div>
</div>

Listing 6 – Example 1 of a template for the Employees table

<%@ Control 
    Language="C#" 
    AutoEventWireup="true" 
    CodeFile="Copy of Employees.ascx.cs" 
    Inherits="Employees" %>

<table class="detailstable">
    <tr>
        <th>Title</th>
        <td><asp:DynamicControl 
                ID="Title" 
                DataField="Title" 
                Mode="Edit" 
                runat="server">
            </asp:DynamicControl></td>
    </tr>
    <tr>
        <th>First Name</th>
        <td><asp:DynamicControl 
                ID="FirstName" 
                DataField="FirstName" 
                Mode="Edit" 
                runat="server">
            </asp:DynamicControl></td>
    </tr>
    <tr>
        <th>Last Name</th>
        <td><asp:DynamicControl 
            ID="LastName" 
            DataField="LastName" 
            Mode="Edit" 
            runat="server">
        </asp:DynamicControl></td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:LinkButton 
                ID="UpdateLinkButton" 
                CommandName="Update" 
                runat="server">
                Update
            </asp:LinkButton>
            <asp:LinkButton 
                ID="CancelLinkButton" 
                CausesValidation="false" 
                CommandName="Cancel" 
                runat="server">
                Cancel
            </asp:LinkButton>
        </td>
    </tr>
</table>

Listing 7 – Example 2 of a template for the Employees table

Listing 6 and 7 are the FieldTemplates used in Figures 1 and 2.

Download Project

I know there are no big explanations here but Part 6 should cover most things passed over here.

Part 8 will cover Dynamic/Templated Grid/Details with Insert (Using ListView), this will replace the List PageTemplate and allow insert in the grid but also allow you to supply a template for each mode; Item, Edit, Insert, Footer and Header.

Back soon

Dynamic Data Custom PageTemplates with Ajax Control Toolkit Tabs UPDATED: 2008/09/27

These articles are now under the title of Custom PageTemplates:

Custom PageTemplates Part 1 - Custom PageTemplates with Ajax Control Toolkit Tabs Custom PageTemplates Part 2 - A variation of Part 1 with the Details and SubGrid in Tabs Custom PageTemplates Part 3 - Dynamic/Templated Grid with Insert (Using ListView) Custom PageTemplates Part 4 - Dynamic/Templated FromView

I’ve been working for a little while now to get a generic page with a DetailsView showing the parent record and a set of tabs showing all the child records similar to Figure 1.

 

Figure 1 – A Detail/Edit page with all ChildrenColumn as sub grids in a tab control

I wanted something that was easy to implement on your own custom page and reused my existing FieldTemplate ParentGrid, I tried several methods to achieve this and I’m going to show the two most successful methods.

Both methods use a FormView as the control to embed the tabs and grids:

• Creating an external ItemTemplate and load it into the FormView at runtime
• Have a dynamic ItemTemplate that implements ITemplate.

Making the Custom Page with a FormView

For this sample I’m going to make a custom generic Edit page, so first we need to make a copy of the Edit.aspx page and rename it to EditSubGridViews.aspx rename the class as well to EditSubGridViews in both the aspx file and the code behind.

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
    
        <h3>Sub GridViews</h3>
        
        <asp:FormView 
            ID="FormView1" 
            runat="server" 
            DataSourceID="DetailsDataSource">
            <ItemTemplate>
            </ItemTemplate>
        </asp:FormView>
        
    </ContentTemplate>
</asp:UpdatePanel>

Listing 1 – The added the FormView and UpdatePanel

Add Listing 1’s code after the end of the current UpdatePanel.

Note: The DataSourceID="DetailsDataSource" is set to the same data source as the DetailsView1

In the code behind add the following line to the Page_Load event handler.

DynamicDataManager1.RegisterControl(FormView1);

This just registers the FormView with the DynamicDataManager no real magic here.

// load item template
table = DetailsDataSource.GetTable();
String itemTemplate = table.Model.DynamicDataFolderVirtualPath + "Templates/" + table.Name + ".ascx";
if (File.Exists(Server.MapPath(itemTemplate)))
    FormView1.ItemTemplate = LoadTemplate(itemTemplate);
// note if no template is loaded then the FormView will show nothing

Listing 2 – code to load the ItemTemplate

This is the magic, you can create your own custom template as a UserControl to include just the ChildrenTables you want. Here we first of all get a reference to the table so that we reference the Model.DynamicDataFolderVirtualPath (which hold the virtual path to the Dynamic Data folder normally ~/DynamicData/) to build the path to our template. And if the template exists then load it into the FormView’s ItemTemplate. Obviously you could load any of the other FormView templates this way.

Modifying the Route for Edit

To use our new PageTemplate EditSubGridViews we could just have edited the current Edit page, but I thought it would be good to leave that as is and change the route.

// The following statement supports separate-page mode, where the List, Detail, Insert, and 
// Update tasks are performed by using separate pages. To enable this mode, uncomment the following 
// route definition, and comment out the route definitions in the combined-page mode section that follows.
routes.Add(new DynamicDataRoute("{table}/{action}.aspx") {
    Constraints = new RouteValueDictionary(new { action = "List|Details|Insert" }),
    Model = model
});

// add a route to EditSubGridViews
routes.Add(new DynamicDataRoute("{table}/EditSubGridViews.aspx")
{
    Action = PageAction.Edit,
    ViewName = "EditSubGridViews",
    Model = model
});

Listing 3 – Route to EditSubGridViews.aspx added to Global.asax 

In the default root in the Global.asax file remove Edit from action = "List|Details|Edit|Insert" and add the route to EditSubGridViews from Listing 3.

Create the FormView ItemTemplate

To create a template file for FormView all you need to do is create a new UserControl in the folder. The first thing to do is create the Templates folder under the DynamicData folder.

To create the folder from Visual Studio 2008 right click the DynamicData folder and click New Folder

Figure 2 – Select New Folder from the context menu

Now right click the new folder and click Add New Item…

Figure 3 – Add New Item

From the Add New Item dialogue box choose Web User Control and name it Employees.

Figure 4 – Create the Web User Control

Figure 5 – Templates folder under the DynamicData folder with the Employees template

Add the following mark-up to the new template:

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
    <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="My Employees" runat="server">
        <ContentTemplate>
            <asp:DynamicControl ID="DynamicControl1" DataField="Employees" UIHint="ChildrenGrid" Mode="Edit" runat="server">
            </asp:DynamicControl>
        </ContentTemplate>
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel ID="TabPanel3" HeaderText="My Orders" runat="server">
        <ContentTemplate>
            <asp:DynamicControl ID="DynamicControl3" DataField="Orders" UIHint="ChildrenGrid" Mode="Edit" runat="server">
            </asp:DynamicControl>
        </ContentTemplate>
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Listing 4 – ItemTemplate showing Employees and Orders ChildrenGrids

Note: See this post series Dynamic Data and Advanced Field Templates for the ChildrenGrid details.

The important setting here in the DynamicControls are UIHint and DataField, (ChildrenGrid is a FieldTemplate from a previous series of articles on FieldTemplates on my blog) in these parameters we are setting:

• UIHint setting the FieldTemplate to be used.
• DataField which field from the table to bind the FieldTemplate to.

When you run the sample you will see something like Figure 6.

Figure 6 – Example output from EditSubGridViews.aspx

Creating a Dynamic ItemTemplate that Implements ITemplate

ITemplate documentation can be found on the MSDN website here Creating Web Server Control Templates Programmatically.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.DynamicData;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

/// <summary>
/// Creates an item template that renders any children columns in the passed in table as GridViews
/// </summary>
public class SubGridViewItemTemplate : ITemplate
{
    private MetaTable _table;
    private Page _page;

    public SubGridViewItemTemplate(MetaTable table, Page page)
    {
        _table = table;
        _page = page;
    }

    public void InstantiateIn(Control container)
    {
        IParserAccessor acessor = container;
        // get all the children columns
        var subGridTables = from c in _table.Columns.OfType<MetaChildrenColumn>()
                            select new SubDetails()
                            {
                                Column = c,
                                SubGridMetaData = c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault(),
                                Order = c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault() != null
                                && c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault().Order > 0
                                ? c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault().Order
                                : int.MaxValue,
                            };

        // sort the according to Order first and column name second
        // note if SubGridViewsAttribute is not allied or the attrivute
        // has no value for Order then just sort but column name
        subGridTables = from sg in subGridTables
                        orderby sg.Order, sg.Column.Name
                        select sg;

        // make sure there are some children columns
        if (subGridTables.Count() > 0)
        {
            // check if more than one children column present
            if (subGridTables.Count() > 1)
            {
                // create tab container to hold each children column
                var tabContainer = new TabContainer();
                tabContainer.ID = "tabContainer";

                // add event handler
                tabContainer.EnableViewState = true; // ***UPDATED 2008/09/27***

                // add the tab container to the page
                acessor.AddParsedSubObject(tabContainer);

                // add a tab panel for each children table
                foreach (SubDetails SubGridDetails in subGridTables)
                {
                    var tabPanel = new AjaxControlToolkit.TabPanel();
                    tabPanel.ID = "tp" + SubGridDetails.Column.Name;

                    // add the tab panel
                    tabContainer.Tabs.Add(tabPanel);

                    var subGridAttributes = SubGridDetails.Column.Attributes.OfType<SubGridViewsAttribute>().SingleOrDefault();
                    // set the Tab's name to be the tables display name 
                    // or table Name if no attribute is present
                    if (subGridAttributes != null && subGridAttributes.TabName.Length > 0)
                        tabPanel.HeaderText = subGridAttributes.TabName;
                    else
                        tabPanel.HeaderText = SubGridDetails.Column.ChildTable.DisplayName;

                    //Instantiate a DynamicControl for this Children Column
                    var childrenGrid = new DynamicControl(DataBoundControlMode.Edit)
                    {
                        ID = SubGridDetails.Column.Name,

                        // set UIHint
                        UIHint = "ChildrenGrid",

                        // set data field to column name
                        DataField = SubGridDetails.Column.Name
                    };

                    // add the DynamicControl to the tab panel
                    tabPanel.Controls.Add(childrenGrid);
                }
                // set the tab pannels index to 0 which
                // forces the first tab to be selected
                if (!_page.IsPostBack)
                    tabContainer.ActiveTabIndex = 0;
            }
            else
            {
                // if only one sub grid then don't bother with tabs
                SubDetails SubGridDetails = subGridTables.FirstOrDefault();
                var childrenGrid = new DynamicControl(DataBoundControlMode.Edit)
                {
                    ID = SubGridDetails.Column.Name,
                    UIHint = "ChildrenGrid",
                    DataField = SubGridDetails.Column.Name
                };

                // add the grid to the page
                acessor.AddParsedSubObject(childrenGrid);
            }
        }
        else
        {
            // if no children columns
            // add label to show no grids
            var label = new Label();
            label.Text = "There are no SubGrids";
            label.CssClass = "droplist";

            // add the label to the page
            acessor.AddParsedSubObject(label);
        }
    }

    private class SubDetails
    {
        /// <summary>
        /// Column to display
        /// </summary>
        public MetaChildrenColumn Column { get; set; }

        /// <summary>
        /// MetaData if any from the original column
        /// </summary>
        public SubGridViewsAttribute SubGridMetaData { get; set; }

        /// <summary>
        /// Holds the sort order value
        /// </summary>
        public int Order { get; set; }
    }
}

Listing 5 - SubGridViewItemTemplate

Listing 5 is the class that implements ITemplate – SubGridViewItemTemplate, to summarise this generates a template in code at runtime. In this case the template consists of a TabContainer from the Ajax Control Toolkit with a TabPanel for each ChildrenColumn found in the _table passed in to the class in the constructor. The TabPanel in turn contains a DynamicControl with it’s UIHint set to ChildrenGrid.

Personal Note: For me the key thing that Dynamic Data gives us is the DynamicField and DynamicControl which use FieldTemplates, these FielTemplates encapsulate all our field functionality in a central place. This is apart from all the other Dynamic Data goodness that we get from scaffolding etc. For this ITemplate class it remove ALL the complexity from the class and also makes it future proof, because who knows what fields my ChildrenGrid will face in the future? but I don’t need to worry be cause DynamicField and DynamicControl will handle it all.

So an explanation of the code seems appropriate here.

var subGridTables = from c in _table.Columns.OfType<MetaChildrenColumn>()
                    select new SubDetails()
                    {
                        Column = c,
                        SubGridMetaData = c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault(),
                        Order = c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault() != null
                        && c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault().Order > 0 
                        ? c.Attributes.OfType<SubGridViewsAttribute>().FirstOrDefault().Order 
                        : int.MaxValue,
                    };

// sort the according to Order first and column name second
// note if SubGridViewsAttribute is not allied or the attrivute
// has no value for Order then just sort but column name
subGridTables = from sg in subGridTables
                orderby sg.Order, sg.Column.Name
                select sg;

Listing 6 – Getting the ChildrenColumns

These two Linq to Objects statements here firstly get a list of new objects and secondly sorts this list. It’s clear what the first two properties are in the SubDetails class but Order looks a little complex. What’s happening in setting Order is; if the SubGridViewsAttribute is not present or the Order property of SubGridViewsAttribute not set then the Order property of the new SubDetails object is set to int.MaxValue (this is because int can’t be null and by default is initialised to zero).

The next chunk of code is pretty straight forward it just loops over the subGridTables collection and create the appropriate TabContainer and fills it with TabPanels each with it’s own DynamicControl. If however there is only one ChilcrenColumn in the _table then it just adds a single DynamicControl and finally if there are no ChildrenColumns in the _table then it adds a Label that says There are no SubGrids.

Finally at the end of the class is the definition of the SubDetails class.

Adding the SubGridViewItemTemplate a FormView

The code to SubGridViewItemTemplate to a FormView is straight forward:

FormView1.ItemTemplate = new SubGridViewItemTemplate(table);

So to finish off the EditSubGridViews.aspx page we need to add a little more code:

protected void Page_Init(object sender, EventArgs e)
{
    DynamicDataManager1.RegisterControl(DetailsView1);
    DynamicDataManager1.RegisterControl(FormView1);

    // load item template
    table = DetailsDataSource.GetTable();
    String itemTemplate = table.Model.DynamicDataFolderVirtualPath + "Templates/" + table.Name + ".ascx";
    if (File.Exists(Server.MapPath(itemTemplate)))
    {
        FormView1.ItemTemplate = LoadTemplate(itemTemplate);
    }
    else
    {
        // generate the sub grid views if no template available
        table = DetailsDataSource.GetTable();
        FormView1.ItemTemplate = new SubGridViewItemTemplate(table);
    }
}

Listing 7 – adding the SubGridViewItemTemplate to EditSubGridViews.aspx

Now if you supply a custom ItemTemplate for a table then that will be used to format the FormView otherwise it will auto generate the ItemTemplate for the table.

I seem to have missed out the attribute class SubGridViewsAttribute so I'll list it here:

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
public class SubGridViewsAttribute : Attribute
{
    public int Order { get; set; }
    public String TabName { get; set; }
    public SubGridViewsAttribute()
    {
    }
}

Listing 7 - SubGridViewsAttribute

And now some sample metadata:

[MetadataType(typeof(EmployeeMD))]
public partial class Employee 
{
    public class EmployeeMD
    {
        [SubGridViews(
            Order = 2,
            TabName = "My Employees")]
        public object Employees { get; set; }
        [SubGridViews(
            Order = 3,
            TabName = "My Territories")]
        public object EmployeeTerritories { get; set; }
        [SubGridViews(
            Order = 1,
            TabName = "My Orders")]
        public object Orders { get; set; }
        public object Employee1 { get; set; }
    }
}

Listing 8 - sample metadata showing order and tab name

Now I think that’s neat

Project Download

*** UPDATES ***

UPDATED 2008/09/26 :I’ve just discovered an issue which shows itself when you click on a tab other than the first tab and then click edit on a grid item. When you do this after postback the tab index has been reset back to 0, if you click the tab you had previously selected the row you clicked edit on is in edit mode.
This is just to let you know I know about this BUG and am working on it.
I’ll be back soon with an update

UPDATED 2008/09/26 : Added tabContainer.AutoPostBack = true; to fix issue with tabs  

UPDATED 2008/09/27 : A better fix is to add tabContainer.EnableViewState = true; to fix issue with tabs  

Dynamic Data and Advanced Field Templates - ParentFormView with Templates

• The Anatomy of a FieldTemplate.
• Your First FieldTemplate.
• An Advanced FieldTemplate.
• A Second Advanced FieldTemplate.
• An Advanced FieldTemplate with a GridView ***UPDATED ***.
• An Advanced FieldTemplate with a DetailsView ***UPDATED ***.
• An Advanced FieldTemplate with a GridView/DetailsView Project ***UPDATED ***.
• ParentFormView with Templates ***UPDATED ***.

ParentFormView with Templates

This is a variant on the DetailsView/ParentDetails FieldTemplate the main difference is that here the FieldTemplate is based on a FormView not a DetailsView.

<asp:FormView 
    ID="FormView1" 
    runat="server" 
    DataSourceID="FormDataSource"
    CssClass="detailstable"
    FieldHeaderStyle-CssClass="bold">
    
</asp:FormView>

<asp:LinqDataSource 
    ID="FormDataSource" 
    runat="server" 
    EnableDelete="true">
</asp:LinqDataSource>

Listing 1 – changes to the FieldTemplate

In Listing 1 the DetilsView has been changed to a FormView. All references to DetailsView1 and DetailsDataSource have been changed to FormView1 and FormDataSource in the ascx page and the code behind.

if (metaForeignKeyColumn != null)
{
    // load Field Template
    String ddFolderVirtualPath = metaForeignKeyColumn.ParentTable.Model.DynamicDataFolderVirtualPath;
    String tableName = metaForeignKeyColumn.ParentTable.Name;

    String itemTemplate = ddFolderVirtualPath + "Templates/" + tableName + "Item.ascx";
    String editItemTemplate = ddFolderVirtualPath + "Templates/" + tableName + "Edit.ascx";
    //String insertItemTemplate = ddFolderVirtualPath + "Templates/" + tableName + "Insert.ascx";
    String footerTemplate = ddFolderVirtualPath + "Templates/" + tableName + "Footer.ascx";
    String headerTemplate = ddFolderVirtualPath + "Templates/" + tableName + "Header.ascx";
    String pagerTemplate = ddFolderVirtualPath + "Templates/" + tableName + "Pager.ascx";

    if (File.Exists(Server.MapPath(itemTemplate)))
    {
        FormView1.ItemTemplate = LoadTemplate(itemTemplate);

        // load any other field templates
        //TODO: if an operation is required but no template throw error
        if (File.Exists(Server.MapPath(editItemTemplate)))
            FormView1.EditItemTemplate = LoadTemplate(editItemTemplate);

        // because this is a parent no insert will be available
        //if (File.Exists(Server.MapPath(insertItemTemplate))) 
        //    FormView1.InsertItemTemplate = LoadTemplate(insertItemTemplate);

        if (File.Exists(Server.MapPath(footerTemplate)))
            FormView1.FooterTemplate = LoadTemplate(footerTemplate);
        if (File.Exists(Server.MapPath(headerTemplate)))
            FormView1.HeaderTemplate = LoadTemplate(headerTemplate);
        if (File.Exists(Server.MapPath(pagerTemplate)))
            FormView1.PagerTemplate = LoadTemplate(pagerTemplate);

        ...//CODE OMITTED FOR CLARITY
    }
    else
    {
        throw new InvalidOperationException("ParentFormView_Edit requires an item template.");
    }
}
else
{
    // throw an error if set on column other than MetaChildrenColumns
    throw new InvalidOperationException("The GridView FieldTemplate can only be used with MetaChildrenColumns");
}

Listing 2 – changes to the code behind

protected override void OnDataBinding(EventArgs e)
{
    base.OnDataBinding(e);

    // get the FK column
    var metaForeignKeyColumn = Column as MetaForeignKeyColumn;

    // get the association attributes associated with MetaChildrenColumns
    var association = metaForeignKeyColumn.Attributes.
        OfType<System.Data.Linq.Mapping.AssociationAttribute>().FirstOrDefault();

    if (metaForeignKeyColumn != null && association != null)
    {
        // get keys ThisKey and OtherKey into dictionary
        var keys = new Dictionary<String, String>();
        var seperator = new char[] { ',' };
        var thisKeys = association.ThisKey.Split(seperator);
        var otherKeys = association.OtherKey.Split(seperator);
        for (int i = 0; i < thisKeys.Length; i++)
        {
            keys.Add(thisKeys[i], otherKeys[i]);
        }

        // setup the where clause 
        // support composite foreign keys
        foreach (String fkName in metaForeignKeyColumn.ForeignKeyNames)
        {
            // get the current FK column
            var fkColumn = metaForeignKeyColumn.Table.GetColumn(fkName);
            // get the current PK column
            var pkColumn = metaForeignKeyColumn.ParentTable.GetColumn(keys[fkName]);

            // setup parameter
            var param = new Parameter();
            param.Name = pkColumn.Name;
            param.Type = pkColumn.TypeCode;

            // get the value for this FK column
            param.DefaultValue = GetColumnValue(fkColumn).ToString();

            // add the where clause
            FormDataSource.WhereParameters.Add(param);
        }
    }
}

Listing 3 – OnDataBinding now handles multiple PK-FK relationships ***UPDATED 2008/09/24***

As you can see what has been done here add the facility to load templates for the FormView to allow this I’ve added a new folder to the DynamicData folder named Templates see Figure 1.

Figure 1 - Folder structure changes

In Listing 2 you can see that Model.DynamicDataFolderVirtualPath is accessed to retrieve the Dynamic Data virtual path (the default is ~/DynamicData/) so that the path to each Template can be constructed. The path to each of the possible Templates is constructed, but only the itemTemplate is required.

Note: Code to test for other Templates could be added if that option was enabled via properties set via the constructor.

All you need to create a Template file is to add a new UserControl to the Templates folder and then customise it.

<p class="droplist">
<strong>Name: </strong><asp:DynamicControl ID="DynamicControl1" runat="server" DataField="CompanyName" ></asp:DynamicControl>&nbsp;
<strong>Contact Name: </strong><asp:DynamicControl ID="DynamicControl2" runat="server" DataField="ContactName" ></asp:DynamicControl>
</p>
<p class="droplist">
<strong>Phone: </strong><asp:DynamicControl ID="DynamicControl3" runat="server" DataField="Phone" ></asp:DynamicControl>&nbsp;
<strong>Fax: </strong><asp:DynamicControl ID="DynamicControl4" runat="server" DataField="Fax" ></asp:DynamicControl>
</p>

Listing 4 – a very simple ItemTemplate

As you can see Listing 4 is a very simple field template but looks how you would expect the mark-up to look in Figure 2.

Figure 2 – the FieldTemplate at work

Project Download