gridview row delete confirmation box

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:

gridview row delete confirmation box

I want to show something like this:

gridview row delete confirmation box

any help will be apprecaited.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

It’s not possible to add css to a confirm box. You can implement your own JavaScript popup.

Alternatively there are many plugins that can do this. One of the most popular JQuery plugins is JQuery UI dialog https://jqueryui.com/dialog/#modal-confirmation

As an as illustration for integrating JQuery UI Dialog with an ASP.NET Gridview, try something like:

<asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" class="button-delete" />
  • You don’t need OnClientClick="return DeleteItem();"
  • The css class can be used as a reference for an onclick event.

JavaScript:

$(function() {
    // Create click handler
    $('.ui-search-result-table').on('click', 'button-delete', function(e) {
        e.preventDefault($(this)); // $(this) should be a reference to imgbtnDelete
        showDialog();
    });

    // Create the dialog popup
    function showDialog(button) {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
                "Remove": function() {
                    $(button).click(); // This should click imgbtnDelete
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });
    }
});

HTML for popup
<div style="display: none;">
    <div id="dialog-confirm" title="Remove Item?">
      <p>Are you sure you want to remove this item?</p>
    </div>
</div>

Note: This example is for illustration purposes. You will need to have a play around with your solution to get it working.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x