feat: add option to cancel Row Detail opening, closes #378 (#852)

6pac · Oct 3, 2023 · 1ad9f5c · 1ad9f5c
1 parent fc3bd25
commit 1ad9f5c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/examples/example16-row-detail.html b/examples/example16-row-detail.html
@@ -223,7 +223,10 @@ <h2>View Source:</h2>
     }
 
     function hookAssigneeOnClick(itemId) {
-      document.querySelector("#who-is-assignee_" + itemId).addEventListener("click", assigneHandler.bind(this, itemId));
+      const assigneeElm = document.querySelector("#who-is-assignee_" + itemId);
+      if (assigneeElm) {
+        assigneeElm.addEventListener("click", assigneHandler.bind(this, itemId));
+      }
     }
 
     function assigneHandler(itemId) {
@@ -415,6 +418,11 @@ <h2>View Source:</h2>
       grid.registerPlugin(detailView);
 
       detailView.onBeforeRowDetailToggle.subscribe(function(e, args) {
+        // you coud cancel opening certain rows
+        // if (args.item.id === 1) {
+        //   e.preventDefault();
+        //   return false;
+        // }
         console.log('before toggling row detail', args.item);
       });
 

diff --git a/src/plugins/slick.rowdetailview.ts b/src/plugins/slick.rowdetailview.ts
@@ -257,10 +257,10 @@ export class SlickRowDetailView {
       }
 
       // trigger an event before toggling
-      this.onBeforeRowDetailToggle.notify({
-        grid: this._grid,
-        item: dataContext
-      }, e, this);
+      // user could cancel the Row Detail opening when event is returning false
+      if (this.onBeforeRowDetailToggle.notify({ grid: this._grid, item: dataContext }, e, this).getReturnValue() === false) {
+        return;
+      }
 
       this.toggleRowSelection(args.row, dataContext);