Knopf klicken in Kendo Gitter Spalte feuern onclick ganzen Zeile

Question

Unser Kunde wollte ein Kendo-Gitter, wo er irgendwo in einer Reihe klicken kann, um die entsprechende Detailseite zu öffnen. Ich füge die Zeilen wie folgt aus:

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: " " }]; 

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

Und in meiner Funktion onDataBound():

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

Das funktioniert perfekt wie erwartet. Wie Sie sehen, habe ich eine Spalte mit einer Schaltfläche zum Löschen. Hier ist das Problem. Immer wenn ich auf die Schaltfläche zum Löschen klicke, erhalte ich die Bestätigungsmeldung ("Sind Sie sicher, dass [...] gelöscht?") Und kann die Zeile erfolgreich löschen, aber die Detailseite der Zeile wird so bald geöffnet als ich auf den Knopf klicke.

Wie kann ich der Reihe mitteilen, dass die Detailseite nicht geöffnet werden soll, wenn ich auf die Schaltfläche zum Löschen klicke?

Answer 1

Ich habe eine Lösung gefunden. Ich kann die tagName überprüfen, wenn die Klick-Funktion zur Reihe Bindung:

$(grid.tbody).on("click", "tr", function (e) { 
    if (e.target.tagName == "TD") { 
     const URL = startInfo.ApplicationRoot + "SomeDetailPage?SomeId=" + rowData.get("SomeId"); 
     window.open(URL, '_blank'); 
    } 
}); 

Wenn ich auf die Schaltfläche klicken, tagName erhalten entweder „SPAN“ oder „A“. Alles außerhalb der Schaltfläche ergibt "TD".

Answer 2

Sie sollten e.stopPropagation(); auf Löschen, damit das Ereignis auch nicht an die Zeile übergeben wird.