ASP.NET GridView Tutorial - Deleting data from gridview using sqldatasource control

Deleting data from gridview using sqldatasource control

Link for csharp, asp.net, ado.net, dotnet basics and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for text version of this video
http://csharp-video-tutorials.blogspot.com/2013/02/deleting-data-from-gridview-using.html

In this video we will discuss about deleting data from gridview control using sqldatasource control.

We will be using tblEmployee table for this demo. Please use the SQL script below to create and populate this table.
Create Table tblEmployee
(
EmployeeId int Primary key identity,
Name nvarchar(50),
Gender nvarchar(10),
City nvarchar(50)
)

Insert into tblEmployee values(‘Mark’,’Male’,’London’)
Insert into tblEmployee values(‘John’,’Male’,’Chennai’)
Insert into tblEmployee values(‘Mary’,’Female’,’New York’)
Insert into tblEmployee values(‘Mike’,’Male’,’Sydeny’)
Insert into tblEmployee values(‘Pam’,’Female’,’Toronto’)
Insert into tblEmployee values(‘David’,’Male’,’Sydeny’)

Drag and drop sqldatasource control on WebForm1.aspx.

Configure “SqlDataSource1” control
1. Right click on “SqlDataSource1” control and select “Show Smart Tag”
2. Now click on “Configure Data Source” link
3. Select connection string, from the dropdownlist on “Choose your data connection” screen. You need to have a connection string specified in web.config file.
4. Click Next
5. On “Configure the Select Statement” screen, select “tblEmployee” table from dropdownlist.
6. Click on “Advanced” button
7. Select “Generate INSERT, UPDATE and DELETE statements” checkbox and click OK
8. Click Next and Finish

Now flip “WebForm1.aspx” to “HTML Source” mode. Notice that, the wizard has automatically generated INSERT, UPDATE and DELETE statements. Since, we only want to enable the gridview control to delete data, get rid of InsertCommand, InsertParameters, UpdateCommand, and UpdateParameters.

Drag and drop gridview control on WebForm1.aspx. Now let us associate “SqlDataSource1” control with “GridView1” control
1. Right click on “GridView1” control and select “Show Smart Tag”
2. Select “SqlDataSource1” from “Choose Data Source” dropdownlist
3. Select “Enable Deleting” checkbox. At this point “Delete” button should appear on the gridview control.

Run the application. Click “Delete” button. The row gets deleted without any confirmation. Since deleting data cannot be undone, it is better to show a confirmation, before we delete the row.

To show the confirmation, before a row is deleted, we need to associate javascript with the delete “LinkButton”. To do this
1. Right click on the gridview control and select “Properties”
2. In the “Properties” window click on events button
3. Double click on RowDataBound event. This should generate the event handler method in the code-behind file. Copy and paste the following code
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Control control = e.Row.Cells[0].Controls[0];
if (control is LinkButton)
{
((LinkButton)control).OnClientClick =
“return confirm(‘Are you sure you want to delete? This cannot be undone.’);”;
}

}
}

Run the application, and when you click the “Delete” button, we should get a confirmation dialog box. When you click OK the row will be deleted, and when you click “Cancel” nothing happens.