This tutorial will show you how to use the built-in Select Row function of the GridView to move that row to a new DataTable. C# version.

In this tutorial, we will be looking at how we can use the GridView Select method to move a row to a new DataTable. We will use a GridView to display data from a SQL Server Database, and then use LinkButtons in the TemplateField of the GridView to allow the user to select each row. Upon selection, we will extract the columns from the selected row and move them to a new DataTable.

The first thing we will do in this example is create and set up our database. Once we have a new Web Application project in Visual Studio .NET 2008, right-click the App_Data folder in the Solution Explorer and choose Add New Item.. SQL Server Database. We will use the built-in Server Explorer to create our database. In the Server Explorer window, right-click the Tables folder and choose to Add New Table. For this example, we will create three columns – ID, Name, and Age – of which their data types will be bigint, varchar(25) and int respectively.

Once we have created these columns, we can then Save and close the design view. Then right-click the Table we just created in Server Explorer and choose to Show Table Data. Let’s go ahead and add some sample data to test.

Once you’ve got a few records close the table, then goto Default.aspx where we will begin building our web form. From the toolbox, go ahead and add a GridView, SqlDataSource, a Literal and a DataGrid.

Once you’ve got all of your controls on the page, switch to Design view and click on the Smart Tag of the SqlDataSource. This will allow us to Configure it. On the first screen, select the database name from the drop-down and follow the on-screen instructions to select all data from the table we created. Once finished, we can delete the SqlDataSource. We did this to create the Connection String in the Web.config, which will look something like this:

We will be using this Connection String to connect to our database by creating a data access class. But first, our ASPX should look something like this:

Notice we set AutoGenerateColumns to false on both the GridView and the DataGrid, because we are setting our own between the Column tags. We also give the LinkButton the CommandName of select, which is the built-in function of the GridView, which will select the row. We will use the Literal control to display a title for the DataGrid when a row is selected.

The next thing to do is create our Stored Procedure to retrieve all data from the table in our database. Back in Server Explorer, right-click the Stored Procedures folder and then choose Add New Stored Procedure. We will be creating a very simple Stored Procedure to retrieve all data from Table1:

Once we hit the Save button, the CREATE keyword will change to ALTER, and we can then close the Stored Procedure.
Now we have the front-end in place, and the Stored Procedure, let’s go ahead and add our data access class. Right-click on your project in Solution Explorer and Add ASP.NET Folder App_Code if you don’t already have one. Then right-click the App_Code folder and choose Add New Item.. Class. In this class we will create a method to retrieve data from our database, but the first thing we need to do is add the following references:

Here we create a method that will use the Stored Procedure we just created to retrieve the contents of Table1 and return it in a DataTable. Notice we are referencing the ConnectionString in the Web.config using the WebConfig Manager, and we also specify the type of Command when using a Stored Procedure.
Finally, we wrap the class with a namespace, which will look something like this:

Now going back to our ASPX page, let’s add methods to the OnSelectedIndexChanged and OnRowDataBound events of the GridView. This will allow us to assign the OnClick event to the LinkButtons to select the GridView Row, and also assign the GridViewRow to a new DataTable. To do this, we can select the GridView in Design view, then click on the Events button in the Properties Window and double-click the RowDataBound and SelectedIndexChanged events to create handlers in the code-behind. The GridView will then look something like this:

Finally, we add code to the event handlers we just created to add our functionality.
On SelectedIndexChanged, we want the selected row to be added to a datarow, and then added to a DataTable. We do this using a for loop to iterate through each column and then add to the DataRow. Finally, we add the DataRow to a DataTable and set that as the DataSource of the DataGrid to display to the user.

Download Source Files