Fix for table resizing (#9117)

* some optimization

* check for table

* fix table resizing

* Fix for sash crash

* Removed space

* small optimization

* small change in message

* small change

* changed wording

* removed timeout for onResize

* Removed onGridRendered

* fix isCellOnScreen

* small spacing fixes

* removed timeout in gridParentComponent

* fix for indexing

* reduced instances of "self"

* minor fixes for self and this

src/sql/workbench/contrib/editData/browser/editDataGridPanel.ts

@@ -31,7 +31,7 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { EditUpdateCellResult } from 'azdata';
 import { ILogService } from 'vs/platform/log/common/log';
 import { deepClone, assign } from 'vs/base/common/objects';
-import { Emitter, Event } from 'vs/base/common/event';
+import { Event } from 'vs/base/common/event';
 import { equals } from 'vs/base/common/arrays';
 import * as DOM from 'vs/base/browser/dom';
 
@@ -50,6 +50,7 @@ export class EditDataGridPanel extends GridParentComponent {
 	// FIELDS
 	// All datasets
 	private gridDataProvider: AsyncDataProvider<any>;
+	//main dataset to work on.
 	private dataSet: IGridDataSet;
 	private oldDataRows: VirtualizedCollection<any>;
 	private firstRender = true;
@@ -392,7 +393,6 @@ export class EditDataGridPanel extends GridParentComponent {
 		let undefinedDataSet = deepClone(dataSet);
 		undefinedDataSet.columnDefinitions = dataSet.columnDefinitions;
 		undefinedDataSet.dataRows = undefined;
-		undefinedDataSet.resized = new Emitter();
 		self.placeHolderDataSets.push(undefinedDataSet);
 		if (self.placeHolderDataSets[0]) {
 			this.refreshDatasets();
@@ -425,35 +425,37 @@ export class EditDataGridPanel extends GridParentComponent {
 
 	private refreshGrid(): Thenable<void> {
 		return new Promise<void>(async (resolve, reject) => {
-			const self = this;
+
-			clearTimeout(self.refreshGridTimeoutHandle);
+			clearTimeout(this.refreshGridTimeoutHandle);
+
 			this.refreshGridTimeoutHandle = setTimeout(() => {
 
-				if (self.dataSet && self.placeHolderDataSets[0].resized) {
+				if (this.dataSet) {
-					self.placeHolderDataSets[0].dataRows = self.dataSet.dataRows;
+					this.placeHolderDataSets[0].dataRows = this.dataSet.dataRows;
-					self.placeHolderDataSets[0].resized.fire();
+					this.onResize();
 				}
 
 
-				if (self.oldDataRows !== self.placeHolderDataSets[0].dataRows) {
+				if (this.oldDataRows !== this.placeHolderDataSets[0].dataRows) {
-					self.detectChange();
+					this.detectChange();
-					self.oldDataRows = self.placeHolderDataSets[0].dataRows;
+					this.oldDataRows = this.placeHolderDataSets[0].dataRows;
 				}
 
-				if (self.firstRender) {
+				if (this.firstRender) {
-					let setActive = function () {
+					setTimeout(() => this.setActive());
-						if (self.firstRender && self.table) {
-							self.table.setActive();
-							self.firstRender = false;
-						}
-					};
-					setTimeout(() => setActive());
 				}
 				resolve();
-			}, self.refreshGridTimeoutInMs);
+			}, this.refreshGridTimeoutInMs);
 		});
 	}
 
+	private setActive() {
+		if (this.firstRender && this.table) {
+			this.table.setActive();
+			this.firstRender = false;
+		}
+	}
+
 	protected detectChange(): void {
 		if (this.firstLoad) {
 			this.handleChanges({
@@ -754,7 +756,7 @@ export class EditDataGridPanel extends GridParentComponent {
 		let cellBox = grid.getCellNodeBox(row, column);
 		return viewport && cellBox
 			&& viewport.leftPx <= cellBox.left && viewport.rightPx >= cellBox.right
-			&& viewport.top <= row && viewport.bottom >= row;
+			&& viewport.top < row + 1 && viewport.bottom > row + 1;
 	}
 
 	private resetCurrentCell() {
@@ -1002,9 +1004,6 @@ export class EditDataGridPanel extends GridParentComponent {
 	}
 
 	private setupEvents(): void {
-		this.table.grid.onScroll.subscribe((e, args) => {
-			this.onScroll(args);
-		});
 		this.table.grid.onCellChange.subscribe((e, args) => {
 			this.onCellEditEnd(args);
 		});
@@ -1037,27 +1036,15 @@ export class EditDataGridPanel extends GridParentComponent {
 		// handleInitializeTable() will be called *after* the first time handleChanges() is called
 		// so, grid must be there already
 
-		if (this.dataSet.dataRows && this.dataSet.dataRows.getLength() > 0) {
+		if (this.placeHolderDataSets[0].dataRows && this.placeHolderDataSets[0].dataRows.getLength() > 0) {
 			this.table.grid.scrollRowToTop(0);
 		}
 
-		if (this.dataSet.resized) {
-			// Re-rendering the grid is expensive. Throttle so we only do so every 100ms.
-			this.dataSet.resized.throttleTime(100)
-				.subscribe(() => this.onResize());
-		}
-
 		// subscribe to slick events
 		// https://github.com/mleibman/SlickGrid/wiki/Grid-Events
 		this.setupEvents();
 	}
 
-	private onResize(): void {
-		if (this.table.grid !== undefined) {
-			// this will make sure the grid header and body to be re-rendered
-			this.table.grid.resizeCanvas();
-		}
-	}
 
 	/*Formatter for Column*/
 	private getColumnFormatter(row: number | undefined, cell: any | undefined, value: any, columnDef: any | undefined, dataContext: any | undefined): string {

src/sql/workbench/contrib/editData/browser/gridParentComponent.ts

@@ -499,14 +499,15 @@ export abstract class GridParentComponent extends Disposable {
 	protected abstract tryHandleKeyEvent(e: StandardKeyboardEvent): boolean;
 
 	resizeGrids(): void {
-		const self = this;
 		setTimeout(() => {
-			for (let grid of self.renderedDataSets) {
+			this.onResize();
-				grid.resized.fire();
-			}
 		});
 	}
 
+	protected onResize() {
+		this.table?.resizeCanvas();
+	}
+
 	/**
 	 * used to render the native element into the container.
 	 * */