In my current project I have a requirement that the user should be able to add a new row on click of button in grid view.
So for that I have used asp grid view in that application page.
Below are the steps,
So for that I have used asp grid view in that application page.
Below are the steps,
- Open visual studio -> create new empty project -> right click and click add new item select application page -> give name to that application page.
- In content place holder add below code
- <div id="gvAddrow">
- <asp:gridview ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false">
- <Columns>
- <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
- <asp:TemplateField HeaderText="Header 1">
- <ItemTemplate>
- <asp:TextBox ID="txt1" runat="server"></asp:TextBox>
- </ItemTemplate>
- </asp:TemplateField>
- <asp:TemplateField HeaderText="Header 2">
- <ItemTemplate>
- <asp:TextBox ID="txt2" runat="server"></asp:TextBox>
- </ItemTemplate>
- </asp:TemplateField>
- <asp:TemplateField HeaderText="Header 3">
- <ItemTemplate>
- <asp:TextBox ID="txt3" runat="server"></asp:TextBox>
- </ItemTemplate>
- <FooterStyle HorizontalAlign="Right" />
- <FooterTemplate>
- <asp:Button ID="ButtonAdd" runat="server" Text="Add Row" onclick="ButtonAdd_Click" /> </FooterTemplate>
- </asp:TemplateField>
- </Columns>
- </asp:gridview>
- </div>
- Open .cs file and add below code in button click event
- protected void ButtonAdd_Click(object sender, EventArgs e) {
- AddNewRowToGrid();
- }
- 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 box1 = (TextBox) Gridview1.Rows[rowIndex].Cells[1].FindControl("txt1");
- TextBox box2 = (TextBox) Gridview1.Rows[rowIndex].Cells[2].FindControl("txt2");
- TextBox box3 = (TextBox) Gridview1.Rows[rowIndex].Cells[3].FindControl("txt3");
- drCurrentRow = dtCurrentTable.NewRow();
- drCurrentRow["RowNumber"] = i + 1;
- dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;
- dtCurrentTable.Rows[i - 1]["Column2"] = box2.Text;
- dtCurrentTable.Rows[i - 1]["Column3"] = box3.Text;
- rowIndex++;
- }
- dtCurrentTable.Rows.Add(drCurrentRow);
- ViewState["CurrentTable"] = dtCurrentTable;
- Gridview1.DataSource = dtCurrentTable;
- Gridview1.DataBind();
- }
- } else {
- Response.Write("ViewState is null");
- }
- //Set Previous Data on Postbacks
- SetPreviousData();
- }
- private void SetPreviousData() {
- int rowIndex = 0;
- if (ViewState["CurrentTable"] != null) {
- DataTable dt = (DataTable) ViewState["CurrentTable"];
- if (dt.Rows.Count > 0) {
- for (int i = 0; i < dt.Rows.Count; i++) {
- TextBox box1 = (TextBox) Gridview1.Rows[rowIndex].Cells[1].FindControl("txt1");
- TextBox box2 = (TextBox) Gridview1.Rows[rowIndex].Cells[2].FindControl("txt2");
- TextBox box3 = (TextBox) Gridview1.Rows[rowIndex].Cells[3].FindControl("txt3");
- box1.Text = dt.Rows[i]["Column1"].ToString();
- box2.Text = dt.Rows[i]["Column2"].ToString();
- box3.Text = dt.Rows[i]["Column3"].ToString();
- rowIndex++;
- }
- }
- }
- }
- On page load add below code so that it will bind initial rows of grid view
- protected void Page_Load(object sender, EventArgs e) {
- if (!Page.IsPostBack) {
- SetInitialRow();
- }
- }
- private void SetInitialRow() {
- DataTable dt = new DataTable();
- DataRow dr = null;
- dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
- dt.Columns.Add(new DataColumn("Column1", typeof(string)));
- dt.Columns.Add(new DataColumn("Column2", typeof(string)));
- dt.Columns.Add(new DataColumn("Column3", typeof(string)));
- dr = dt.NewRow();
- dr["RowNumber"] = 1;
- dr["Column1"] = string.Empty;
- dr["Column2"] = string.Empty;
- dr["Column3"] = string.Empty;
- dt.Rows.Add(dr);
- //Store the DataTable in ViewState
- ViewState["CurrentTable"] = dt;
- Gridview1.DataSource = dt;
- Gridview1.DataBind();
- }
- Build and deploy above code.
- Open application page and grid view will appear on page
- On click of Add row button it will add one new row with three textboxes.
Thanks

Pawan Kumar TiwariPosted Mar 9, 2018, 6:41 AM
Hi Piyush Agarwal I have done client side i can share you code if u give me email id here i will suggest to achieved that task very easily u can bind all data in textbox but use some css to transparent all textbox means border none and using jquery or JS to click that textbox to change value to remove that css to add first simple use jquery method removecsss then to achieve that task very easily and also update that record if u changes rest of record not update
Piyush AgarwalPosted Mar 9, 2018, 6:25 AM
Thanks Rashmi for sharing this. Do you have any code that has client side i mean Javascript adding dynamic rows.
Pawan Kumar TiwariPosted Feb 14, 2018, 6:16 AM
If you are using ViewState then page is very slow if data is large so its not a good way to achieve the goal , Its good if data is less if some other ways you know so please tell me
Reshma BhalekarPosted Oct 26, 2017, 1:47 AM
Hi Satyaprakash, I have not posted output.. If you want it I will share with you..
Satyaprakash SamantarayPosted Sep 28, 2017, 11:21 PM
Where is the output??