Dynamic columns in Gridview

There are many types of column field are are available for grid view like

• BoundField
• ButtonField
• CheckBoxField
• CommandField
• HyperLinkField
• ImageField
• TemplateField

Here I explain how to add dynamically Bound Field and then Template Field into grid view. First we look how to add Bound Field into Grid view and then Template Field.

First of all make your AutoGenerateColumns property to false.

Prepare your data source which will you going bind with grid view. it will be Data Table or Generic List of class type or structure type any thing or Table Class of your Linq dbml data contexts class.

Here we are going to use Data Table as follow.

DataTable dt = new DataTable("ItemMaster");

dt.Columns.Add(new DataColumn("ItemId",typeof(Int32)));
dt.Columns.Add(new DataColumn("ItemName", typeof(String)));
dt.Columns.Add(new DataColumn("Price", typeof(Decimal)));

for (int i = 0; i < 10; i++)
{
     DataRow dr = dt.NewRow();
     dr[0] = i + 1;
     dr[1] = "Name " + i.ToString();
     dr[2] = i * 0.5 + 1;
     dt.Rows.Add(dr);
}

For each column of table we have to add one BoundField into gridview following is code for that

foreach (DataColumn dc in dt.Columns)
{
     BoundField bf = new BoundField();
     bf.DataField = dc.ColumnName;
     bf.HeaderText = dc.ColumnName;
     GridView1.Columns.Add(bf);
}

Now you grid view is ready to bind DataTable.

GridView1.DataSource = dt;
GridView1.DataBind();

This type of dynamic generated column is useful when we want custom css and style depend on some logic. and we want to show hide some column dynamically.

To add Template Field dynamically you have to create one class which inherit ITemplate interface. Here in example we create one hyperlink template field class which inherit ITemplate interface then we bind that field to our grid view using data table.

public class HyperLinkTemplate : ITemplate

{

    private DataControlRowType TemplateType;

    private string ColumnName;

    private string NavigateUrl;

    private string Text;

    public HyperLinkTemplate(DataControlRowType TemplateType, string ColumnName, string NavigateUrl, string Text)

    {

        this.TemplateType = TemplateType;

        this.ColumnName = ColumnName;

        this.NavigateUrl = NavigateUrl;

        this.Text = Text;

    }

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

    {

        switch (TemplateType)

        {

            case DataControlRowType.Header:

                Literal lc = new Literal();

                lc.Text = ColumnName;

                container.Controls.Add(lc);

                break;

            case DataControlRowType.DataRow:

                HyperLink objHyperLink = new HyperLink();

                objHyperLink.Target = "_blank";

                objHyperLink.DataBinding += new EventHandler(objHyperLink_DataBinding);

                container.Controls.Add(objHyperLink);

                break;

            default:

                break;

        }

    }

    void objHyperLink_DataBinding(object sender, EventArgs e)

    {

        HyperLink objHyperLink = sender as HyperLink;

        GridViewRow row = (GridViewRow)objHyperLink.NamingContainer;

        objHyperLink.NavigateUrl = NavigateUrl;

        objHyperLink.Text = DataBinder.Eval(row.DataItem, Text).ToString();

    }

}

To bind this HyperLinkTemplate to oure grid view use following code. Here we bind Item name column to this template field with editpage.aspx url. this code display both boud field and template field adding.

foreach (DataColumn dc in dt.Columns)

{

if (dc.ColumnName != "ItemName")

{

BoundField bf = new BoundField();

bf.DataField = dc.ColumnName;

bf.HeaderText = dc.ColumnName;

GridView1.Columns.Add(bf);

}

else

{

TemplateField tf = new TemplateField();

tf.HeaderTemplate = new HyperLinkTemplate(DataControlRowType.Header, dc.ColumnName, "", "");

tf.ItemTemplate = new HyperLinkTemplate(DataControlRowType.DataRow, dc.ColumnName, "~/editpage.aspx", dc.ColumnName);

GridView1.Columns.Add(tf);

}

}