Geeks With Blogs

News

Microsoft MVP


Moderator at CodeASP.NET


Quiz Master




free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
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"

 

In my previous examples, I have demonstrated on how to add dynamic rows in GridView control with TextBoxes and how to save the values into the database. Now, seems that most of the developers are asking if how to add a delete functionality with it. So in this example, I’m going to show on how to delete a certain row in the dynamic GridView with TextBoxes.

 

Note: Before reading this example, then be sure to refer my previous examples mentioned above so that you will have a basic idea on how does the dynamic TextBox is being generated. Also in this example, I will only focus on the Deletion part so it means that I will not elaborate more on the dynmic TextBox generation.

 

Here are the code blocks below:

 

GRIDVIEW MARKUP (ASPX Source):

 

      <asp:gridview ID="Gridview1" runat="server" ShowFooter="true"

            AutoGenerateColumns="false" onrowcreated="Gridview1_RowCreated">

            <Columns>

            <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />

            <asp:TemplateField HeaderText="Header 1">

                <ItemTemplate>

                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                </ItemTemplate>

            </asp:TemplateField>

            <asp:TemplateField HeaderText="Header 2">

                <ItemTemplate>

                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

                </ItemTemplate>

            </asp:TemplateField>

            <asp:TemplateField HeaderText="Header 3">

                <ItemTemplate>

                     <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

                </ItemTemplate>

                <FooterStyle HorizontalAlign="Right" />

                <FooterTemplate>

                 <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row"

                        onclick="ButtonAdd_Click" />

                </FooterTemplate>

            </asp:TemplateField>

                 <asp:TemplateField>

                <ItemTemplate>

                    <asp:LinkButton ID="LinkButton1" runat="server" onclick="LinkButton1_Click">Remove</asp:LinkButton>

                </ItemTemplate>

            </asp:TemplateField>

            </Columns>

        </asp:gridview>

As you noticed, we have added a LinkButton at the very last column of the GridView wherein a user can delete a row when he invokes it.

 

 

CODES FOR DELETE:

 

// Hide the Remove Button at the last row of the GridView

    protected void Gridview1_RowCreated(object sender, GridViewRowEventArgs e)

    {

        if (e.Row.RowType == DataControlRowType.DataRow)

        {

              DataTable  dt = (DataTable)ViewState["CurrentTable"];

              LinkButton lb = (LinkButton)e.Row.FindControl("LinkButton1");

              if (lb != null)

              {

                  if (dt.Rows.Count > 1)

                  {

                      if (e.Row.RowIndex == dt.Rows.Count - 1)

                      {

                          lb.Visible = false;

                      }

                  }

                  else

                  {

                      lb.Visible = false;

                  }

              }

        }

    }

 

    protected void LinkButton1_Click(object sender, EventArgs e)

    {

        LinkButton lb = (LinkButton)sender;

        GridViewRow gvRow = (GridViewRow) lb.NamingContainer;

        int rowID = gvRow.RowIndex + 1;

        if (ViewState["CurrentTable"] != null)

        {

          DataTable  dt = (DataTable)ViewState["CurrentTable"];

          if (dt.Rows.Count > 1)

          {

              if (gvRow.RowIndex < dt.Rows.Count -1)

              {

                  //Remove the Selected Row data

                  dt.Rows.Remove(dt.Rows[rowID]);

              }

          }

            //Store the current data in ViewState for future reference

            ViewState["CurrentTable"] = dt;

            //Re bind the GridView for the updated data

            Gridview1.DataSource = dt;

            Gridview1.DataBind();

        }

 

        //Set Previous Data on Postbacks

        SetPreviousData();

    }

 

 

As you can see, the code above was pretty straight forward. The output would look something like these below:

 

On Initial Load:

 

 

Adding Rows to GridView

 

 

After Removing a Row in a GridView

 

 

That’s it! Hope you will find this example useful!

 

Technorati Tags: ,,
Posted on Sunday, August 9, 2009 6:47 PM ASP.NET , C# , GridView | Back to top


Comments on this post: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Thanks so much for your effort and consideration
^_^
Left by Abbas on Aug 09, 2009 11:14 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Dear Viz, I've make simple change on ur code, in RowCreated instead of make (if (e.row.rowindex==dt.rows.count-1)) i but +1 which allwo to me add delete function to the empty rows which is newly added, ok when i want to make delete to the new row it's delete the new row and upper one, like row 4 and add new row 5, it's delete 5 and 4
is there solution for that , like i've add new row and doesn't want anymore so i want to delete
I hope u take in ur consideration
best regards..

Left by Abbas on Aug 10, 2009 8:33 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Dear Viz, We can let him count to it's 1 then stop deleting,
in this scoop we asure that there's one row is not deleted.

Left by Abbas on Aug 10, 2009 10:59 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Hi Vinz,
I have followed your all posts regarding adding/removing dynamic rows with textbox/dropdown.
I must say its wonderful, god bless you.
I have one requirement with dropdowns in this context.
In my case I have 5 textboxes and 2 dropdowns.
Dropdown are dependent on each other.
2nd dropdown value populates on selection of first dropown.
3 textbox among 5 gets value on selection od 2nd dropdown.
How can I achive this functionality? I should retain the values of previos rows as well like you did in your previous posts.

At last i need to save all the rows to database.

I need to save more than 100s records. Can we have paging in this context?

Eagerly waiting for your reply.

Thanks & Regards
Left by Bijaya on Aug 16, 2009 6:02 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
I want add and delete row in gridview by javascript .
Left by puneet sharma on Aug 17, 2009 11:06 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
but how to retrieve value of each row text box ????
Left by munir on Aug 20, 2009 5:13 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Is there a download link for this code? I've tried copying and pasting this code into a website/project and when I click "Remove", it's removing the row below the "Remove" linkbutton, and not the row the that the linkbutton is currently residing in.
Left by Dirk on Sep 02, 2009 11:51 AM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
I have applied the updated source code and had a quick question. When I fill out the text boxes of the most recently added row, and then go and remove a previous row, the contents of the newest row are removed as well. Was there an update for this problem, or have I yet again made an error?

Thanks
Left by Dirk on Sep 16, 2009 8:25 AM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
If, for example, you have:

1 2 3 Remove
4 5 6 Remove
7 8 9

and you remove the first row, the page refreshes as:

4 5 6 Remove

And the row with 7 8 9 is also removed.
Left by Dirk on Sep 17, 2009 4:10 AM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
i have tried this code but i face problem that there is textbox in 1st row is ok bt when i click on add new row then that id not adding new row to the next line.Please Help me
Left by khyati on Sep 30, 2009 11:04 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
ok but i don't find my currect anser. My qution is how to add texbox value in datagridview and then update my sql table though datagridview.
Left by Nishant on Nov 24, 2009 11:02 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Its based on Index value it is deleting but not which we select
Left by Raj on Feb 04, 2010 6:12 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Delete funtionality is not working.Please let me know if there is any fix for the same
Left by deepa on Feb 23, 2010 2:44 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
hi ur article is really good....
can u plz tell me if i want to read the values from the textboxes...
i'm able to see only on row.....is the reason behind this is that we r adding the
textboxes virtually ,so we r not able to see the rest of the rows???
Left by Mamta on Mar 02, 2010 3:42 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
If, for example, you have:

1 2 3 Remove
4 5 6 Remove
7 8 9

and you remove the first row, the page refreshes as:

4 5 6 Remove

And the row with 7 8 9 is also removed.

i want solution for this problem..
Left by priya on Mar 22, 2010 12:25 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
HI,
Thanks for your effrot!
I've used your gridview but i couldnt see columns on aspx page.Also there is a button(ButtonAdd) with OnClick event, Can you please let me know how to show more text boxes when Button is clicked?
There is no event for button add on this page. can you please let me know how to bind the datagrid and populate it ??
awaiting your response
Thanks,
Pavan
Left by Pavan on Mar 23, 2010 8:29 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Hi,

I have a question: Suppose I have 2 text boxes. One consists of the number of checkpoints and another consists of the number of cars. Now, if a user enters the value 5 for number of checkpoints and value 5 for number of cars, i want a gridview that will dynamically display 5 coumns and 5 rows for the values enterd by the user. No database is used.
Left by Amit Mukherjee on Mar 28, 2010 8:05 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
thanks for the code
but if i use it,with small changes
if i enter four columns all with values
and i want to remove second column,
the second column and forth column are deleted
i.e while removing last column values are also deleted.
please check ,its so urgent
thanks in advance
Left by sudhee on May 18, 2010 6:36 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Thanks a lot Good work
Left by prakash on Jul 14, 2010 7:37 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Hi there, I found your blog via Google while searching and your post looks very interesting for me
Left by toplum on Jul 29, 2010 7:23 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
iTS A WONDERFUL POST!.i WAS LOOKING FOR THIS SINCE LONG AND THIS IS SIMPLE YET AMAZING!!gOD BLESS YOU.
Left by sOWMYA on Sep 17, 2010 5:19 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Thanks... Very Useful
Left by Salvio on Oct 07, 2010 3:13 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
If, for example, you have:

1 2 3 Remove
4 5 6 Remove
7 8 9

and you remove the first row, the page refreshes as:

4 5 6 Remove

And the row with 7 8 9 is also removed. Can you please post solution for this?
Left by asp.net_guy on Jul 26, 2011 5:40 AM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
@asp.net_guy,

Please check this post to resolve your issue.

http://geekswithblogs.net/dotNETvinz/archive/2009/08/12/updated-adding-dynamic-rows-in-asp.net-gridview-control-with-textboxes-again.aspx
Left by Vinz on Jul 26, 2011 5:46 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Hi,

I am using same concept to add new row to gridview. I want to load this same gridview with data from the database and and update the rows in the gridview.. How can i do it.. at click event of edit button i need to load the gridview which by default has only one blank row.. Based on the no of rows in the dataset i need to have those many rows in the gridview
Left by Suchitra on Dec 01, 2011 6:43 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
to visible remove button on page load
- turn visible true in Gridview1_RowCreated(..,..) function

to remove current row
-on link_button_click(..,..) function
- remove +1
-eg:
int rowID = gvRow.RowIndex; // change from gvRow.RowIndex +1
Left by xhah730 on Feb 09, 2012 4:30 AM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
I am realy looking for this artical.please can u describe how to save this data
Left by Sukanta Saha on Mar 10, 2012 3:55 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
This is very useful, I want add Combobox with Gridview, I tried your coding, that is working. But When I selected the Gridview combobox, the Gridview textbox value will be changed. So I am using selectedindexchanged event, But the combobox is refresh every time, all other fields are displayed correctly, but the combobox is displays with default value. Please give more for Grid view Dropdown list with selected index changed event
Left by usha on May 15, 2012 7:07 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Thank brothor.
I want to make a gridview where the gridview having a dropdown list and some column like label and tex field. now i wanted to change the column and text field value after selecting from dropdown list.

please provide some example code for me.
Left by Mustafa Kamal Sohag on Jun 20, 2012 12:19 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Hi,
Thank u so much..your article helps me a lot..
Left by vipin on Aug 01, 2012 4:10 PM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
hi,

how about i want 12 rows at the first time load page.then user can add 1 new row after that??i tried your tutorial but it failed at the set previous data function.all the entered data (12rows) is gone!can you help me?i already follow your code i dont want to give up and change the other way.
Left by musiw on Dec 06, 2012 9:56 AM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
Hi,
Can we use this MVP .. how can i use..
i have two data field on two different table.
i want load drop down dynamically while i am clicking newRow button..
Left by RAFIK on Jan 25, 2013 2:20 AM

# re: Adding Dynamic Rows in ASP.NET GridView Control with TextBoxes and with Delete functionality
Requesting Gravatar...
where is the coding for add button event
Left by uddhalakmishra on Feb 14, 2013 7:53 PM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net | Join free