Geeks With Blogs

News

Microsoft MVP


Moderator at CodeASP.NET


Quiz Master




free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

There are times that we need to prompt the users when doing certain actions on the page. One practical example is to confirm the user when deleting a certain record just like what I have demonstrated awhile back about Displaying a Confirmation Message on GridView Deleting. If you noticed on that demo I simply use plain JavaScript to display the confirmation message. In this post I’m going to demonstrate how to use the ConfirmBox control in delete scenario.

Note that just for the simplicity of this demo I’m just going to create a dummy data as the DataSource for the GridView. If you are working with live data from database then you may want to check these previous articles about:

To get started let’s go ahead and set up the UI (HTML mark-up). For simplicity I set up the mark-up like this:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master"
                  AutoEventWireup="true" 
                  CodeBehind="GridView.aspx.cs"
                  Inherits="WebAppDemo.GridView" %>
<%@ Register Assembly="AjaxControlToolkit" 
             Namespace="AjaxControlToolkit" 
             TagPrefix="asp" %>
<%@ Register assembly="ProudMonkey.Common.Controls"
             namespace="ProudMonkey.Common.Controls" 
             tagprefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" >
    </asp:ToolkitScriptManager>
    <cc1:ConfirmBox ID="ConfirmBox1" runat="server" />
    <asp:Label ID="lblMessageDisplay" runat="server" ForeColor="Green" />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" >
        <Columns>
                <asp:BoundField DataField="ID" />
                <asp:BoundField DataField="ProductName" HeaderText="Product Name" />
                <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox ID="txtPrice" runat="server" Text='<%# Eval("Price") %>' />
                </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox ID="txtAmount" runat="server" Text='<%# Eval("Amount") %>' />
                </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                <ItemTemplate>
                    <asp:Button ID="btnDelete" runat="server" 
                                Text="Delete" 
                                OnClientClick="ShowConfirmBox(this,'Are you sure?');return false;" 
                                onclick="BtnDelete_Click" /> 
                </ItemTemplate>
                </asp:TemplateField>
        </Columns>
    </asp:GridView>
</asp:Content>

 

Obviously the page above make use of MasterPage and basically contains the ToolScriptManager, ConfirmBox, Label and GridView. The ToolScriptManager is necessary since the ConfirmBox control uses the ASP.NET Ajax Modal popup control. The Label is just for displaying the message and the GridView is for displaying the data.

Here’s the whole code behind part of the demo:

using System;
using System.Web.UI.WebControls;
using System.Data;

namespace WebAppDemo {
    public partial class GridView : System.Web.UI.Page {

        private DataTable GetSampleData() {

            //NOTE: THIS IS JUST FOR DEMO
            //If you are working with database
            //You can query your actual data and fill it to the DataTable
            DataTable dt = new DataTable();
            DataRow dr = null;

            //Create DataTable columns
            dt.Columns.Add(new DataColumn("ID", typeof(string)));
            dt.Columns.Add(new DataColumn("ProductName", typeof(string)));
            dt.Columns.Add(new DataColumn("Price", typeof(string)));
            dt.Columns.Add(new DataColumn("Amount", typeof(string)));

            //Create Row for each columns
            dr = dt.NewRow();
            dr["ID"] = 1;
            dr["ProductName"] = "Proudct 1";
            dr["Price"] = "100";
            dr["Amount"] = "10";

            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 2;
            dr["ProductName"] = "Product 2";
            dr["Price"] = "200";
            dr["Amount"] = "2";

            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["ID"] = 3;
            dr["ProductName"] = "Product 3";
            dr["Price"] = "50";
            dr["Amount"] = "10";

            dt.Rows.Add(dr);
            return dt;
        }
        

        private void BindGrid(DataTable source) {
            GridView1.DataSource = source;
            GridView1.DataBind();
        }

        private DataTable UpdateTable(DataTable source, int rowIndex) {
            for (int i = 0; i < GridView1.Rows.Count; i++) {
                TextBox tb1 = (TextBox)GridView1.Rows[i].Cells[2].FindControl("txtPrice");
                TextBox tb2 = (TextBox)GridView1.Rows[i].Cells[3].FindControl("txtAmount");
                source.Rows[i]["Price"] = tb1.Text;
                source.Rows[i]["Amount"] = tb2.Text;
            }
            source.Rows.RemoveAt(rowIndex);
            return source;
        }

        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                ViewState["COPY"] = GetSampleData();
                BindGrid(GetSampleData());
            }
        }

        protected void BtnDelete_Click(object sender, EventArgs e) {
            if (ViewState["COPY"] != null) {
                DataTable dt = (DataTable)ViewState["COPY"];
                Button btnDelete = (Button)sender;
                GridViewRow gvRow = (GridViewRow)btnDelete.NamingContainer;
                BindGrid(UpdateTable(dt, gvRow.RowIndex));

                lblMessageDisplay.Text = "Record deleted!";
            }
        }
    }
}

 

Since I didn’t use database for storing the data you may notice that I use ViewState to store the data across postbacks as you see in Page_Load event. The UpdateTable() method is responsible for handling the deletion. You may also notice that before the row is being removed it updates first the data, this is to ensure that the data on the TextBox are retained on postbacks.

Here’s the page output when you run the code.

Initial load

pm1

After clicking the Delete button

pm2

After clicking the YES button

pm3 

 

Enjoy!!!

Technorati Tags: ,
Posted on Wednesday, February 1, 2012 12:42 AM ASP.NET , ProudMonkey Controls | Back to top


Comments on this post: Using ProudMonkey ConfirmBox Control in GridView

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net | Join free