gridview row delete confirmation box

Reply

Member

505 Points

gridview row delete confirmation box

Jan 10, 2021 10:02 PM|anjaliagarwal5@yahoo.com|LINK

I need to show a delete conformation box on Gridview delete. with OnClientClick confirmation box, I am showing a simple Internet explore box for delete confirmation. Is it possible to show a fancy box for this. below is my JavaScript code that exists inside the gridview code:

OnClientClick="return DeleteItem();"

Below is my Gridview

<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5"  GridLines="None"  OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
                <Columns>
                    
                    <asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
                    <asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row"    />
<ItemTemplate>
                             <asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" OnClientClick="return DeleteItem();"  />    
</ItemTemplate>
                        </asp:TemplateField>
                </Columns>
</asp:GridView>

This is my Javascript function:

<script type="text/javascript">
    function DeleteItem() {
        if (confirm("Delete this Location?")) {
            return true;
        } else {
            return false;
        }
    }
</script>

above code is showing this confirmation window:

I want to show something like this:

any help will be apprecaited.

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview row delete confirmation box

Jan 10, 2021 10:55 PM|SurferOnWww|LINK

Does your project include the Bootstrap.css and Bootstrap.js? If so, consider to use the Modal of Bootstrap.js.

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview row delete confirmation box

Jan 10, 2021 11:23 PM|anjaliagarwal5@yahoo.com|LINK

Can I use JQuery Mobile Dialog, but not sure how can I sue it with onCLientClick

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview row delete confirmation box

Jan 10, 2021 11:41 PM|SurferOnWww|LINK

Please do not reply by asking question but answer to my question first.

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview row delete confirmation box

Jan 11, 2021 12:06 AM|anjaliagarwal5@yahoo.com|LINK

No, my project does not include bootstrap.js.

Reply

mgebhard

All-Star

52091 Points

23207 Posts

Re: gridview row delete confirmation box

Jan 11, 2021 12:11 AM|mgebhard|LINK

anjaliagarwal5@yahoo.com

Can I use JQuery Mobile Dialog, but not sure how can I sue it with onCLientClick

You can use whatever client side library you like. The key is understanding the confirm dialog stops JavaScript code execution while waiting for the user's selection. A JavaScript library, like the jQuery dialog, is asynchronous and requires coding and design. Typically a standard HTML button is used so the form does not post. If you use a link button then you also have to cancel the link button's default submit using JavaScript.

Anyway, the jQuery modal's button should submit the form. Since this Web Forms programming problem has been solved many many many times with tons and tons and tons of online examples and you have a lot of experience on the forums, I think you should try to write the code on your own.

If you run into trouble, then share code that any forum member can run to reproduce the issue. Explain the expected results and the actual results. Pretty standard stuff...

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview row delete confirmation box

Jan 11, 2021 12:56 AM|SurferOnWww|LINK

> Can I use JQuery Mobile Dialog, but not sure how can I sue it with onCLientClick

No, I do not think you can.

If you can you could use the ModalPopup for that purpose properly in the previous thread. Therefore, I suggest you stay in using the confirm method.

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview row delete confirmation box

Jan 11, 2021 12:58 AM|anjaliagarwal5@yahoo.com|LINK

you mentioned, I can use modalpop. I am not sure how I can do that. I am posting my question again. May be, someone else can help me with this:

I am trying to show a modalpop inside the gridview when the delete button is clicked. The gridview control is inside the .ascx page and I can show the modal pop up in the panel or outside the side panel or may be the modal pop up is showing but it is coming to the right side of the panel and I cannot see it. This is a very simple example that I created:

Below is the .ascx page code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GridViewUserControl.ascx.cs" Inherits="SidePanelGridViewTest.GridViewUserControl" %>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:IdDatabase %>" 
    SelectCommand="SELECT TOP 5 [CartID], [Item], [RequestedBy], [RequestedFor] FROM [ShopCart]">
</asp:SqlDataSource>
<asp:ScriptManager ID="scMan" runat="server"></asp:ScriptManager>
 <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
			<ContentTemplate>
				
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="CartID" DataSourceID="SqlDataSource1" OnRowDeleting="OnRowDeleting"  OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="ProductID" 
            InsertVisible="False" ReadOnly="True"  />
        <asp:BoundField DataField="RequestedBy" HeaderText="ProductName"
             />
     	 <asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row" >
						<ItemTemplate>
							 <asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"     ToolTip="Click To Delete" AlternateText="Click To delete" />                            
						  <asp:Panel ID="pnlPopUp" runat="server" Style="display: none; background-color:white" >
                                        <asp:Panel ID="pnlDragPopUp" runat="server" Style="cursor: move; background-color: #dddddd; border: solid 1px Gray; color: Black;width:500px">
                                            <div role="main" class="ui-content">
                                              <h3 class="ui-title">Are you sure you want to remove this item?</h3>
                                            </div>
                                        </asp:Panel>
                                        <div >
                                            <p style="display:flex;align-items:center;justify-content:space-between;width:220px;">
                                                <asp:Button   ID="OkButton" runat="server"  Text="Remove"  CommandName="delete" CommandArgument='<%#Eval("CartID") %>'/> &nbsp;
                                                <asp:Button ID="CancelButton"  runat="server" Text="Cancel" />
                                            </p>
                                        </div>
                                    </asp:Panel>


                                    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
                                        TargetControlID="imgbtnDelete"
                                        PopupControlID="pnlPopUp"
                                        BackgroundCssClass="modalBackground"
                                        CancelControlID="CancelButton"
                                        DropShadow="true"
                                        PopupDragHandleControlID="pnlDragPopUp" />
					  </ItemTemplate>
						</asp:TemplateField>
    </Columns>
</asp:GridView>
                </ContentTemplate></asp:UpdatePanel>

below is the code behind of .ascx page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace SidePanelGridViewTest
{
    public partial class GridViewUserControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void OnRowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            int index = Convert.ToInt32(e.RowIndex);


        }

        protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
        {
            string x = "Test";

        }
    }
}

I didn't put any code inside OnRowDeleting because I just want to see the postback and the postback is not occurring because of modalpopup.below is my .aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="SidePanelGridViewTest.WebForm1" %>
<%@ Register TagPrefix="uc" Src="~/GridViewUserControl.ascx" TagName="MyUserControl" %>
<!DOCTYPE html>
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<div class="ss-header-actions">
            <a href="#panel1" class="ss-header-actions-cart">
                <span class="ss-header-labels" id="ss-cart-label">shop Cart</span>
            </a>
            <div class="ss-clear"></div>
        </div>
         	 <form id="form1" runat="server">
     
        <div data-role="panel" id="panel1" data-display="overlay" data-position="right" style="width:400px">
            <h3>This is a Test</h3>
            <uc:MyUserControl runat="server"></uc:MyUserControl>
        </div>
      <br /><br /><br /><br />
        <div>
            This is a Test:  <asp:TextBox ID="txtTest" runat="server"></asp:TextBox>
        </div>
    </form></div></div>

There is no code behind the .aspx page.</div>

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview row delete confirmation box

Jan 11, 2021 05:18 AM|SurferOnWww|LINK

> you mentioned, I can use modalpop.

It is misunderstanding.

I meant that because you could not achieve it (i.e., show a dialog for confirmation) by using the ModalPopup use of the jQuery Mobile Dialog instead will result in the same.

Sorry if my previous replay caused any confusion.

Reply

XuDong Peng

Participant

1780 Points

553 Posts

Re: gridview row delete confirmation box

Jan 11, 2021 07:08 AM|XuDong Peng|LINK

Hi anjaliagarwal5,

According to the code you provided, I tried to reproduce your issue and get the same result.

If you want to display this modal popup where you can see it, have you tried to set position style?

A simple test:

<asp:Panel ID="pnlPopUp" runat="server" Style="display: none; background-color: white;left:-260%;" >
                            <asp:Panel ID="pnlDragPopUp" runat="server" Style="cursor: move; background-color: #dddddd; border: solid 1px Gray; color: Black; width: 500px">
                                <div role="main" class="ui-content">
                                    <h3 class="ui-title">Are you sure you want to remove this item?</h3>
                                </div>
                            </asp:Panel>
                            <div>
                                <p style="display: flex; align-items: center; justify-content: space-between; width: 220px;">
                                    <asp:Button ID="OkButton" runat="server" Text="Remove" CommandName="delete" CommandArgument='<%#Eval("id") %>' />
                                    &nbsp;
                                    <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
                                </p>
                            </div>
                        </asp:Panel>

Result:

Hope this can help.

Best regards.

Xudong Peng

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview row delete confirmation box

Jan 11, 2021 05:11 PM|anjaliagarwal5@yahoo.com|LINK

Hi Xudong Peng,

I can see the pop up box, but the issue is when I click on any button on the modal pop up, the side panel closes and the postback does not occur. Instead of modal pop, simple javascript conformation works and causes postback too:

<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5"  GridLines="None"  OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
                <Columns>
                    
                    <asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
                    <asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row"    />
<ItemTemplate>
                             <asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" OnClientClick="return DeleteItem();"  />    
</ItemTemplate>
                        </asp:TemplateField>
                </Columns>
</asp:GridView>

This is my Javascript function:

<script type="text/javascript">
    function DeleteItem() {
        if (confirm("Delete this Location?")) {
            return true;
        } else {
            return false;
        }
    }
</script>

The only issue with this is, the pop up window looks kind of ugly. I want the look similar to the modal pop up window. Below is how the modal pop up window looks like. Can you suggest something so that the look of Javascript window is similar to modalpopup window.

Reply

XuDong Peng

Participant

1780 Points

553 Posts

Re: gridview row delete confirmation box

Jan 12, 2021 09:53 AM|XuDong Peng|LINK

Hi anjaliagarwal5,

For the first question, jquery mobile overlay panel will automatically close when the mouse click position is not in the panel by default.

You need to set it to be closed manually.

Something like this:

<div data-role="panel" id="panel1" data-display="overlay" data-dismissible="false" data-position="right" style="width: 400px">
                <h3>This is a Test</h3>
                <uc:UserControl runat="server" ID="uc1" />
                <!-- inside this panel -->
                <a href="#my-header" data-rel="close">Close panel</a>
            </div>

In addition, according to the style of the pop-up box you described, I think you can try the Bootstrap Modal mentioned by other members.

Just make some modifications to it, a simple demo:

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>

    <style>
        .modal-dialog {
            max-width: 400px
        }
    </style>
<input type="button"  data-toggle="modal" data-target="#exampleModalCenter" value="show" />
    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content ">
                <div class="modal-header" style="background-color: #2a2a2a; color: white; font-weight: 500;">
                    <span style="margin-left: 37%">Remove Item?</span>
                </div>
                <div class="modal-body" style="font-weight: 600; text-align: center">
                    Are you sure you want to remove this item?
                    <br />
                    <input type="button" id="RemoveBtn" class="btn btn-light" value="Remove" style="margin-right: 20%" />
                    <input type="button" id="Cancel" class="btn btn-light" value="Cancel" data-dismiss="modal" />
                </div>
            </div>
        </div>
    </div>

Result:

Hope this can help you.

Best regards,

Xudong Peng

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview row delete confirmation box

Jan 12, 2021 10:16 AM|anjaliagarwal5@yahoo.com|LINK

Thanks. Above code works fine, but when I put the bootstrap modal inside the gridview then it didnt work. I tried to do it another way by calling Jquery UI dialog from the gridview delete click. That doesn't seem to be working either, but I am posting my code in case someone can suggest something otherwise I will just stick with simple JavaScript.

Below is my entire code including my jquery function:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GridViewUserControl.ascx.cs" Inherits="SidePanelGridViewTest.GridViewUserControl" %>
       <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:IdDatabase %>" 
    SelectCommand="SELECT TOP 5 [CartID], [Item], [RequestedBy], [RequestedFor] FROM [ShopCart]">
</asp:SqlDataSource>
<script>
$(function () {
    InitializeDeleteConfirmation();
});

function InitializeDeleteConfirmation() {
    $('#deleteConfirmationDialog').dialog({
        autoOpen: false,
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            "Delete": function () {
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
    }

    function deleteItem(uniqueID, itemID) {
        debugger;
        var dialogTitle = 'Permanently Delete Item ' + itemID + '?';

        $("#deleteConfirmationDialog").html('<p><span class="ui-icon " + "ui-icon-alert" style = "float:left; margin:0 7px 20px 0;" ></span > " + "Please click delete to confirm deletion.</p>');
 
        $("#deleteConfirmationDialog").dialog({
            title: dialogTitle,
            buttons: {
                "Delete": function () {
                    __doPostBack(uniqueID, '');
                    $(this).dialog("close");
                },
                "Cancel": function () { $(this).dialog("close"); }
            }
        });

        $('#deleteConfirmationDialog').dialog('open');
        return false;
    }

</script>
<asp:ScriptManager ID="scMan" runat="server"></asp:ScriptManager>
 <asp:UpdatePanel ID="updPnl" runat="server" UpdateMode="Always">
			<ContentTemplate>

<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="CartID" DataSourceID="SqlDataSource1" OnRowDeleting="OnRowDeleting"  OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="ProductID" 
            InsertVisible="False" ReadOnly="True"  />
        <asp:BoundField DataField="RequestedBy" HeaderText="ProductName"
             />
     	 <asp:TemplateField ShowHeader="False" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" ItemStyle-Width="150px" ControlStyle-CssClass="ss-row" >
						<ItemTemplate>
                             <asp:HiddenField ID="hf_id" runat="server" Value='<%#Eval("CartID") %>' />
							 <asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" ToolTip="Click To Delete" CommandName="Delete" CommandArgument='<%#Eval("CartID") %>' AlternateText="Click To delete" OnClientClick="javascript:return deleteItem(this.name, this.alt);"  />
						
					  </ItemTemplate>
						</asp:TemplateField>
    </Columns>
</asp:GridView>
                </ContentTemplate></asp:UpdatePanel>

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview row delete confirmation box

Jan 13, 2021 08:43 AM|SurferOnWww|LINK

If you can give up the jQuery Mobile and can use the Bootstrap Modal instead and also for the confirmation dialog you will probably be able to show both the shopping cart and confirmation dialog in order as required.

But, keep in mind there will be another big issue as to how you can delete the selected records in the database.

Reply

anjaliagarwa...

Member

505 Points

1259 Posts

Re: gridview row delete confirmation box

Jan 13, 2021 06:09 PM|anjaliagarwal5@yahoo.com|LINK

I will just keep the simple Javascript comfirmation box with Jquery Mobile panel. I just wanted to beautify the javascript confirmation box. I think it is not possible.

Reply

SurferOnWww

Member

150 Points

103 Posts

Re: gridview row delete confirmation box

Jan 13, 2021 11:53 PM|SurferOnWww|LINK

anjaliagarwal5@yahoo.com
I will just keep the simple Javascript comfirmation box with Jquery Mobile panel.

Can you close this thread (and the other threads related to this issue if any).

gridview row delete confirmation box[Answered] RSS

15 replies

Shortcuts

gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

anjaliagarwal5@yahoo.com

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

Re: gridview row delete confirmation box

anjaliagarwal5@yahoo.com