CODEWITHSUNDEEP
javascriptcssasp.net
rimi
rimi

Reputation: 775

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:

enter image description here

I want to show something like this:

enter image description here

any help will be apprecaited.

Upvotes: 0

Views: 582

Answers (1)

Greg
Greg

Reputation: 4518

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.

Upvotes: 1

Related Questions