Creating DataGrid Templated Columns Dynamically - Part I

Introduction

Few months back I wrote article on how to create DataGrid programatically. The article explained how to created a DataGrid with bound columns on the fly. Many readers asked whether we can do similar thing with templated columns. This two part article explains just that. There are actually two ways to create DataGrid templated columns dynamically - using LoadTemplate method and implementing ITemplate interface. In Part - I, we will discuss how to use the first method i.e. using LoadTemplate.

What are templates anyway?

ASP.NET list controls like DataGrid, DataList and Repeater allow flexibility in changing look and feel via the use of what is called as 'Templates'. As the name suggests template is a blue print of look and feel for data displayed in certain areas of the control. For example, HeaderTemplate represents blue print of the header of the control. Similarly, ItemTemplate represents individual item or row of the DataGrid. These sectons are represented by markup like <ItemTemplate> and <HeaderTemplate>.

LoadTemplate method

If you see the class hierarchy of Page class it looks like this:

System.Object   System.Web.UI.Control      System.Web.UI.TemplateControl         System.Web.UI.Page

The System.Web.UI.TemplateControl class contains a method called LoadTemplate that can be used to dynamially load temlates for templated controls. The signature of LoadTemplate is like this:

public ITemplate LoadTemplate(string virtualPath);

The method takes virtual path of a user control file i.e. .ascx file.

Creating user control file for template markup

You should store markup of the template in .ascx file. Remember that the markup should not contain actual tags like <ItemTemplate>. Typically this file will not be having any other markup. Note that one such file represents markup for one kind of template.

Example of using LoadTemplate method

We will now develop an example in which we will create a DataGrid on the fly with a single template column. The template column simply contains a Label control but you can add any other controls as well. Our example will need to follow steps given below:

• Create a new ASP.NET web application
• Create a new web form
• Create a user control file (.ascx) for template markup
• Write code to add a DataGrid to the form
• Load the template from the .ascxfile
• Bind the DataGrid with some datasource

Out of above steps first two are common to any web application and we will not discuss them here. So, let us start by creating a user control file for our template.

User control file for our example

You may add a new web user control (.ascx) to your project. Add following markup to the file:

<%@ Control Language="C#" %><asp:label ID="label1" Runat="server" text='<%# Databinder.eval(ctype(container,DataGridItem).dataitem,"lastname")%>'></asp:label>

Note that this markup looks same as if we would have used it in design mode. Here, we are binding a label control with the lastname field from the DataMember.

Adding DataGrid to the form

Add following code to the Page_Load event of the web form

string connstr = @"Integrated Security=SSPI;User ID=sa;Initial Catalog=Northwind;Data Source=MyServer\NetSDK";SqlConnection cnn=new SqlConnection(connstr);SqlDataAdapter da=new SqlDataAdapter("select * from employees", cnn)DataSet ds=new DataSet();da.Fill(ds, "employees");ITemplate temp= Page.LoadTemplate("webusercontrol1.ascx");TemplateColumn tc=new TemplateColumn();tc.HeaderText = "Last Name";tc.ItemTemplate = temp;DataGrid1.Columns.Add(tc);DataGrid1.DataSource = ds;DataGrid1.DataMember = "employee