Dynamic Gridview with TemplateColumn

There are situations when you want to create the columns of the Gridview dynamically because the number of columns and rows are unknown until runtime. Thankfully, ASP.Net has a nice feature to overcome this challenge. Using a seperate class which inherits the ITemplate interface lets you create the controls and the data to be bound to the Gridview at runtime.

Create a class called GridviewTemplate which also inherits the ITemplate interface, in the App_Code folder of your project.

GridviewTemplate.cs

public class GridViewTemplate : ITemplate
{
    ListItemType _templateType;
    string _columnName;

    //Constructor where we define the template type and column name.
    public GridViewTemplate(ListItemType type, string colname)
    {
        _templateType = type;
        _columnName = colname;
    }

    void ITemplate.InstantiateIn(System.Web.UI.Control container)
    {
        switch (_templateType)
        {
            case ListItemType.Header:
                Label lbl = new Label();
                lbl.Text = _columnName;
                container.Controls.Add(lbl);
                break;

            case ListItemType.Item:
                TextBox tb1 = new TextBox();
                tb1.DataBinding += new EventHandler(tb1_DataBinding);
                tb1.Columns = 8;
                container.Controls.Add(tb1);
                break;

            //EditItem is optional
            case ListItemType.EditItem:
                DropDownList ddl = new DropDownList();
                ddl.ID = "ddl" + _columnName;
                container.Controls.Add(ddl);
                break;

            case ListItemType.Footer:
                CheckBox chkColumn = new CheckBox();
                chkColumn.ID = "Chk" + _columnName;
                container.Controls.Add(chkColumn);
                break;
        }
    }

    /// <summary>
    /// This is the event, which will be raised when the binding happens.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    void tb1_DataBinding(object sender, EventArgs e)
    {
        TextBox txtdata = (TextBox)sender;
        GridViewRow container = (GridViewRow)txtdata.NamingContainer;
        object dataValue = DataBinder.Eval(container.DataItem, _columnName);
        if (dataValue != DBNull.Value)
        {
            txtdata.Text = dataValue.ToString();
        }
    }
}

Default.aspx

<div>
<asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="False">
</asp:GridView>
</div>

Default.aspx.cs

//Global declaration of variables on the page

const string PRODUCTNAME = "PRODUCT NAME";
const string ID = "ID";
const string PRICE = "PRICE";

protected void Page_Load(object sender, EventArgs e)
    {
        BindProducts();
    }

    private void BindProducts()
    {
        DataTable dt = new DataTable();
     
        DataColumn dc = new DataColumn(ID, typeof(System.Int32));
        dc.AutoIncrement = true;
        dt.Columns.Add(dc);

        dc = new DataColumn(PRODUCTNAME, typeof(System.String));
        dt.Columns.Add(dc);

        dc = new DataColumn(PRICE, typeof(System.Double));
        dt.Columns.Add(dc);

        Random r = new Random();

        for (int idx = 0; idx < 10; idx++)
        {
            DataRow dr = dt.NewRow();

            dr[PRODUCTNAME] = "Product " + Convert.ToString((idx + 1));
            dr[PRICE] = Convert.ToDouble(Math.Round(r.NextDouble() * 100 + 25, 2));

            dt.Rows.Add(dr);
        }

        foreach (DataColumn col in dt.Columns)
        {
            TemplateField tf= new TemplateField();
            tf.HeaderTemplate = new GridViewTemplate(ListItemType.Header, col.ColumnName);
            tf.ItemTemplate = new GridViewTemplate(ListItemType.Item, col.ColumnName);
            gvProducts.Columns.Add(tf);
        }

        gvProducts.DataSource = dt;
        gvProducts.DataBind();
    }