title: Button click in kendo grid column firing onclick of whole row
body: <p>Our customer wanted a kendo grid where he can click anywhere on a row to open the corresponding detail page. I'm adding the rows like this:</p>
  
  <pre><code>const cols = [
      { field: "Date", title: "Date", template: "#=kendo.toString(kendo.parseDate(Date, 'yyyy-MM-dd), 'dd.MM.yyyy')#" },
      { field: "Title", title: "Title" },
      { field: "", command: ["destroy"], title: "&amp;nbsp;" }];
  
  let grid = $("#grid").kendoGrid({
      dataSource: this.dataSource,
      pageable: true,
      filterable: true,
      sortable: true,
      columns: cols,
      editable: "detail"
  }).data("kendoGrid");
  grid.one("dataBound", this.onDataBound.bind(this));
  </code></pre>
  
  <p>And in my function <code>onDataBound()</code>:</p>
  
  <pre><code>const grid = $("#grid").data("kendoGrid");
  $(grid.tbody).on("click", "tr", function (e) {
      const rowData = grid.dataItem(this);
      const URL = startInfo.ApplicationRoot + "SomeDetailPage?SomeId=" + rowData.get("SomeId");
      window.open(URL, '_blank');
  });
  </code></pre>
  
  <p>This works perfectly as expected. However, as you see, I have a column with a delete button. Here is the problem. Whenever I click on the delete button, I'm getting the confirmation message ("Are you sure to delete [...]?") and actually <em>can</em> delete the row successfully, but the detail page of the row opens as soon as I click the button.</p>
  
  <p>How can I let the row know that it shouldn't open the detail page when I click the delete button?</p>