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
(((DataGridItem)Container).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 = "employees";
DataGrid1.DataBind();

Most of the code will be familiar to you except code related to ITemplate. We have loaded our template using LoadTemplate method. We then create a TemplateColumn and set its ItemTemplate to it. Even though we have used ItemTemplate, it can be any other type of template also like EditItemTemplate. We then add this new column to the DataGrid. Note that our DataGrid instance DataGrid1 is declared at class level and hence not visible in the code shown above.

After running your application you should get a DataGrid with single templated column titled 'Last Name'.

Summary

In this article we saw how to add a templated column to a DataGrid on the fly using LoadTemplate method. This method can be used if you want to use same DataGrid with say few columns changing at run time. In the next part we will see how to create templated columns via implementing ITemplate interface. Till then keep coding!

About the author

Name :	Bipin Joshi
Email :	webmaster@dotnetbips.com
Profile :	Bipin Joshi - the creator and owner of DotNetBips - is a Microsoft MVP, Software Developer and Author. He has written dozens of articles for DotNetBips and other web sites. Know more about him and DotNetBips here.