Creating DataGrid Templated Columns Dynamically - Part I

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

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.

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形式或者格式化程序形式)

支持某属性的子属性,也就是相当于实体类中又有一个实体类,要去访问第二个实体类的属性,主要为了解决。在服务器返回的json格式的数据的某个属性带有自属性,而我们恰恰又需要使用到该子属性作为我们的data...
  • qq_35572020
  • qq_35572020
  • 2016年11月24日 16:32
  • 740

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

所谓为了支持某属性的子属性,主要为了解决。在服务器返回的json格式的数据的某个属性带有自属性,而我们恰恰又需要使用到该子属性作为我们的datagrid的某个字段的。默认情况下datagrid只能支持...
  • 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形式或者格式化程序形式)

所谓为了支持某属性的子属性,主要为了解决。在服务器返回的json格式的数据的某个属性带有自属性,而我们恰恰又需要使用到该子属性作为我们的datagrid的某个字段的。默认情况下datagrid只能支持...
  • waysoflife
  • waysoflife
  • 2014年06月19日 16:28
  • 2076

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

所谓为了支持某属性的子属性,主要为了解决。在服务器返回的json格式的数据的某个属性带有自属性,而我们恰恰又需要使用到该子属性作为我们的datagrid的某个字段的。默认情况下datagrid只能支持...
  • leiyong0326
  • leiyong0326
  • 2014年12月15日 14:40
  • 1888

easyui中datagrid动态加载列表

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

WPF中设置DataGrid中DataGridColumn列的普通样式和编辑样式

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

easyui之datagrid动态修改列

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

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

最近项目中有使用到bootstrap框架,为了风格统一,于是后台biao
  • chenjing502
  • chenjing502
  • 2014年07月30日 02:56
  • 3076
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Creating DataGrid Templated Columns Dynamically - Part I
举报原因:
原因补充:

(最多只允许输入30个字)