Thursday, 15 May 2008

Programmatically Creating GridView with Template Columns ASP.Net C#.Net

So making a grid view is easy, the designer in Visual Studio is really easy to use to set up columns and bind to a data source. However that's only useful if you know what columns you want and if you know exactly where and when you want to display this data.

What if some of these details are built up dynamically through code while your site is running. I had a situation where I wanted to build up multiple grid views pro grammatically as a result of a user interaction, and I didn't just want normal columns of text data, my grid view required template columns. So how do you create grid view template columns through your server side code?


// C#.Net code to Create Grid View //
GridView newGrid = new GridView();

TemplateField template = new TemplateField();
template.ItemTemplate = new GridViewTemplate(ListItemType.Item, columnName);

newGrid.Columns.Add(template);

newGrid.DataSource = 'Your Data Source Object';
newGrid.DataBind();


The above code will create a Grid View control, this can already exist on your page if you want or as I have done you can create it in code. It maybe best to call this code from the Page_Load method, but you can experiment with that.

Then we will create a Template column and add it to the Grid View, you can create as many of these as you require columns. The code will then bind a Data Source to your Grid View, how the values of that Data Source are displayed is handled in the code below.


Below is the Class code for a GridViewTemplate.



public class GridViewTemplate : System.Web.UI.Page, ITemplate
{
ListItemType _templateType;
string _columnName;


public GridViewTemplate(ListItemType type, string columnName)
{
_templateType = type;
_groupName = columnName;
}


public void InstantiateIn(System.Web.UI.Control container)
{

switch (_templateType)
{

case ListItemType.Header:

break;

case ListItemType.Item:

Literal lc = new Literal();

lc.DataBinding += new EventHandler(this.lc_DataBinding);

container.Controls.Add(lc);

break;

case ListItemType.EditItem:

break;

case ListItemType.Footer:

break;

}
}


private void lc_DataBinding(Object sender, EventArgs e)
{

Literal lc = (Literal)sender;

GridViewRow row = (GridViewRow)lc.NamingContainer;

string propertyValue =
DataBinder.Eval(row.DataItem, "PropertyName").ToString();

lc.Text = propertyValue;

}
}




The GridViewTemplate will set up the basics of your template column. You can set the Header, Item, Footer etc.. and add controls to them just as you could add controls through the designer.

You can then set up Data Binding to these controls, in the Data Binding method you will then pass in the name of the property from your Data Source you want to display the value for in that control, eg. "PropertyName".

Hope this is a useful basic reference for this, hopefully from this you can easily figure out even more complex things you can do with the Grid View.

4 comments:

Jeroen van der Veen said...

Thanks a bunch! Worked perfectly for me...

Except for the typo in the line:
_groupName = columnName;
which should ofcourse be:
_columnName = columnName;

;)

2000MPH said...

Glad that code was useful, thanks for pointing out the typo. doh! :)

Jesus Youth Houston said...

Thanks a lot!! It worked for me.

Sudhir DBAKings said...

Nice post very helpful

dbakings