Instructor-led online courses in ASP.NET Core, ASP.NET MVC, and ASP.NET Design Patterns. Conducted by Bipin Joshi on weekends. More details are available here.

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

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:

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!

Bipin Joshi is a software consultant, trainer, author and spiritual yoga mentor having 23+ years of experience in software development. He teaches online training courses in ASP.NET Core, ASP.NET MVC, and Design Patterns to individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.