Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Deleting data from gridview using sqldatasource control - Part 13

Suggested Videos 
Part 10 - Design time and runtime formatting of gridview
Part 11 - Using stored procedures with sqldatasource control
Part 12 - Using stored procedures with objectdatasource control



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.

3 comments:

  1. when clicking the delete button.I got the Confirm dialog box.When choose ok or cancel
    the rows gets deleted.....Please kindly make a note of it...i am a beginner...

    ReplyDelete
  2. Hi Venkat. I used your tutorial "GridView insert update delete in asp.net - Part 23" to build my application and wanted to display a confirmation message when deleting data from gridview.

    In my application, I wanted to retain the Update button, so I replaced the line "Control control = e.Row.Cells[0].Controls[0];" with "Control control = e.Row.Cells[0].Controls[1];", since in this case I have two controls in the first cell, but when clicking on the Delete button, application deletes data, no message shows off, and the debugger shows me that control has "null" as a value.

    When writing Controls[0], application displays the confirmation messae when clicking the Update button.

    Could you please help me to understand what is wrong with Controls[1] ? Everything else works smoothly, it inserts and updates data perfectly. Thank you.

    ReplyDelete
  3. Hi Is it possible to put clientClick event on html(.aspx) page?

    ReplyDelete

It would be great if you can help share these free resources