Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Grid > Custom delete confirmation message

• Mattias Master

  Posted on Jan 18, 2011 (permalink)

  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

  Reply

• Atanas Korchev Atanas Korchev

  Posted on Jan 18, 2011 (permalink)

  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

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Mandar Bansod

  Posted on May 12, 2011 (permalink)

  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.

  Reply

• vzvezda

  Posted on Jun 9, 2011 (permalink)

  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'));
  
  

  Reply

• ori

  Posted on Jan 10, 2012 (permalink)

  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
  

  Reply

• Beni

  Posted on Feb 2, 2012 (permalink)

  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.
  

  Reply

• Sam Rossetti

  Posted on Apr 12, 2012 (permalink)

  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();

      });

  });

  Reply

• Patrick

  Posted on Aug 2, 2012 (permalink)

  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");

                    }

                }

            });

        });

  }

  
  

  Reply

• Kenneth

  Posted on Aug 8, 2012 (permalink)

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

  Reply

• Vi

  Posted on Apr 22, 2013 (permalink)

  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.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Grid > Custom delete confirmation message