Geeks With Blogs


Microsoft MVP


Moderator at CodeASP.NET

Quiz Master

free counters
Free counters
Added on January 19,2012

Follow Me @vmsdurano

A bit About Me

The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.

Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

A user in the forums ( is asking how to insert  sub rows in GridView and also add delete functionality for the inserted sub rows. In this post I'm going to demonstrate how to this in ASP.NET WebForms.  The basic idea to achieve this is we just need to insert row data in the DataSource that is being used in GridView since the GridView rows will be generated based on the DataSource data.

To make it more clear then let's build up a sample application. To start fire up Visual Studio and create a WebSite or Web Application project and then add a new WebForm. In the WebForm ASPX page add this GridView markup below:


   1:  <asp:gridview ID="GridView1" runat="server" AutoGenerateColumns="false" onrowdatabound="GridView1_RowDataBound">
   2:          <Columns>
   3:          <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
   4:          <asp:TemplateField HeaderText="Header 1">
   5:              <ItemTemplate>
   6:                  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
   7:              </ItemTemplate>
   8:          </asp:TemplateField>
   9:          <asp:TemplateField HeaderText="Header 2">
  10:              <ItemTemplate>
  11:                  <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
  12:              </ItemTemplate>
  13:          </asp:TemplateField>
  14:          <asp:TemplateField HeaderText="Header 3">
  15:              <ItemTemplate>
  16:                   <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
  17:              </ItemTemplate>
  18:          </asp:TemplateField>
  19:          <asp:TemplateField HeaderText="Action">
  20:              <ItemTemplate>
  21:                  <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click" Text="Insert"></asp:LinkButton>                
  22:              </ItemTemplate>
  23:          </asp:TemplateField>
  24:          </Columns>
  25:  </asp:gridview>


Then at the code behind source of ASPX page you can add this codes below:


   1:  private DataTable FillData() {
   3:              DataTable dt = new DataTable();
   4:              DataRow dr = null;
   6:              //Create DataTable columns
   7:              dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
   9:              //Create Row for each columns
  10:              dr = dt.NewRow();
  11:              dr["RowNumber"] = 1;
  12:              dt.Rows.Add(dr);
  14:              dr = dt.NewRow();
  15:              dr["RowNumber"] = 2;
  16:              dt.Rows.Add(dr);
  18:              dr = dt.NewRow();
  19:              dr["RowNumber"] = 3;
  20:              dt.Rows.Add(dr);
  22:              dr = dt.NewRow();
  23:              dr["RowNumber"] = 4;
  24:              dt.Rows.Add(dr);
  26:              dr = dt.NewRow();
  27:              dr["RowNumber"] = 5;
  28:              dt.Rows.Add(dr);
  30:              //Store the DataTable in ViewState for future reference
  31:              ViewState["CurrentTable"] = dt;
  33:              return dt;
  35:          }
  37:          private void BindGridView(DataTable dtSource) {
  38:              GridView1.DataSource = dtSource;
  39:              GridView1.DataBind();
  40:          }
  42:          private DataRow InsertRow(DataTable dtSource, string value) {
  43:              DataRow dr = dtSource.NewRow();
  44:              dr["RowNumber"] = value;
  45:              return dr;
  46:          }
  47:          //private DataRow DeleteRow(DataTable dtSource,
  49:          protected void Page_Load(object sender, EventArgs e) {
  50:              if (!IsPostBack) {
  51:                  BindGridView(FillData());
  52:              }
  53:          }
  55:          protected void LinkButton1_Click(object sender, EventArgs e) {
  56:              LinkButton lb = (LinkButton)sender;
  57:              GridViewRow row = (GridViewRow)lb.NamingContainer;
  58:              DataTable dtCurrentData = (DataTable)ViewState["CurrentTable"];
  59:              if (lb.Text == "Insert") {
  60:                  //Insert new row below the selected row
  61:                  dtCurrentData.Rows.InsertAt(InsertRow(dtCurrentData, row.Cells[0].Text + "-sub"), row.RowIndex + 1);
  63:              }
  64:              else {
  65:                  //Delete selected sub row
  66:                  dtCurrentData.Rows.RemoveAt(row.RowIndex);
  67:              }
  69:              BindGridView(dtCurrentData);
  70:              ViewState["CurrentTable"] = dtCurrentData;
  71:          }
  73:          protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) {
  74:              if (e.Row.RowType == DataControlRowType.DataRow) {
  75:                  if (e.Row.Cells[0].Text.Contains("-sub")) {
  76:                      ((LinkButton)e.Row.FindControl("LinkButton1")).Text = "Delete";
  77:                  }
  78:              }
  79:          }


As you can see the code above is pretty straight forward and self explanatory but just to give you a short explanation the code above is composed of three (3) private methods which are the FillData(), BindGridView and InsertRow(). The FillData() method is a method that returns a DataTable and basically creates a dummy data in the DataTable to be used as the GridView DataSource. You can replace the code in that method if you want to use actual data from database but for the purpose of this example I just fill the DataTable with a dummy data on it. The BindGridVew is a method that handles the actual binding of GridVew. The InsertRow() is a method that returns a DataRow. This method handles the insertion of the sub row.

Now in the LinkButton OnClick event, we casted the sender to a LinkButton to determine the specific object that fires up the event and get the row values. We then reference the Data from ViewState to get the current data that is being used in the GridView. If the LinkButton text is "Insert" then we will insert new row to the DataSource ( in this case the DataTable) based on the rowIndex if not then Delete the sub row that was added.

Here are some screen shots of the output below:

On initial load:


After inserting a sub row:


That's it! I hope someone find this post useful!


Technorati Tags: ,,
Posted on Tuesday, January 4, 2011 5:52 PM ADO.NET , ASP.NET , C# , GridView | Back to top

Comments on this post: Inserting and Deleting Sub Rows in GridView

# re: Inserting and Deleting Sub Rows in GridView
Requesting Gravatar...
This will be usefull for me, thank you very much
Left by engin on Feb 16, 2011 6:20 AM

# re: Inserting and Deleting Sub Rows in GridView
Requesting Gravatar...
The article and the code is very easy to understand and it is the one which i was looking for, Can you help me to change the code which will be inserting the parent row itself dynamically instead of defining the no of rows as static as 5. Thanks
Left by jsre on Apr 27, 2011 3:05 PM

# re: Inserting and Deleting Sub Rows in GridView
Requesting Gravatar...

Take a look at this post:
Left by Vinz on Apr 27, 2011 7:44 PM

# re: Inserting and Deleting Sub Rows in GridView
Requesting Gravatar...
Thanks Vinz, It worked, But there is little mess with the rowcount, increment.

The thing is that if we add the new row without inserting subrows it works fine.

e.g if we add ten parent rows without adding subrows inbetween, then the sequence of rowcount of parent row is working fine. but if we add subrows for any parent row inbetween then the rowcount of parent row takes subrow count also, like following

1 P.Row
1-3 subrow
2-3 subrow
3-3 subrow

Here instead of 7 as parent row number, it has to be 4 . Can you suggest.

Left by Jsre on Apr 28, 2011 1:54 PM

# re: Inserting and Deleting Sub Rows in GridView
Requesting Gravatar...

That's normal because the first column takes the current row count and display it. If you want to modify the display then I'd suggest you to debug the codes and step into it for you to figure out what line you should do the code modifications.

I would love to give you an example about it but I'm tied up with deadlines now.
Left by Vinz on Apr 28, 2011 2:38 PM

# re: Inserting and Deleting Sub Rows in GridView
Requesting Gravatar...
Thanks, Vinz for immediate response, i shall try for the solution and come back with the modified code.

Thanks once again.
Left by Jsre on Apr 28, 2011 4:46 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: