How To Create Bound Column Dynamically (Data Grid)

Step 1

Add the GridView to your page.

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DataGrid ID="datagrid1" runat="server" AutoGenerateColumns="false" OnDataBinding="DataGrid1_DataBinding"
                OnItemCommand="DataGrid1_ItemCommand">
                <Columns>
                </Columns>
            </asp:DataGrid>
        </div>
       <asp:Label ID="lblStatus" runat="server"></asp:Label> 
    </form>
</body>
</html>

Step2

Create DataTable

private DataTable CreateTable()
    {
        DataTable ret = new DataTable();
        ret.Columns.Add(new DataColumn("ID", typeof(int)));
        ret.Columns.Add(new DataColumn("Column1", typeof(Int32)));
        ret.Columns.Add(new DataColumn("Column2", typeof(Int32)));
        //Make some rows and put some sample data in
        DataRow dr;
        int i;
        for (i = 1; i <= 10; i++)
        {
            dr = ret.NewRow();
            dr[0] = i;
            dr[1] = i * 25;
            dr[2] = i * i;
            //add the row to the datatable
            ret.Rows.Add(dr);
        }
        return ret;
    }

Step 3

Bind GridView (notice that for dynamically created controls within the datagrid to fire up the
itemcommand event, the datagrid needs to be created during the initialization stage
of the page’s lifecycle)


protected void Page_Init(object sender, System.EventArgs e)
    {
       
        datagrid1.DataSource = CreateTable();
        datagrid1.DataBind();
    }

Step 4

Now we will loop through the columns on the datatable and build a tempalte column that has one imagebutton in it
add it to the grid.columns collection then create another boundcolumn that would display the value in the column

protected void DataGrid1_DataBinding(object sender, EventArgs e)
    {
         tbl = CreateTable();
        
        foreach (DataColumn dc in tbl.Columns)
        {
         
            TemplateColumn tc = new TemplateColumn();
            ((DataGrid)sender).Columns.Add(tc);
            tc.ItemTemplate = new MyTemplate(ListItemType.Item, dc.ColumnName);

            BoundColumn bc = new BoundColumn();
            //add a column to contain the value of the field
            bc.DataField = dc.ColumnName;
            bc.DataFormatString = "{0:C}";
            bc.HeaderText = dc.ColumnName;
            ((DataGrid)sender).Columns.Add(bc);

        }
    }

protected void DataGrid1_ItemCommand(object sender, DataGridCommandEventArgs e)
  {
      //I saved the ImageButton ID in the CommandAgument to be able to search by it
      ImageButton btnImage = e.Item.FindControl(e.CommandArgument.ToString()) as ImageButton;
   
      //toggle the image
      if (btnImage.ImageUrl == "images/left.gif")
      {
          btnImage.ImageUrl = "images/right.gif";
      }
      else
      {
          btnImage.ImageUrl = "images/left.gif";
      }
      lblStatus.Text = "commandName = " + e.CommandName + "  at row = " + e.Item.ItemIndex + "
button image = " + btnImage.ImageUrl;
  }

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru