Custom delete confirmation message

[Mattias]

Hi,
I want to change the confirmation message when deleting a row so it is unique for each row, like:
Are you sure you want to delete 'This first special post'?
Are you sure you want to delete 'This second post'?
...

What possibilities do I have to achieve that?

Regards,
Mattias

[Atanas Korchev]

Hello Mattias,

 You can do so if your grid  subscribing to the OnDataBound and OnLoad client-side events and replacing the deleteConfirmation text. Here is some sample code:

<%= Html.Telerik().Grid()
         .Name("Grid")
      .ClientEvents(e => e.OnLoad("replaceConfirmation").OnDataBound("replaceConfirmation"))
%>

<script>
function replaceConfirmation() {
        var grid = $(this).data('tGrid');

        $(this).find('.t-grid-delete').click(function(e) {
            var tr = $(this).closest('tr');

             grid.localization.deleteConfirmation = 'Delete row #' + tr.index() + '?';
        });
    }
</script>

Regards,
Atanas Korchev
the Telerik team

[Mandar Bansod]

HI Atanas,

I tried the solution you suggested and it works great. But I would like to know is it possible to show a telerik mvc window instead of that ugly javascript pop up and delete a record when user clicks on Yes ?

If you can provide a sample code then it will be really a great help.

till now I am able to pop up the window on click of a Ajax.ActionLink() but unable to find any solution how to post data to the server when user hits the Yes button on telerik window asking user whether user really want to delete the record or not.

[vzvezda]

It looks like a custom command can be written to delete the row in telerik grid using the undocumented function:
grid.deleteRow(tr) -> delete a row (DOM element)

According to the source codes it will also as for confirmation via JavaScript confirm method unless grid.editing.confirmDelete will be 'false'.

So I assume that the following code can be assigned to a custom code to avoid confirmation built-in confirmation window: 
grid.editing.confirmDelete = false;
  grid.deleteRow($(this).closest('tr'));

[ori]

HI Atanas,

Your option works great, i would like to show to user data from my model for example: "Delete customer name: Name, id:1234 "

can you Please advice how to do it ?

Thank you

Ori

[Beni]

Hi Atanas,

is it possible to go further with the alert customization? Is it possible to change style, icons, color, etc. of the alert window? Something like this:

jQuery alert

or another different library.

Thank you.

[Sam Rossetti]

This is kind of hackish but it works.


On the page I have a dialog set up like this.

<div id="deleteDialog" title="Are you sure?">
    <p>Are you sure?</p>
</div>

Then in the $(document).ready(...) method I do this. The meat of the example is using the jQuery Event object's preventDefault and stopPropogation. The preventDefault stops the click event while stopPropogation prevents the event from bubbling up the DOM. After that you can handle the dialog however you want.

There's probably a better way of finding and submitting the required form I just coded this quickly. Also note that were using full page post backs and not AJAX.

$(document).ready(function () {
    $('#deleteDialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        buttons: {
            "OK": function () {
                var deleteTarget = $(".deleteTarget");
                deleteTarget.removeClass("deleteTarget");
                deleteTarget.submit();
                $(this).dialog('close');
            },
            "Cancel": function () {
                $(this).dialog('close');
            }
        }
    });

    $(".t-grid-delete").on("click", function (e) {
        $(this).parent().parent().addClass("deleteTarget");
        $('#deleteDialog').dialog('open');
        e.preventDefault();
        e.stopPropagation();
    });
});

[Patrick]

Hi use the grid settings and OnRowDataBound event to customize the prompt on deletion

1 - In the grid definition :

.ClientEvents( evt => { evt.OnRowDataBound("onBRowDataBound");})
.Editable(editing => {
                    editing.Mode(GridEditMode.InLine);
                    editing.DisplayDeleteConfirmation(false);
})

2 - On your page

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

3 - Inside your javascript handle

function onBRowDataBound(e) {
    $(e.row) // get the current table row (TR) as a jQuery object
      .find(".t-grid-delete") // find the delete button in that row
      .click(function (e) {  // handle its "click" event
          $("#dialog-confirm").dialog({
              resizable: false,
              height: 140,
              modal: true,
              buttons: {
                  "Continue": function () {
                      $(this).dialog("close");
                  },
                  Cancel: function () {
                      e.stopPropagation(); // prevent the grid deletion code from executing.
                      $(this).dialog("close");
                  }
              }
          });
      });
}

[Kenneth]

@vzvezda

Just want to say your little nugget about grid.editing.confirmDelete is invaluable.  Thanks!!

[Vi]

Bringing back a old thread but how did anyone get it to continue to the call the code from the controller once the user clicks ok?  I can't figure out how to do it w/o using another AJAX call in which I'm having trouble trying to get a value of a specific call in which row the button is clicked.