Introduction

This article talks about a small project that presents the idea of having a GridView which facilitates the addition and removal of rows dynamically at run time.

Background

There are many times when we need the user to enter some data but we are not sure about the amount of data. For instance, we need to have an application that takes the student details from a faculty member (possibility at the time of admission). We can design this page in two ways: either we take data of one student at a time or we allow the user to enter data of multiple users in a single go. Also we can let the user choose the number of records he want to enter.

Now to accomplish this, we design the page in such a way that the user will have the possibility of adding new rows dynamically and then entering the data. How we can do that will be the focus of the rest of the article.

Using the code

Let us first design the layout for taking a single record from the user.

This design has been achieved by having the template fields in the Gridview in the following manner.

The basic idea here is that from the code-behind if we dynamically change the DataSource of this GridView the GridView will change accordingly. So what we will do is that we will have a single row exposed as default and then keep adding rows in the GridView whenever the user requests to add a new row. For that we will simply keep adding empty data items to the GridView data source resulting in the GridView getting changed dynamically.

The important thing to note in the above code is the use of the view state. The ViewState has been kept to facilitate the dynamic addition and deletion of rows functionality. Since we need to preserve the data of rows other than the row being added or deleted we need some place to keep this data. We choose ViewState for that.

Now whenever the user chooses to add a new row we need to do two things: first we need to add the new row in the grid and secondly we need to set the data entered in the already added rows.

Now when we run the application, we can see that we can safely add and remove rows dynamically to this GridView.

Note: The sample application is in full working condition. Running the application and debugging it (stepping through it is highly advisable to understand the logic fully and get the gist of what is happening inside).

Point of Interest

This small exercise started as a curiosity to play with ViewState and GridView but ended up as a useful component/logic that can be used in some real scenarios. I hope you will find this useful (although most experienced programmers already might know this stuff, it can still be used by new programmers).

History

29 September 2012: First version.

03 October 2012: Following has been implemented:

Validation for required fields added.

Enter key will now "Add New Row" with newly added row all set to accept data.

Share

About the Author

I am a Software Engineer from Bhopal. I started my Career from Programming in ASP and now working as a Web Developer in ASP.Net (C#). I Love coding and always ready to gain new thing and always been towards Microsoft Technologies. Apart from coding my other hobbies are traveling, Internet Surfing, spending time with family and hang out with friends.

Then I recieve message: Can not convert type DBNull to type Boolean. , when binding. Have tried to set dtCurrentTable.Rows(i - 1)("IsActive") manually to false OR "false" OR 0 OR "0" - Always the same message.

Dear sir I used your application . Very Nice application . But can you please suggest me the solution for adding the perticular column in the gridview. Such as adding the age in your applicationHow it can be achieved ?

Hi Ashish, I followed your tutorial and other similar article to make a dynamic GridView as you have described here. The only difference is that I have a list of items which are binded programmatically to the DropDownList rather than statically inserted, as in your case. Can you please have a look to this post in stackoverflow and let me know what went wrong there? I will be very grateful to you.Satyam

It's been ages, C# has changed a lot since then and I haven't downloaded web support to my VS express, so I don't know and I will have to go completely from memory.

With a quick look, to me it looks like you are binding a List<> to the drop list. AFAIK you will have to create a new List and bind to that instead if you want to continue using List<> as your dynamically changing binding source. It would be so much easier to put your data in a data table, bind a data view to the table and bind the view to the drop down source. You can then either change the search criteria of the view or change the data in the table to match or miss the search criteria the view is using to determine what the drop-down shows.

I tried other way; i binded the listview with an objectdasource and tested it accordingly, but it didn't help either. Nevertheless, I have updated the code in the stackoverflow site. I have provided the dummy implementation of the Item and UnitItem entities so that it can be tested without the actual entity list. Please have a look and help with your knowledge!

Thank you for the code it has been very useful. However, I am having a problem in SetPreviousData() when deleting a row. I receive null reference exception. I have tried everything I know to resolve it but nothing is working without messing up something else. Can you help me?

FYI, that should be "You're welcome". "your welcome" would be a sound alike phrase that is meaningless because no-one owns "welcome" but misused so often, I wouldn't have said anything.

"your's" isn't an ownership contraction nor any other contraction, so it isn't a word in the English language. (Unless general misuse, makes it a word. "selfie" didn't, until recently, exist and I wouldn't have minded if it had never become a word.)

"You're” is a contraction of “You are”.

Maybe, I'm jealous, I was so abused about my lack of English knowledge when I was a teenager. (Teachers can be so mean!)

Thanks sharki, I have done for my requirement(insert, update and delete). but it will take time to publish bcoz of busy days. Although you try and where ever you will get stuck I will help you taking time from my busy schedule.