Detail row content is cleared when the grid columns are changed

[joostvanbijsterveld]

Describe the bug

In a grid with detail row functionality it is possible to expand the detail row.
The content in the detail area of the row is shown based on the data of the row.
However the content is no longer displayed when the columns of the grid are changed.

Reproduction

• Go to https://ghiscoding.github.io/Angular-Slickgrid/#/rowdetail
• Expand the first row.
• Remove the column 'Finish' using the commands menu
• The content of the detail is now no longer shown.

Expectation

The content of the detail row should remain visible when the columns of the grid are changed.

Environment Info

Angular 18.2.2
Angular-Slickgrid 8.6.0
Typescript 5.4.2
Google Chrome 129.0.6668.60
Windows 11 10.0.22631

Validations

• Follow our Code of Conduct
• Read the HOWTO - Quick Start.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[ghiscoding]

Yeah Row Detail is a very special thing, every time the grid UI changes it has to call the redrawAllViewComponents() method and it looks like some command of the Grid Menu calls the redraw (like column reordered) but it's not being called for the column selection, it should be added for the onColumnsChanged event as well (I'm assuming you'll have the same problem with the Column Picker as well). For now you can call redrawAllViewComponents() yourself, see Row Detail - Calling Addon Methods Dynamically

this.gridOptions = {
  columnPicker: {
    onColumnsChanged: (_e, args) => rowDetailInstance.redrawAllViewComponents()
  },
  gridMenu: {
    onColumnsChanged: (_e, args) => rowDetailInstance.redrawAllViewComponents()
  },
}

Angular-Slickgrid/src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts

Lines 205 to 212 in f9a96bf

	// on filter changed, we need to re-render all Views
	this._subscriptions.push(
	this.eventPubSubService?.subscribe('onFilterChanged', this.redrawAllViewComponents.bind(this)),
	this.eventPubSubService?.subscribe('onGridMenuClearAllFilters', () => window.setTimeout(() => this.redrawAllViewComponents())),
	this.eventPubSubService?.subscribe('onGridMenuClearAllSorting', () => window.setTimeout(() => this.redrawAllViewComponents())),
	);
	}
	}

A PR fix would be welcome, I'm assuming something like this should fix the issue (unit tests would also need to be updated)

this._subscriptions.push(
  this.eventPubSubService?.subscribe('onFilterChanged', this.redrawAllViewComponents.bind(this)),
+ this.eventPubSubService?.subscribe('onGridMenuColumnsChanged', this.redrawAllViewComponents.bind(this)),
+ this.eventPubSubService?.subscribe('onColumnPickerColumnsChanged', this.redrawAllViewComponents.bind(this)),
  this.eventPubSubService?.subscribe('onGridMenuClearAllFilters', () => window.setTimeout(() => this.redrawAllViewComponents())),
  this.eventPubSubService?.subscribe('onGridMenuClearAllSorting', () => window.setTimeout(() => this.redrawAllViewComponents())),
);

This Row Detail really has to be redrawn every time the UI changes and it happens so, so many times, I'm sure that there's even more events that are missed.

[joostvanbijsterveld]

Thank you for the solution, I hadn't gotten around to creating a PR myself yet.

[ghiscoding]

no problem, I actually wanted to test with the grid.onRendered event, it is being called more often covering most use cases. And if you haven't already, you can ⭐ if you like the project, cheers 😉