locked
gridview row delete confirmation box RRS feed

  • Question

  • User351619809 posted

    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:

    enter image description here

    I want to show something like this:

    enter image description here

    any help will be apprecaited.

    Sunday, January 10, 2021 10:02 PM

Answers

  • User-1545767719 posted

    > 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 11, 2021 12:56 AM

All replies

  • User-1545767719 posted

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

    Sunday, January 10, 2021 10:55 PM
  • User351619809 posted

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

    Sunday, January 10, 2021 11:23 PM
  • User-1545767719 posted

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

    Sunday, January 10, 2021 11:41 PM
  • User351619809 posted

    No, my project does not include bootstrap.js. 

    Monday, January 11, 2021 12:06 AM
  • User475983607 posted

    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... 

    Monday, January 11, 2021 12:11 AM
  • User-1545767719 posted

    > 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 11, 2021 12:56 AM
  • User351619809 posted

    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>

    Monday, January 11, 2021 12:58 AM
  • User-1545767719 posted

    > 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.

    Monday, January 11, 2021 5:18 AM
  • User-939850651 posted

    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

    Monday, January 11, 2021 7:08 AM
  • User351619809 posted

    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.

    Monday, January 11, 2021 5:11 PM
  • User-939850651 posted

    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

    Tuesday, January 12, 2021 9:53 AM
  • User351619809 posted

    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>
    
     

    Tuesday, January 12, 2021 10:16 AM
  • User-1545767719 posted

    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. 

    Wednesday, January 13, 2021 8:43 AM
  • User351619809 posted

     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.

    Wednesday, January 13, 2021 6:09 PM
  • User-1545767719 posted

     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).

    Wednesday, January 13, 2021 11:53 PM