Creating DataGrid Templated Columns Dynamically - Part I

原创 2003年04月08日 09:05:00


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:


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

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.DataSource = ds;
DataGrid1.DataMember = "employees";

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'.


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 :

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.

easyui datagrid 动态表头 动态columns 的一种实现方式

function doUpgradeDataQueryFun(){ var actTypeVal=$("#actType").combobox('getValue'); var actIdVa...
  • big1989wmf
  • big1989wmf
  • 2017年04月12日 16:38
  • 1429

springmvc+easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

  • qq_35572020
  • qq_35572020
  • 2016年11月24日 16:32
  • 740

easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

  • jianyi7659
  • jianyi7659
  • 2013年08月03日 23:10
  • 56712

EasyUI 动态生成列属性

需求:通过Model类属性动态生成DataGrid表格 1、定义ColumnTitle注解类 package com.mrchu.annotation; import java.lang.annot...
  • FOR_CHINA2012
  • FOR_CHINA2012
  • 2015年01月13日 16:31
  • 2265

easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

  • waysoflife
  • waysoflife
  • 2014年06月19日 16:28
  • 2076

easyui datagrid columns的field支持属性的子属性(field.sonfield形式或者格式化程序形式)

  • leiyong0326
  • leiyong0326
  • 2014年12月15日 14:40
  • 1888


在工作中遇到需求:用户可以根据自身的需求设置列表显示哪些列的信息并且这些列的顺序也是可以改变的。而以往正常的datagrid的列的书写是这样的: columns:[[ {fie...
  • m0_37266740
  • m0_37266740
  • 2017年05月23日 17:30
  • 378


DataGridColumn的派生类:   一般情况下DataGridBoundColumn和DataGridComboBoxColumn足以满足多数列的样式,如果需要自定义列样式...
  • zhgyuhui
  • zhgyuhui
  • 2013年02月18日 11:20
  • 2245


easyui datagrid 定义列的方式通常是: $('#grid').datagrid({columns:[[ {field:'f1',title:'字段1',width:160}...
  • liuxiao723846
  • liuxiao723846
  • 2015年08月28日 15:12
  • 2966

jQuery DataTable使用时不能把请求参数绑定到javabean对象中

  • chenjing502
  • chenjing502
  • 2014年07月30日 02:56
  • 3076
您举报文章:Creating DataGrid Templated Columns Dynamically - Part I