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
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
but for us coders I prefer the short lived “Live to Code and Code to Live”
