Column hide and show issue

[pankajprismhr]

First Problem: I have an issue when hiding and showing the grid columns.

How to reproduce: Hiding the column by selecting the "Hide Column" option on the header menu, then disabling the "Force Fit Column" in the grid menu, and then adding the column back from the grid menu results in unexpected behaviour.
You'll see the columns stretch way out, and parts of the gridlines are missing(in the screenshot below); there is also a horizontal scroll that displays at the bottom of the grid. However, once you click away from the hamburger menu, the grid snaps back.

Adding screenshots

This is my code

@Input({ required: true }) config: {
  columnDefinitions: Column[],
  gridOptions?: GridOption,
  gridId: string,
  pageSize?: number,
  data: any[],
  manualSorting?: boolean,
  fetchData: (page: number, pageSize: number, sortingData?: any) => Promise<any[]>
}

ngOnInit(): void {
  this.gridOptions = {
    enableContextMenu: false,
    enableCellMenu: true,
    enableAutoResize: true,
    defaultColumnSortFieldId: 'sequence',
    datasetIdPropertyName: 'sequence',
    autoResize: {
      container: '.slickgrid-container',
      minHeight: 500,
      autoHeight: true,
      autoHeightRecalcRow: 1
    },
    gridWidth: '100%',
    enableSorting: true,
    enableColumnPicker: true,
    enableFiltering: true,
    showCustomFooter: true,
    enableExcelCopyBuffer: true,
    excelCopyBufferOptions: {
      includeHeaderWhenCopying: true
    },
    multiColumnSort: false,
    asyncEditorLoading: false,
    rowHeight: 45,
    enableAsyncPostRender: true,
    asyncPostRenderDelay: 0,
    enableAsyncPostRenderCleanup: true,
    params: {
      angularUtilService: this.angularUtilService,
    },
    ...this.config.gridOptions
  };

  this.prepareGridData();
}

async loadData() {
  if (!this.config.fetchData) return;
  return await this.config.fetchData(this.page, this.config.pageSize ?? this.defaultPageSize, this.sortingData);
}

prepareGridData() {
  this.loadData().then(data => {
    this.dataSet = [...this.dataSet, ...(data ?? [])];
  });
}

HTML

<div class="slickgrid-container">
<angular-slickgrid [gridId]="config.gridId" (onScroll)="handleOnScroll($event)" (onGridStateChanged)="onGridStateChanged()"
    (onAngularGridCreated)="angularGridReady($event)" [columns]="config.columnDefinitions" [options]="gridOptions"
    [dataset]="dataSet" (onSelectedRowsChanged)="handleSelectedRowsChanged($event)"
    (onCellChange)="onCellChanged($event)" (onDragEnd)="handleOnDragEnd($event)">
</angular-slickgrid>
</div>

This can also be noticed on https://ghiscoding.github.io/angular-slickgrid-demos/#/example04. The difference is that some parts of the gridlines are missing in my implementation(you can see the screenshot), and they are visible in the demo site.

Second Problem: When you hide some of the columns, you see the misalignment of the header row with the column search fields and the column data. Sometimes, the headers snap back in position when you try to hide more columns.
Adding screenshots from my application and from demos also.

Code is the same as above, no change.

How do we resolve these.
Any Help would be appreciated.

[ghiscoding]

I'm pretty sure that you're using an older version of the project and I'm pretty that most of these issues have already been fixed in newest version. I will not work on this unless you provide a full repro with current version, and the 2 ways you can provide a full repro is to create a new GitHub project that has the repro OR simply use the Stackbliz links from the homepage in Live Demos & Available Framework Wrappers and modify one of the example in Stackblitz.

[pankajprismhr]

I am using version 9.9.0, which I believe is the latest. And I know both of these issues are not caused by any of the changes I made in my code because both issues are very easily reproducible using the current code that you have for the demo site example 3 (excluding the missing lines in the first issue, which I invesigated and found out are because of some CSS changes in my project) https://ghiscoding.github.io/angular-slickgrid-demos/#/example03.

Here are the steps to reproduce them:

1st issue: Remove the first three columns using the header menu - hide column option, then add them back in using the grid menu. You can see the horizontal scroll. If you close the grid menu, the columns snap back in, and the scroll bar is removed.

2nd issue: Just remove the second column "Title, Custom Editor" and you can easily see that the headers and data columns are no longer aligned. Sometimes the alignment gets corrected when you hide more columns.

[ghiscoding]

1st issue: Remove the first three columns using the header menu - hide column option, then add them back in using the grid menu. You can see the horizontal scroll. If you close the grid menu, the columns snap back in, and the scroll bar is removed.

That's not an issue and is the expected behavior, I purposely decided to add a single auto-size columns ("force fit") behavior after closing the Grid Menu, I don't do that when it's the Column Picker though, just in the Grid Menu. One possibility, that might be acceptable would be to add an option in the grid menu to disable this auto-resize { gridMenu: { autoResizeColumns: false } } (keep default to true)

slickgrid-universal/packages/common/src/extensions/slickGridMenu.ts

Lines 366 to 376 in e820c5b

	// we also want to resize the columns if the user decided to hide certain column(s)
	if (typeof this.grid?.autosizeColumns === 'function') {
	// make sure that the grid still exist (by looking if the Grid UID is found in the DOM tree)
	const gridUid = this.grid.getUID() || '';
	if (this._areVisibleColumnDifferent && gridUid && document.querySelector(`.${gridUid}`) !== null) {
	if (this.gridOptions.enableAutoSizeColumns) {
	this.grid.autosizeColumns();
	}
	this._areVisibleColumnDifferent = false;
	}
	}

if you don't like this behavior you can cancel it via the onMenuClosed by returning false (which happens before the code above) or calling event prevent default, I'm not sure which is the correct approach since I forgot (but give it a try via grid option gridMenu: { onMenuClosed: (e, args) => false }

slickgrid-universal/packages/common/src/extensions/slickGridMenu.ts

Lines 357 to 362 in e820c5b

	if (
	(typeof this._addonOptions?.onMenuClose === 'function' && this._addonOptions.onMenuClose(event, callbackArgs) === false) ||
	this.onMenuClose.notify(callbackArgs, null, this).getReturnValue() === false
	) {
	return;
	}

2nd issue: Just remove the second column "Title, Custom Editor" and you can easily see that the headers and data columns are no longer aligned. Sometimes the alignment gets corrected when you hide more columns.

that one does seem like a bug, will investigate

[ghiscoding]

I've fixed the misalignment in PR #2215 and the 1st issue you mentioned is the default behavior but it could be disabled via grid option enableAutoSizeColumns: false, however that would cause other side effect, so I'm also adding an option gridMenu.autoResizeColumns: false to disable the column headers resize after closing the Grid Menu, available via PR #2216

This will be available in the next v9.10.0 coming soon ⭐

[pankajprismhr]

Thanks for the fix. I have found one more issue with the multiple select, the onCellChange is not getting triggered if you click outside the grid even with autoCommitEdit set to true, we can open up a new discussion for this if you want.
Thanks again for the fix on header alignment issue.