ASP.NET Popup Dialog - Confirm Delete - Javascript - DataGrid Example

Awhile back I wrote a post called ASP.NET Popup Dialog - Confirm Delete - Javascript.

The example was pretty simple, but it did not cover how to handle the situation in the case of a datagrid, and I have had numerous requests for an example using a datagrid. Personally, I don't use DataGrids that much, because I prefer the unlimited flexibility I get from a DataReader or DataList, but below is a very simple and quick example I created this morning to help those who sent me a request.

I used in-line coding (by hand - no intellisense ;) for the example to make it simple to follow and cut-and-paste, but in my daily work I always use code-behind (Note that in-line coding may make a comback in ASP.NET 2.0 - good or bad). The example just binds 3 contacts via an ArrayList to a datagrid. Although the datagrid has a “ButtonColumn“ that you could use for firing the “delete“ command, I like using images, so I went ahead and just made a template column with an ImageButton.

The main pieces here are the ItemCreated and ItemCommand events fired by the DataGrid. When the DataGrid is creating the items, we find the Delete Button (btnDelete) in the item and attach the onclick event to it to invoke the popup dialog. When an event is fired within the DataGrid (clicking of the btnDelete Image Button), the ItemCommand event fires (only if you choose OK from the confirm delete dialog) and calls the DeleteContact_Click handler which does a real quick and dirty delete of the contact using the ItemIndex (note this is a hack just to show you how it works).

I tested the code and it works fine. Here is the online example. Again, this is only 1 way you could pull this off and I did this quick and dirty just to show an example similar to the previous article.  I hope it helps those who sent me requests...


<%@ Page Language="C#" EnableViewState="true" %>

<script runat="server">

 

[Serializable]

private class Contact

{

   private int m_id;

   private string m_name;

   private string m_phone;

   private string m_address;

   private string m_city;

  

   public int ID { get { return m_id; } }

   public string Name { get { return m_name; } }

   public string Phone { get { return m_phone; } }

   public string Address { get { return m_address; } }

   public string City { get { return m_city; } }

  

   public Contact(int id, string name, string phone, string address, string city)

   {

      m_id = id;

      m_name = name;

              m_phone = phone;

              m_address = address;

              m_city = city;

   }

}

 

private ArrayList _contacts = new ArrayList();

    

void Page_Init(object sender, System.EventArgs e)

{

   MyContacts.ItemCreated += new DataGridItemEventHandler(this.Item_Created);

   MyContacts.ItemCommand += new DataGridCommandEventHandler(this.DeleteContact_Click);

}

 

void Page_Load(object sender, System.EventArgs e)

{

   if (!IsPostBack)

   {

      LoadContacts();

      BindContacts();

   }

}

 

void LoadContacts()

{

   _contacts.Add(new Contact(1, "John Smith", "1234 Breezeway Lane", "(123) 456-7890", "SmithTown"));

   _contacts.Add(new Contact(2, "Jane Doe", "45 Windy Road Blvd.", "(983) 276-9743", "DoeTown"));

   _contacts.Add(new Contact(3, "Stan Jackson", "1718 Miracle Mile", "(567) 458-8743", "JacksonTown"));

   ViewState["Contacts"] = _contacts;

}

 

void BindContacts()

{

   MyContacts.DataSource = _contacts;

   MyContacts.DataBind();

}

 

void Item_Created(Object Sender, DataGridItemEventArgs e)

{

   if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

   {

       ImageButton _myButton = (ImageButton)e.Item.FindControl("btnDelete");

       _myButton.Attributes.Add("onclick", "return confirm_delete();");

   }

}

 

void DeleteContact_Click(object sender, DataGridCommandEventArgs e)

{

            _contacts = (ArrayList)ViewState["Contacts"];

            _contacts.RemoveAt(e.Item.ItemIndex);

            ViewState["Contacts"] = _contacts;

            BindContacts();

}

</script>

<html>

<head>

<title>ASP.NET DataGrid Confirm Delete - JavaScript</title>

<script type="text/javascript">

function confirm_delete()

{

  if (confirm("Are you sure you want to delete the contact?")==true)

    return true;

  else

    return false;

}

</script>

</head>

<body>

<form runat="server">

<asp:DataGrid id="MyContacts" AutoGenerateColumns="false" runat="server">

<columns>

<asp:TemplateColumn>

  <itemtemplate>

    <asp:ImageButton ID="btnDelete" ImageUrl="btnDelete.jpg" runat="server" />

  </itemtemplate>

</asp:TemplateColumn>

<asp:BoundColumn DataField="Name" HeaderText="Name" runat="server" />

<asp:BoundColumn DataField="Phone" HeaderText="Phone Number" runat="server" />

<asp:BoundColumn DataField="Address" HeaderText="Address" runat="server" />

<asp:BoundColumn DataField="City" HeaderText="City" runat="server" />

</columns>

</asp:DataGrid>

</form>

</body>

</html>

posted on Thursday, April 01, 2004 11:53 AM

Main

News

Green Tea

.NET Development

Enterprise Library

Patterns & Practices