ASP.NET Tips: Menambahkan Konfirmasi Delete Pada GridView

Tips ini dibuat berdasarkan request dari Intan purnama sari yang bertanya bagaimana cara menambahkan Konfirmasi ketika tombol delete pada GridView dipilih.

Untuk menambahkan konfirmasi delete pada GridView anda dapat membuat custom class yang mengoverride ButtonField yang ada pada GridView.

  1. Tambahkan Class dengan nama DeleteButton.cs pada web aplikasi anda. Buat class ini dalam namespace MyControl. tulis kode berikut:
   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Web;

   5: using System.Web.UI.WebControls;

   6:  

   7: /// <summary>

   8: /// Summary description for DeleteButton

   9: /// </summary>

  10:  

  11: namespace MyControl

  12: {

  13:     public class DeleteButton : ButtonField

  14:     {

  15:         private string confirmText = "Hapus Record Ini ?";

  16:         public string ConfirmText

  17:         {

  18:             get { return confirmText; }

  19:             set { confirmText = value; }

  20:         }

  21:  

  22:         public DeleteButton()

  23:         {

  24:             this.CommandName = "Delete";

  25:             this.Text = "Delete";

  26:         }

  27:  

  28:         public override void InitializeCell(DataControlFieldCell cell, DataControlCellType cellType, DataControlRowState rowState, int rowIndex)

  29:         {

  30:             base.InitializeCell(cell, cellType, rowState, rowIndex);

  31:             if (cellType == DataControlCellType.DataCell)

  32:             {

  33:                 WebControl button = (WebControl)cell.Controls[0];

  34:                 button.Attributes["onclick"] = string.Format("return confirm('{0}')", confirmText);

  35:             }

  36:         }

  37:  

  38:     }

  39: }

2.Kemudian anda dapat menambahkan custom control yang sudah dibuat kedalam GridView. Buat Web Form dengan nama KonfirmasiDelete.aspx. tulis kode berikut:

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="KonfirmasiDelete.aspx.cs" Inherits="KonfirmasiDelete" %>

   2: <%@ Register TagPrefix="custom" Namespace="MyControl" %>

   3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   4:  

   5: <html xmlns="http://www.w3.org/1999/xhtml">

   6: <head runat="server">

   7:     <title>Konfirmasi Delete</title>

   8: </head>

   9: <body>

  10:     <form id="form1" runat="server">

  11:     <div>

  12:         <asp:LinqDataSource ID="ldsKategori" runat="server" 

  13:             ContextTypeName="MhsDataClassesDataContext" EnableDelete="True" 

  14:             EnableInsert="True" EnableUpdate="True" EntityTypeName="" TableName="Kategoris">

  15:         </asp:LinqDataSource>

  16:         <asp:GridView ID="gvKategori" runat="server" AutoGenerateColumns="False" 

  17:             DataKeyNames="id_kat" DataSourceID="ldsKategori">

  18:             <Columns>

  19:                

  20:                 <asp:BoundField DataField="id_kat" HeaderText="id_kat" InsertVisible="False" 

  21:                     ReadOnly="True" SortExpression="id_kat" />

  22:                 <asp:BoundField DataField="nama_kat" HeaderText="nama_kat" 

  23:                     SortExpression="nama_kat" />

  24:                  <custom:DeleteButton ConfirmText="Apakah anda yakin akan mendelete record ini?" />

  25:             </Columns>

  26:         </asp:GridView>

  27:     </div>

  28:     </form>

  29: </body>

  30: </html>

3.Jalankan aplikasi diatas, maka ketika anda mendelete data akan muncul konfirmasi delete.

image

Anda dapat mendownload sample code diatas, download disini

One thought on “ASP.NET Tips: Menambahkan Konfirmasi Delete Pada GridView

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s