How to Add New Row to a Gridview Dynamically

[Mudassir]

in this article I will explain how you can add a row with template fields dynamically in grid view in asp.net using c#

For this you will need to write 3 functions.
Lets assume that we have a grid view in which we are going to add the subject, note, Speaker Name, Time, order, start and end of a particular event.

Here is the ASP.NET code for the GridView:

<asp:GridView ID="gvSpeakersAgenda" runat ="server"
              AutoGenerateColumns ="false" Width ="100%"
              GridLines="None" CssClass="mGrid" 
              PagerStyle-CssClass="pgr"
              AlternatingRowStyle-CssClass="alt"
              HeaderStyle-CssClass="headercss">
  <Columns>
    <asp:TemplateField HeaderText ="Order">
      <ItemTemplate>
        <asp:TextBox ID ="txtOrder" ReadOnly ="true" runat ="server" Width ="40px"></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText ="Subject">
      <ItemTemplate>
        <asp:TextBox ID="txtSubject" Width ="145px" runat ="server" TextMode ="MultiLine"></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText ="Speaker">
      <ItemTemplate>
        <asp:DropDownList ID ="ddlSpeakers" runat="server"></asp:DropDownList>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText ="Time">
      <ItemTemplate>
        <asp:TextBox ID="txtTime" runat ="server" Width ="60px"></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText ="Note">
      <ItemTemplate>
        <asp:TextBox ID="txtNote" Width ="145px" runat ="server" TextMode ="MultiLine"></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText ="Start" Visible ="false">
      <ItemTemplate>
        <asp:TextBox ID="txtStart" runat ="server" Width ="100px" ReadOnly ="true"></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText ="End" Visible="false">
      <ItemTemplate >
        <asp:TextBox ID ="txtEnd" runat ="server" Width ="100px" ReadOnly ="true"></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>
 

We will write three functions as follows.

private void SetInitialRow()
        {
            DataTable dt = new DataTable();
            DataRow dr = null;
 
            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Subject", typeof(string)));
            dt.Columns.Add(new DataColumn("Speaker", typeof(string)));
            dt.Columns.Add(new DataColumn("Time", typeof(string)));
            dt.Columns.Add(new DataColumn("Note", typeof(string)));
            dt.Columns.Add(new DataColumn("Order", typeof(string)));
            dt.Columns.Add(new DataColumn("Start", typeof(string)));
            dt.Columns.Add(new DataColumn("End", typeof(string)));
            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Subject"] = string.Empty;
            dr["Speaker"] = string.Empty;
            dr["Time"] = string.Empty;
            dr["Note"] = string.Empty;
            dr["Order"] = string.Empty;
            dr["Start"] = string.Empty;
            dr["End"] = string.Empty;
            dt.Rows.Add(dr);
 
 
 
            ViewState["CurrentTable"] = dt;
 
 
            gvSpeakersAgenda.DataSource = dt;
            gvSpeakersAgenda.DataBind();
 
 
        }
 

then write the method for adding new row like this

private void AddNewRowToGrid()
        {
 
            int rowIndex = 0;
 
 
 
            if (ViewState["CurrentTable"] != null)
            {
 
                DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
 
                DataRow drCurrentRow = null;
 
                if (dtCurrentTable.Rows.Count > 0)
                {
 
                    for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                    {
 
                        //extract the TextBox values
                        TextBox txtSubject = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[0].FindControl("txtSubject");
                        DropDownList ddlSpeakers = (DropDownList)gvSpeakersAgenda.Rows[rowIndex].Cells[1].FindControl("ddlSpeakers");
                        TextBox txtTime = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[2].FindControl("txtTime");
                        TextBox txtNote = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[3].FindControl("txtNote");
                        TextBox txtOrder = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[4].FindControl("txtOrder");
                        TextBox txtStart = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[5].FindControl("txtStart");
                        TextBox txtEnd = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[6].FindControl("txtEnd");
                        drCurrentRow = dtCurrentTable.NewRow();
                        drCurrentRow["Subject"] = txtSubject.Text;
                        drCurrentRow["Speaker"] = ddlSpeakers.Text;
                        drCurrentRow["Time"] = txtTime.Text;
                        drCurrentRow["Note"] = txtNote.Text;
                        // int order = Convert.ToInt32(txtOrder.Text);
                        drCurrentRow["Order"] = txtOrder.Text;
                        drCurrentRow["Start"] = txtStart.Text;
                        drCurrentRow["End"] = txtEnd.Text;
                        //drCurrentRow["Order"] = order + 1;
                        rowIndex++;
                        txtSubject.Focus();
                        txtOrder.ReadOnly = true;
                    }
 
                    //add new row to DataTable
 
                    dtCurrentTable.Rows.Add(drCurrentRow);
 
                    //Store the current data to ViewState
 
                    ViewState["CurrentTable"] = dtCurrentTable;
 
 
 
                    //Rebind the Grid with the current data
                    gvSpeakersAgenda.DataSource = dtCurrentTable;
                    gvSpeakersAgenda.DataBind();
 
                }
 
            }
 
            else
            {
 
                Response.Write("ViewState is null");
 
            }
 
 
 
            //Set Previous Data on Postbacks
 
            SetPreviousData();
 
        }
 

The method SetPreviousData() will look like this

 private void SetPreviousData()
        {
            int rowIndex = 0;
            if (ViewState["CurrentTable"] != null)
            {
                DataTable dt = (DataTable)ViewState["CurrentTable"];
 
                if (dt.Rows.Count > 0)
                {
                    for (int i = 1; i < dt.Rows.Count; i++)
                    {
                        TextBox txtSubject = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[0].FindControl("txtSubject");
                        DropDownList ddlSpeakers = (DropDownList)gvSpeakersAgenda.Rows[rowIndex].Cells[1].FindControl("ddlSpeakers");
                        TextBox txtTime = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[2].FindControl("txtTime");
                        TextBox txtNote = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[3].FindControl("txtNote");
                        TextBox txtOrder = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[4].FindControl("txtOrder");
                        TextBox txtStart = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[5].FindControl("txtStart");
                        TextBox txtEnd = (TextBox)gvSpeakersAgenda.Rows[rowIndex].Cells[6].FindControl("txtEnd");
                        txtSubject.Text = dt.Rows[i]["Subject"].ToString();
                        ddlSpeakers.Text = dt.Rows[i]["Speaker"].ToString();
                        txtTime.Text = dt.Rows[i]["Time"].ToString();
                        txtNote.Text = dt.Rows[i]["Note"].ToString();
                        txtOrder.Text = dt.Rows[i]["Order"].ToString();
                        txtStart.Text = dt.Rows[i]["Start"].ToString();
                        txtEnd.Text = dt.Rows[i]["End"].ToString();
                        txtOrder.ReadOnly = true;
                        rowIndex++;
                    }
                }
            }
        }
 

Now place a button and on the click event of that button simply call the method AddNewRowToGrid()

[Frinavale]

If you wanted to create dynamic columns (template fields) for your GridView, you would have to create a class that implements the ITemplate interface.

Could you please post the ASP.NET markup for the GridView that you used in your article.

-Frinny