Dynamic GridView and DataList in ASP.NET 2.0
 
Published: 29 Jan 2008
Abstract
Sometimes we may be required to build GridView and DataList dynamically with different styles and with child controls in our project. This article will help you accomplish this task in ASP.NET 2.0 with the help of a case study. Satheesh first provides a brief overview of the scenario and then explores the step-by-step implementation of each module with supported source code. The steps include creation of a Template class, implementation of a dynamic DataList, using the Template class in DataList, implementation of a dynamic GridView, and the usage of Template class in GridView. The article is accompanied by the related Visual Studio project which enables you to instantly test drive the application.
by Satheesh Babu
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 116786/ 246

Introduction

Displaying tabular data to the users is one of the common tasks we will perform in any site we build. In ASP.NET 1.x we make use of the DataGrid, DataList and Repeater controls most of the time depending on the need. With the introduction ASP.NET 2.0, we have GridView in the place of DataGrid with some changes that make the control more easily usable than DataGrid with the help of data source controls. Each time the need of displaying the data will be different. Sometimes, we will require the data to be displayed to the user where he/she should have edit/update/delete functionalities or we require displaying the data with the header being displayed in the left as opposed to top which makes us decide which of the above controls to use. Coming to our subject, most of the time it is sufficient if we drag the control into the WebForm instead of adding it dynamically to achieve the target. At times we will require doing this dynamically which I took to discuss in this article with both DataList and GridView control in ASP.NET 2.0.

Microsoft has designed both of the controls in such a way so that the developer can use the flexibility and can build it dynamically by giving dynamic styles and layouts to the data display. Moving forward I will explain a scenario where we can have a dynamic DataList/GridView and construct it.

Scenario

Consider we are creating a site that hosts technical articles similar to aspalliance.com/Codeproject.com with the authors submitting their article on different categories. Consider an article index page that displays the top 4 articles on each category from the author's submission. We can have a separate tabular view for each category in the article index page. Refer to the below "Figure 1 – Article Listing" for a clear understanding.

It will be hard and time consuming if we manually add a GridView/DataList for each new category added in the site. We can feel the difficulty if we add a new GridView/DataList to the page manually whenever a new category is added to the site and deploy it again. In this situation we can consider dynamically adding a GridView/DataList to serve the need without any manual efforts involved when a new category is added to the site. Therefore, we are preventing editing the page frequently for every new category and deploying it, with only a little overhead in development time as opposed to a static GridView/DataList.

Figure 1: Article Listing

There can be many other scenarios like, when we really do not know how many resultset a stored procedure is going to return that has dynamic queries depending upon some business rules. I will use the above example of article site throughout this article to explain constructing dynamic DataList/GridView.

How to achieve it?

It is achieved by implementing ITemplate interface in System.Web.UI namespace.

In this article I will explain the construction of dynamic DataList and GridView by building dynamic template columns. Moving forward I will create dynamic template columns for both Datalist and gridview specifically the resultset returned by the stored procedure. Template columns for both datalist and gridview can be created by implementing the interface ITemplate in System.Web.UI namespace. Refer to Listing 1 and class diagram in Figure 2 for ITemplate interface.

Listing 1: ITemplate Interface

namespace System.Web.UI
{
    // Summary:
    // Defines the behavior for populating a templated ASP.NET server control with
    // child controls. The child controls represent the inline templates defined
    // on the page.
    public interface ITemplate
    {
        // Summary:
        // When implemented 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.
        //
        // Parameters:
        //  container:
        //   The System.Web.UI.Control object to contain the instances 
        //   of controls from
        //     the inline template.
        void InstantiateIn(Control container);
    }
}

Figure 2: ITemplate class diagram

With this information we will now create header template, item template and footer template column for these controls by implementing the above ITemplate interface.

Steps for creating Template class

1.    Create a Template class (MyTemplate class, Listing 2 –TemplateClass for DataList) that implements ITemplate interface.

2.    Create a constructor for the class that takes ListItemType as argument so that we can determine whether we are constructing HeaderTemplate, ItemTemplate or FooterTemplate. Also, we can make it through by exposing ListItemType as public property.

3.    Implement the InstantiateIn (Control container) method and construct the corresponding template from the input gotten from the constructor. Refer to the code (Listing 2 –TemplateClass for DataList and Listing 5 –TemplateClass for GridView) for a clear understanding.

4.    For data binding and child control that require data binding, create a data binding event to fill the data with the control. This event will be raised after the template items are created with all its controls.

5.    The above 4 steps have been implemented in the code, Listing 2 –TemplateClass for DataList and

6.    Listing 5 –TemplateClass for GridView.

Implementing Dynamic DataList

The DataList will have a Header template with Category Name displayed. For example, if it is displaying ASP.NET article, the category name will be ASP.NET. The articles will be displayed in the item template. For every article in the item template we will display the title of the article as a hyperlink that links to the original URL of the article with a description and author name. The footer will show the number of articles present in this category.

Listing 2: TemplateClass for DataList

public class MyTemplate : ITemplate
{
    ListItemType _itemType;
    private string _no;
    private string _categoryName;
    public string NoOfArticles
    {
        get
        {
            return _no;
        }
        set
        {
            _no = value;
        }
 
    }
    public string CategoryName
    {
        get
        {
            return _categoryName;
        }
        set
        {
            _categoryName = value;
        }
    }
    public MyTemplate(ListItemType Type)
    {
        _itemType = Type;
    }
    public void InstantiateIn(System.Web.UI.Control container)
    {
        Literal lc = new Literal();
        switch (_itemType)
        {
            case ListItemType.Header:
                lc.Text = "<div id=\"nifty\" class=\"PostCategory\">   " 
                            + CategoryName + "</div>";
                break;
            case ListItemType.Item:
                lc.DataBinding += new EventHandler(TemplateControl_DataBinding);
                break;
            case ListItemType.Footer:
                lc.Text = "<div style=\"text-align:right\">" + NoOfArticles 
                           + " Article(s) present in this category" + "</div>";
                break;
        }
        container.Controls.Add(lc);
    }
private void TemplateControl_DataBinding(object sender,  System.EventArgs e)
    {
        Literal lc;
        lc = (Literal)sender;
        DataListItem container = (DataListItem)lc.NamingContainer;
   lc.Text += "<div class=\"Post\"><div class=\"PostTitle\"><A     href=" + 
      DataBinder.Eval(container.DataItem, "URL"+ ">" + 
      DataBinder.Eval(container.DataItem, "Title"+ 
      "</a></div><div class=\"PostSubtitle\">" + 
      DataBinder.Eval(container.DataItem, "Description"+ 
      "</div> <div class=\"PostInfo\">Posted on " + 
      DataBinder.Eval(container.DataItem, "CreatedOn""{0:d} @ {0:t}"+ " By " + 
      DataBinder.Eval(container.DataItem, "CreatedBy"+ " in " + 
      DataBinder.Eval(container.DataItem, "Category"+ "</div> ";
    }
}

In the above code I have used 2 public properties, CategoryName and NoOfArticle, for displaying category name in Header Template and for displaying a number of articles in Footer Template. We can also specify this as constructor argument instead of giving it as public properties. I have defined TemplateControl_DataBinding event to bind the data that is in resultset.

Using the Template Class in DataList

The following steps will take us through to use the above created MyTemplate class to create header, item and footer templates dynamically.

1.    Create a DataList object.

2.    Create an instance of our created dynamic template class by passing the ListItemType corresponding to the type of the item.

3.    Assign the instance to the datalist template property like:

Listing 3: DataList Templates

DataListObject.HeaderTemplate = new MyTemplate(ListItemType.Header);
DataListObject.ItemTemplate = new MyTemplate(ListItemType.Item);
DataListObject.FooterTemplate = new MyTemplate(ListItemType.Footer);

The below code contains code that uses the MyTemplate class to build the DataList dynamically. I have added a PlaceHolder in the WebForm which will hold the dynamically created DataList after the execution.

Listing 4: Using TemplateClass

protected void Page_Load(object sender, EventArgs e)
    {
for (int i = 0; i < dsArticles.Tables.Count; i++)
        {
            if (dsArticles.Tables[i].Rows.Count > 0)
            {
                DataList dlArt = ConstructDL(
                    dsArticles.Tables[i].Rows[0]["Category"].ToString(), 
                    dsArticles.Tables[i].Rows.Count);
                dlArt.DataSource = dsArticles.Tables[i];
                dlArt.DataBind();
                phArticles.Controls.Add(dlArt);
            }
        }  
    } 
 
public DataList ConstructDL(string CategoryName,int Count)
    {
        DataList dlArt = new DataList();
        MyTemplate headTemplate = new MyTemplate(ListItemType.Header);
        headTemplate.CategoryName = CategoryName;
        dlArt.HeaderTemplate = headTemplate;
        dlArt.Width = Unit.Percentage(100);
        dlArt.ItemTemplate = new MyTemplate(ListItemType.Item);
        MyTemplate footerTemplate = new MyTemplate(ListItemType.Footer);
        footerTemplate.NoOfArticles = Count.ToString();
        dlArt.FooterTemplate = footerTemplate;
        return dlArt;
    }

In the above code, phArticles is the PlaceHolder id. Thus, we have created the DataList dynamically and now we will move on to the implementation of dynamic GridView.

Implementing Dynamic GridView

Using the GridView to display the articles analogous to the above with DataList will display the article in a slightly different layout. Refer to the below figure.

Figure 3: Dynamic GridView

Constructing Dynamic GridView

Displaying the articles in gridview will be different from displaying in datalist. For achieving this, I have created two Template classes,

·         DynamicGridViewTextTemplate

·         DynamicGridViewURLTemplate.

DynamicGridViewTextTemplate class is used to add a template column with label while DynamicGridViewURLTemplate class is used to add the URL of the article.

Listing 5: TemplateClass for GridView

public class DynamicGridViewTextTemplate : ITemplate
{
    string _ColName;
    DataControlRowType _rowType;
    int _Count;
  
    public DynamicGridViewTextTemplate(string ColName, DataControlRowType RowType)
    {
        _ColName = ColName;
        _rowType = RowType;
    }
    public DynamicGridViewTextTemplate(DataControlRowType RowType, 
      int ArticleCount)
    {
        _rowType = RowType;
        _Count = ArticleCount;
    }
    public void InstantiateIn(System.Web.UI.Control container)
    {
        switch (_rowType)
        {
            case DataControlRowType.Header:
                Literal lc = new Literal();
                lc.Text = "<b>" + _ColName + "</b>";
                container.Controls.Add(lc);
                break;
            case DataControlRowType.DataRow:               
                 Label lbl = new Label();
                 lbl.DataBinding += new EventHandler(this.lbl_DataBind);
                 container.Controls.Add(lbl);               
                break;
            case DataControlRowType.Footer:
                Literal flc = new Literal();
                flc.Text = "<b>Total No of Articles:" + _Count + "</b>";
                container.Controls.Add(flc);
                break;
            default:
                break;
        }
    }
   
    private void lbl_DataBind(Object sender, EventArgs e)
    {
        Label lbl  = (Label)sender;
        GridViewRow row = (GridViewRow)lbl.NamingContainer;
        lbl.Text =DataBinder.Eval(row.DataItem, _ColName).ToString();
    }
 
}
public class DynamicGridViewURLTemplate : ITemplate
{
    string _ColNameText;
    string _ColNameURL;
    DataControlRowType _rowType;
 
    public DynamicGridViewURLTemplate(string ColNameText, 
       string ColNameURL, DataControlRowType RowType)
    {
        _ColNameText = ColNameText;
        _rowType = RowType;
        _ColNameURL = ColNameURL;
    }
    public void InstantiateIn(System.Web.UI.Control container)
    {
        switch (_rowType)
        {
            case DataControlRowType.Header:
                Literal lc = new Literal();
                lc.Text = "<b>" + _ColNameURL + "</b>";
                container.Controls.Add(lc);
                break;
            case DataControlRowType.DataRow:
                HyperLink hpl = new HyperLink();
                hpl.Target = "_blank";
                hpl.DataBinding += new EventHandler(this.hpl_DataBind);
                container.Controls.Add(hpl);
                break;
            default:
                break;
        }
    }
    private void hpl_DataBind(Object sender, EventArgs e)
    {
        HyperLink hpl = (HyperLink)sender;
        GridViewRow row = (GridViewRow)hpl.NamingContainer;
        hpl.NavigateUrl = DataBinder.Eval(row.DataItem, _ColNameURL).ToString();
        hpl.Text = "<div class=\"Post\"><div class=\"PostTitle\">" + 
         DataBinder.Eval(row.DataItem, _ColNameText).ToString() + "</div></div>";
    }
}
Using the Template Class in GridView

Using dynamic template in GridView is slightly different from DataList. We will create the dynamic GridView in column wise with header template, item template and footer template from the first column to the last.

Steps

1.    Create a GridView Object.

2.    Create an instance of TemplateField object.

3.    Instantiate the Dynamic template class with proper ListItemType and assign it to the corresponding template property of TemplateField object and finally add this object to the column collection of GridView.

Listing 6: Templates of GridView

TemplateField tf = new TemplateField();
tf.HeaderTemplate = new DynamicGridViewTextTemplate("ArticleID",
 DataControlRowType.Header);
tf.ItemTemplate = new DynamicGridViewTextTemplate("ArticleID",
 DataControlRowType.DataRow);
tf.FooterTemplate = new DynamicGridViewTextTemplate(DataControlRowType.Footer,
 ds.Tables[i].Rows.Count);             

If you compare the implementation of DataList, in Gridview we will not create a dynamic template for the grid, instead we create it for the grid’s column (TemplateField).

Listing 7: Using Template class

for (int i = 0; i < ds.Tables.Count; i++)
        {
            if (ds.Tables[i].Rows.Count > 0)
            {
                GridView gvDynamicArticle = new GridView();
                gvDynamicArticle.Width = Unit.Pixel(700);
                gvDynamicArticle.BorderWidth = Unit.Pixel(0);
                gvDynamicArticle.Caption = 
                   "<div id=\"nifty\" class=\"PostCategory\">" + 
                   ds.Tables[i].Rows[0]["Category"].ToString() + 
                   " Articles</div>";
                gvDynamicArticle.AutoGenerateColumns = false;
                gvDynamicArticle.ShowFooter = true;
                TemplateField tf = null;
 
                tf = new TemplateField();
                tf.HeaderTemplate = new DynamicGridViewTextTemplate("ArticleID", 
                   DataControlRowType.Header);
                tf.ItemTemplate = new DynamicGridViewTextTemplate("ArticleID", 
                   DataControlRowType.DataRow);
                tf.FooterTemplate = new DynamicGridViewTextTemplate(
                   DataControlRowType.Footer, ds.Tables[i].Rows.Count);                
               
                gvDynamicArticle.Columns.Add(tf);
 
                tf = new TemplateField();
                tf.HeaderTemplate = new DynamicGridViewTextTemplate("Title", 
                   DataControlRowType.Header);
                tf.ItemTemplate = new DynamicGridViewTextTemplate("Title", 
                   DataControlRowType.DataRow);
                gvDynamicArticle.Columns.Add(tf);
 
                tf = new TemplateField();
                tf.HeaderTemplate = new DynamicGridViewTextTemplate("Description", 
                   DataControlRowType.Header);
                tf.ItemTemplate = new DynamicGridViewTextTemplate("Description", 
                   DataControlRowType.DataRow);
                gvDynamicArticle.Columns.Add(tf);
 
                tf = new TemplateField();
                tf.HeaderTemplate = new DynamicGridViewURLTemplate("Title""URL", 
                   DataControlRowType.Header);
                tf.ItemTemplate = new DynamicGridViewURLTemplate("Title""URL", 
                   DataControlRowType.DataRow);
                gvDynamicArticle.Columns.Add(tf);
 
                tf = new TemplateField();
                tf.HeaderTemplate = new DynamicGridViewTextTemplate("Author", 
                   DataControlRowType.Header);
                tf.ItemTemplate = new DynamicGridViewTextTemplate("CreatedBy", 
                   DataControlRowType.DataRow);
                gvDynamicArticle.Columns.Add(tf);
 
 
                gvDynamicArticle.RowDataBound += new 
                   GridViewRowEventHandler(this.DynamicGrid_RowDataBound);
 
                gvDynamicArticle.DataSource = ds.Tables[i];
                gvDynamicArticle.DataBind();
                phDynamicGridHolder.Controls.Add(gvDynamicArticle);
            }
        }

In the above code (Listing 6 –Using Template class) we can clearly understand that we are creating the dynamic template for the GridView's column as opposed to DataList where we created the template for the grid itself. To throw more light on this it means that we are creating the first column’s header, item and footer and adding it to the GridView's column list through TemplateField object to the last column as I said earlier.

Downloads

Conclusion

The functionalities like displaying table of data on a public website like the one in our example or displaying report in a web page in an enterprise application is one the major things that we do in everyday development. This article will help you to do that dynamically with the help of DataList and GridView in ASP.NET 2.0. Enjoy Coding!!!



User Comments

Title: aaaa   
Name: aaaa
Date: 2012-10-19 12:48:33 AM
Comment:
aaaaa
Title: 6u5u75   
Name: 657657
Date: 2012-10-19 12:48:18 AM
Comment:
hgfgfhfgh
Title: sgrryry   
Name: ryryytr
Date: 2012-08-18 9:00:37 AM
Comment:
hkhafsjkfbudssdjfwuifwfbweufwefwefbewjfuwiefw
Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:33:16 PM
Comment:
[/pre]Cheap NFL,NBA,MLB,NHL
[url=http://www.jersey2shop.com/]Jerseys From China[/url]
[url=http://www.jersey2shop.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jersey2shop.com/]cheap China Jerseys[/url]
[url=http://www.jersey2shop.com/]Sports Jerseys China[/url]
[url=http://www.jersey2shop.com/NFL-Jerseys-c68/]NFL Jerseys China[/url]
[url=http://www.jersey2shop.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
NHL Jerseys China
[url=http://www.jersey2shop.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[/pre]
[pre]We Are Professional China jerseys Wholesaler
[url=http://www.cheapjersey2store.com/]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url= http://www.cheapjersey2store.com/]2012 mlb all atar jerseys[/url]
[url= http://www.cheapjersey2store.com/ [/url]Cheap China Wholesael[/url]
[url= http://www.cheapjersey2store.com/]Wholesale jerseys From China[/url]
[url=http://www.cheapjersey2store.com/]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.cheapjersey2store.com/]Jerseys From China[/url]
[url=http://www.cheapjersey2store.com/NFL-Jerseys-c68]NFL jerseys China[/url]
[url=http://www.cheapjersey2store.com/NHL-Jerseys-c96/]NHL Jerseys China[/url]
[url=http://www.cheapjersey2store.com/NBA-Jerseys-c77/]NBA Jerseys China[/url]
[url=http://www.cheapjersey2store.com/MLB-Jerseys-c94/]MLB Jerseys China[/url]
[url= http://www.cheapjersey2store.com/]China Jerseys[/url],Free Shipping
[/pre]
[/pre]
We are professional jerseys manufacturer from china,wholesal
sports [url= http://www.jerseycaptain.com/]cheap jerseys sale online [/url]
[url= http://www.jerseycaptain.com/]2012 nike nfl Jerseys[/url]
[url=http://www.jerseycaptain.com/NFL-Jerseys-c68]cheap NFL jerseys China[/url]
[url=http://www.jerseycaptain.com/NHL-Jerseys-c96/]NHL Jerseys C
Title: good article   
Name: Mahmoud ALGoul
Date: 2011-02-02 5:51:30 AM
Comment:
cool article, but how I can add paging for the code, any help please.
Title: FANTASTIC!!   
Name: André
Date: 2010-03-12 5:02:57 PM
Comment:
Thank You!! Great job and easy to understand..
Title: web filtering policy   
Name: adel
Date: 2009-07-29 5:47:19 AM
Comment:
i need to design web filtering policy
Title: Itemplate funtion not working   
Name: Prabhat Sinha
Date: 2009-06-25 7:17:46 AM
Comment:
its really good work in C# but itemplete funtion not working in vb.net please help me
Title: If items dissapear in postback   
Name: TiagoReil
Date: 2009-06-16 1:23:08 PM
Comment:
I had to do something like this, and had lots of problems. First of all, when you do a postback, you loose all the dinamic templates. Not databounts added dinamically, but only the ones that are templates disapear always. So I run the code on every postback. But then the events in the grid, that are loaded dinamically, started acting strange. Runing events that had already run, etc.

The solution and correct way to do this is to add all the code for adding columns on the PreInit event. Thats the correct place to add the creation of the columns.

Santiago.
Title: Great example   
Name: Vijay
Date: 2009-06-06 3:36:28 AM
Comment:
What is DynamicGrid_RowDataBound doing?
Title: Working example   
Name: Mindaugas
Date: 2009-06-03 5:05:06 AM
Comment:
Working example. Thank you!
Title: Dynamic GridView   
Name: Shaju M.K
Date: 2009-02-12 5:38:02 PM
Comment:
Hi Satheesh Babu,
Really its a very nice article that helped me to solve the issue that I faced in the development stage.

Thank You Very much!
Title: JSON LINQ   
Name: willian brasil
Date: 2008-10-03 1:18:03 PM
Comment:
Very Good!
Title: Data List   
Name: Deleep Kumar Pavana
Date: 2008-09-11 5:03:07 AM
Comment:
Hi satheesh,
Its good but repeat colomns property is not working properly on that,if i use table tag to display data in table format..
Title: Good Work ....   
Name: Mudassar C
Date: 2008-07-17 1:09:10 AM
Comment:
Hi Sateesh,
Its a really good article to read..
Good piece of Code..

Mudassar Chandle
Title: Data List And GridView   
Name: Santosh Kumar
Date: 2008-06-24 3:36:54 AM
Comment:
Hi Satheesh,
I read this article , good work done.
Santosh Kumar
http://www.operativesystems.com
Title: VB Please   
Name: Matt
Date: 2008-06-03 1:11:24 AM
Comment:
Any chance I can get this in VB?
Please
THanks
Matt
Title: problem with binding   
Name: Kannan
Date: 2008-05-15 2:51:40 AM
Comment:
All item template values displayed at once.no reapeated datalist display
Title: muhajiran bugok   
Name: muhajiran bugok
Date: 2008-05-09 6:43:36 AM
Comment:
this is very helpful..
-putang ina nyo lahat
Title: sivaram   
Name: sivaram
Date: 2008-02-04 1:47:59 AM
Comment:
Thanks.

hi i read your article.it is well and good article.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2018 ASPAlliance.com  |  Page Processed at 2018-09-22 1:23:49 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search