Page 1 of 1

Insert Data using GridView FooterRow

#1 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 445
  • View blog
  • Posts: 1,501
  • Joined: 28-April 09

Posted 15 March 2011 - 09:05 PM

One of the more popular controls that come with ASP.Net is the GridView control. This control is great for displaying data from a database as well as editing and deleting that same data. One of the shortfalls of the GridView, however, is its lack of support for inserting new data into the database. The goal of this tutorial is to show you how to implement an insert row directly in the GridView's footer row. This tutorial will use a SqlDataSource as the datasource for the GridView.

The first thing we need to do after creating our project (Creating Your First ASP.Net Web Application) is to drag a GridView control from the ToolBox onto the .aspx page. This can be done in either design mode or source mode. For the purpose of this tutorial I'm going to assume you know how to do the initial set up of the GridView control with a SqlDataSource (If not, this page has a few examples towards the bottom). When setting up your SqlDataSource be sure to click the "Advanced" button and check the box for automatically generating insert, edit and delete methods. I am going to enable the Edit and Delete Buttons as that will allow me to use that same column for the Insert button in the footer.

At this point your code should looking similar to this:

Spoiler


As you can see all of the columns were generated as BoundField controls. Howerver, we are going to have to convert these into template fields so we have access to the FooterTemplate. The easiest way to do this is to click on the smart tag (the small box with an arrow in it that appears to the upper right of the gridview), then select "Edit columns...". The smart tag is available when in Design Mode but not in Source Mode. In the selected fields portion on the lower left of the wizard that pops up just select a column then click on the "Convert This Field Into A Template Field" link that is under the Properties window. Repeat this for each of the columns including the CommandField. After completing this step your GridView should now look more like this:

Spoiler


Now that we are using TemplateFields for each of the columns we also have access to the FooterTemplate for each of the columns. One way to edit the FooterTemplate is to once again click on the smart tag and select "Edit Templates". Then just select the FooterTemplate for each column and insert a TextBox, except the first one which will need a HyperLink control instead. You could also just manually add the FooterTemplate and its controls to the GridView by hand. I like to rename the TextBoxes to something that will let me know which column they are going to be inserting data into as it helps keep me from using the wrong textbox once it's time to start working on the codebehind. In the HyperLink control we added for the first column I'm going to set its CommandName property to "Insert", then in the GridView control we're going to make use of the OnRowCommand event. We'll also need to set the ShowFooter property to true. So now my GridView looks like this and hopefully yours should be similar:

Spoiler


Now all that's left is to handle the actual code to insert the data into the database so let's switch over to our .cs file and find the OnRowCommand event we created for the GridView. The first thing to do in this method is to check which Command is being used, since we only want our code to execute on the "Insert" command. To do this we check the value of the RowCommandEventArgs CommandName property. The next thing we'll do is create our insert parameters and finally we'll execute the insert command. Now that all sounds good, but let's go ahead and see what all of that looks like in code.

Spoiler


That's it, we now have a gridview that allows you to also insert data. The only real downside to this method is if you happen to have no data available in the database. This is because the gridview will display the EmptyData Template and the Footer Template will not be displayed (sounds like a good topic for another tutorial). You'll also want to implement any validation/error checking that may be necessary depending on your database setup and/or project requirements.

This post has been edited by Nakor: 29 March 2011 - 11:12 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Insert Data using GridView FooterRow

#2 Luiz Machado  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 03-January 12

Posted 03 January 2012 - 03:29 PM

Hi Nakor,
First of all, I wish you a great new year. I've just posted a doubt / error that I'm facing during the routine for inserting data via gridview. I tried to follow your example but persists a error message ".. expect parameters which was not supplied". It happens when the comand sqldatasource.insert() is executed. I thanks in advance if you could help me with this.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1