diff --git a/packages/row-detail-view-plugin/src/slickRowDetailView.spec.ts b/packages/row-detail-view-plugin/src/slickRowDetailView.spec.ts
index 2fa412a27..af6be93b5 100644
--- a/packages/row-detail-view-plugin/src/slickRowDetailView.spec.ts
+++ b/packages/row-detail-view-plugin/src/slickRowDetailView.spec.ts
@@ -306,10 +306,40 @@ describe('SlickRowDetailView plugin', () => {
expect(stopPropagationSpy).not.toHaveBeenCalled();
});
- it('should trigger onClick and ', () => {
+ it('should trigger onClick and NOT expect Row Detail to be toggled when onBeforeRowDetailToggle returns false', () => {
+ const mockProcess = jest.fn();
+ const expandDetailViewSpy = jest.spyOn(plugin, 'expandDetailView');
+ const onBeforeSlickEventData = new Slick.EventData();
+ jest.spyOn(onBeforeSlickEventData, 'getReturnValue').mockReturnValue(false);
+ const beforeRowDetailToggleSpy = jest.spyOn(plugin.onBeforeRowDetailToggle, 'notify').mockReturnValueOnce(onBeforeSlickEventData);
+ const afterRowDetailToggleSpy = jest.spyOn(plugin.onAfterRowDetailToggle, 'notify');
+ const itemMock = { id: 123, firstName: 'John', lastName: 'Doe', _collapsed: true };
+ const detailView = `loading...`;
+ jest.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(false);
+ jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(true);
+ jest.spyOn(gridStub, 'getDataItem').mockReturnValue(itemMock);
+ jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+ jest.spyOn(gridStub, 'getOptions').mockReturnValue({ ...gridOptionsMock, rowDetailView: { process: mockProcess, columnIndexPosition: 0, useRowClick: true, maxRows: 2, panelRows: 2 } as any });
+
+ plugin.init(gridStub);
+ plugin.onAsyncResponse.notify({ item: itemMock, itemDetail: itemMock, detailView, }, new Slick.EventData());
+
+ const clickEvent = new Event('click');
+ Object.defineProperty(clickEvent, 'target', { writable: true, configurable: true, value: document.createElement('div') });
+ Object.defineProperty(clickEvent, 'isPropagationStopped', { writable: true, configurable: true, value: jest.fn() });
+ Object.defineProperty(clickEvent, 'isImmediatePropagationStopped', { writable: true, configurable: true, value: jest.fn() });
+ gridStub.onClick.notify({ row: 0, cell: 1, grid: gridStub }, clickEvent);
+
+ expect(beforeRowDetailToggleSpy).toHaveBeenCalled();
+ expect(afterRowDetailToggleSpy).not.toHaveBeenCalled();
+ expect(expandDetailViewSpy).not.toHaveBeenCalled();
+ });
+
+ it('should trigger onClick and expect Row Detail to be toggled', () => {
const mockProcess = jest.fn();
const expandDetailViewSpy = jest.spyOn(plugin, 'expandDetailView');
const beforeRowDetailToggleSpy = jest.spyOn(plugin.onBeforeRowDetailToggle, 'notify');
+ const afterRowDetailToggleSpy = jest.spyOn(plugin.onAfterRowDetailToggle, 'notify');
const itemMock = { id: 123, firstName: 'John', lastName: 'Doe', _collapsed: true };
const detailView = `loading...`;
jest.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(false);
@@ -328,6 +358,7 @@ describe('SlickRowDetailView plugin', () => {
gridStub.onClick.notify({ row: 0, cell: 1, grid: gridStub }, clickEvent);
expect(beforeRowDetailToggleSpy).toHaveBeenCalled();
+ expect(afterRowDetailToggleSpy).toHaveBeenCalled();
expect(expandDetailViewSpy).toHaveBeenCalledWith({
_collapsed: false, _detailContent: undefined, _detailViewLoaded: true,
_height: 75, _sizePadding: 3, firstName: 'John', id: 123, lastName: 'Doe'
@@ -410,7 +441,7 @@ describe('SlickRowDetailView plugin', () => {
_collapsed: true, _detailViewLoaded: true, _sizePadding: 0, _height: 150, _detailContent: 'loading...',
id: 123, firstName: 'John', lastName: 'Doe',
}
- });
+ }, expect.anything(), expect.anything());
expect(afterRowDetailToggleSpy).toHaveBeenCalledWith({
grid: gridStub,
item: {
diff --git a/packages/row-detail-view-plugin/src/slickRowDetailView.ts b/packages/row-detail-view-plugin/src/slickRowDetailView.ts
index 1d23c3dd1..850f410ba 100644
--- a/packages/row-detail-view-plugin/src/slickRowDetailView.ts
+++ b/packages/row-detail-view-plugin/src/slickRowDetailView.ts
@@ -682,10 +682,10 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
}
// trigger an event before toggling
- this.onBeforeRowDetailToggle.notify({
- grid: this._grid,
- item: dataContext
- });
+ // 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);