confirmation box for deleting a row in a grid view

Question

confirmation box for deleting a row in a grid view

I am looking to enhance the delete confirmation box on my Gridview delete function. Currently, I am using a basic Internet Explorer box for confirmation but I want to display a more stylish confirmation box. Here is the JavaScript code snippet within my gridview code:

OnClientClick="return DeleteItem();"

Here is my Gridview setup:

<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 the necessary Javascript function:

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

The current confirmation window looks like this:

https://i.sstatic.net/2KLF2.png

I would like the confirmation box to resemble this image instead:

https://i.sstatic.net/Ceigq.png

Any assistance in achieving this fancier confirmation box would be greatly appreciated.

javascript css asp.net

Answer 1

Answer №1

Adding css to a confirm box is not feasible. Instead, you can create your own JavaScript popup.

There are numerous plugins available for this purpose. One well-known JQuery plugin is the JQuery UI dialog which can be found at https://jqueryui.com/dialog/#modal-confirmation

For example, to integrate JQuery UI Dialog with an ASP.NET Gridview, consider the following:

<asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" class="button-delete" />

Avoid using
```
OnClientClick="return DeleteItem();"
```
You can utilize the css class 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 refer to imgbtnDelete
        showDialog();
    });

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

HTML for the 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: The provided example serves for demonstration purposes. It may require some experimentation to make it functional in your specific scenario.

Answer 2

Adding css to a confirm box is not feasible. Instead, you can create your own JavaScript popup.

There are numerous plugins available for this purpose. One well-known JQuery plugin is the JQuery UI dialog which can be found at https://jqueryui.com/dialog/#modal-confirmation

For example, to integrate JQuery UI Dialog with an ASP.NET Gridview, consider the following:

<asp:ImageButton  ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png"  title='Remove' CommandName="delete" class="button-delete" />

Avoid using
```
OnClientClick="return DeleteItem();"
```
You can utilize the css class 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 refer to imgbtnDelete
        showDialog();
    });

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

HTML for the 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: The provided example serves for demonstration purposes. It may require some experimentation to make it functional in your specific scenario.

confirmation box for deleting a row in a grid view

Answer №1

Similar questions

Is there a way to detect changes in a Service variable within an Angular component?

The Intersection Observer encountered an issue as it was unable to access the property 'current' since it was undefined

issue with visibility of checkbox in material ui table row

Unable to retrieve JSON element using Fetch

When attempting to print using React, inline styles may not be effective

Focusing solely on a particular category in EJS

Concentrating on a Div Element in React

Manipulate elements by adding and removing classes sequentially based on an array

Oops! The page you're looking for at /api/tasks

JavaScript can be used to deactivate the onclick attribute

Creating an Elastic Beanstalk instance from an s3 bucket using the aws-sdk tutorial

Eliminate nested object properties using an attribute in JavaScript

Exploring the integration of pre-defined Tailwind classes within Next JS development

Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Encountering unhandled promise rejection error with email field in NextJS when using React Hook Form

Is Vercel deploying an incorrect version?

When working with arrays in a programming loop, is it better to assign the value to a variable or access it directly?

Runtime.UnhandledPromiseRejection - Oops! Looks like we're trying to read properties of something that doesn't exist (specifically 'headers')

Having Trouble with Your React.js Rendering?

Issue with grunt-crx task detected