• Download GridDemo – 19.87 KB
• Download SelectionColumnSource – 7.04 KB

Introduction

Purpose
of this article is to demonstrate architecture of data grid TemplateColumn class using an example
implementation of data grid custom selection column. So, one should be able to
design more complex custom columns easily.After reading this you will be able to implement DataGrid Progress column and other custom columns

Abstract

Let
us examine the data grid Template Column first, you will find the following definition
of Data grid TemplateColumn class in dot net framework.

public class TemplateColumn : DataGridColumn
{
public TemplateColumn();
public virtual ITemplate EditItemTemplate { get; set; }
public virtual ITemplate FooterTemplate { get; set; }
public virtual ITemplate HeaderTemplate { get; set; }
public virtual ITemplate ItemTemplate { get; set; }
public override void InitializeCell(TableCell cell, int columnIndex, ListItemType itemType);
}
As the difination sugesst we can set these properties to any
class that implements ITemplate interface.

To implement a selection column in data grid we need
to add Template column That will display a check
box in its and header template and also a check box for each of item template
like the above figure

Step 1:Adding Required Classes

Add a class in your project
named “CheckBoxColumn”
and extend it from System.Web.UI.WebControls.TemplateColumn
class.your class defination should look like

public class CheckBoxColumn:TemplateColumn
{
.. ... ...
}

Add two more classes in your project
named “CheckBoxFieldTemplate” and “CheckBoxHeaderTemplate” both should
implement ITemplate interface,their definitation should
look like this

class CheckBoxFieldTemplate:ITemplate
{
public void InstantiateIn(Control container)
{
}
}

class CheckBoxHeaderTemplate:ITemplate
{
public void InstantiateIn(Control container)
{
}
}

ITemplate interface contains only a single
function

void InstantiateIn(Control container); when implemneted by a class, defines the System.Web.UI.Control object, that child
controls and templates belong to. These child controls are in turn defined
within an inline template

Step 2:Adding CheckBox and Attaching Javascript

We need to
display checkbox in both header and item Template so in both classes our InstantiateIn method should look like
this

public void InstantiateIn(Control container){

DataGridItem container =(DataGridItem)container;

CheckBox chkSelect = new CheckBox();

chkSelect.DataBinding += new EventHandler(this.OnDataBinding);

chkSelect.Attributes.Add(“onClick”, “return HighLightRow(this,” + container.ItemIndex.ToString() + “,’” + this._selectColor.Name + “‘,’” + this._unSelectColor.Name + “‘);”);

container.Controls.Add(chkSelect);
}

Step 3:Assigning ItemTemplates To Custom Column

We have our
required templates that can be used with our custom column.

Now you
have to set two inherited properties of our custom column ItemTemplate and
HeaderTemplate.

As the difination sugesst you can set
these properties to any class that implements ITemplate interface.our
classes created in step one fullfill that reuiqrement. So, custom Template
column class should look like this.

public class CheckBoxColumn:TemplateColumn
{
private CheckBoxHeaderTemplate CheckBoxHeaderTemplate = new CheckBoxHeaderTemplate();
private CheckBoxFieldTemplate CheckBoxFieldTemplate = new CheckBoxFieldTemplate();
public CheckBoxColumn():base()
{
this.ItemTemplate = CheckBoxFieldTemplate;
this.HeaderTemplate = CheckBoxHeaderTemplate;
}
}

you done with it now you can
add this columns of data grid by reference its assembly in you page add
appropriate JavaScript for Header CheckBox and for ItemCheckBox.

Step 4:Adding Databinding Functionality

Finally we need to implement databinding functionality so our
custom column will also work as a databound column if required.

Expose a property in you CheckBoxColumn
Class named “DataField”

Modify the consuctor of CheckBoxFieldTemplate to accept the
column name to bind with. Now add override databinding event of ITemplate by placing the following code

public void OnDataBinding(object sender, EventArgs e)
{
if (this._columnName.Length > 0)
{
CheckBox chk = (CheckBox)sender;
DataGridItem container =
(DataGridItem)chk.NamingContainer;
chk.Checked = Convert.ToBoolean(((DataRowView)container.DataItem)[this._columnName]);
}
}

Step 5:Download Demo and Attach Javascript

Download Jscript2.js attached in demo project and add into your project directory and
place its reference on the top of your page.

using The code

you are able to add a check box column with check All , uncheck All and highlight selected rows and also have databinding functionality by just adding this custom checkbox column in your grid as follows.

<CC1:CheckBoxColumn> </CC1:CheckBoxColumn>

Points of Interest

You are able to make custom columns like progress column, fixed length column that display …. after a specified length of string and can reuse these over all your application.