title: How do I remove a row from a Kendo Grid
body: <p>I have a very simple setup, a grid called #list with a datasource populated with records to display.</p>
  
  <p>I have a button on each row with an onClick event that calls this function:</p>
  
  <pre><code>    // Soft-Delete person
      var processURL = crudServiceBaseUrl + '?method=deletePerson';
      function deletePerson(id){
          if (confirm('#getResource("person.detail.confirmdel")#')) {
              $.ajax({
                  type: 'POST',
                  url: processURL,
                  data: {
                      PERS_KY: id
                  },
                  success: function (data){
                      var thingToDelete = "tr:eq("+id+")";
                      var grid = $("#list").data("kendoGrid");
                      grid.removeRow(thingToDelete);
                  },
                  error: function (xhr, textStatus, errorThrown){
                      alert("Error while deleting person"+ "\n"+ xhr + "\n"+ textStatus + "\n" + errorThrown);
                  }
              });
          }
      }
  
  The server-side stuff works fine, the interaction with the database is good. However, the row does not disappear from the grid.
  
  Anyone?
  
  ==============================================================================
  
  In answer to the comments below, here is the revised function:
  
  var processURL = crudServiceBaseUrl + '?method=deletePerson';
  function deletePerson(id, row){
      if (confirm('#getResource("person.detail.confirmdel")#')) {
          $.ajax({
              type: 'POST',
              url: processURL,
              data: {
                  PERS_KY: id
              },
              success: function (data){
                  var thingToDelete = row;
                  var grid = $("#list").data("kendoGrid");
                  grid.removeRow(thingToDelete);
              },
              error: function (xhr, textStatus, errorThrown){
                  alert("Error while soft-deleting person"+ "\n"+ xhr + "\n"+ textStatus + "\n" + errorThrown);
              }
          });
      }
  }
  </code></pre>
  
  <p>This all works fine, the database is populated and grid.removeRow() makes the row fade out, but then the page reloads, which I don't want. </p>
  
  <p>Any idea how to stop the page reloading?</p>