diff --git a/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts b/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts index 2553147436..c2d82743d4 100644 --- a/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts @@ -94,8 +94,10 @@ export class CheckboxSelectColumn implements Slick.Pl this._handler .subscribe(this._grid.onClick, (e: Event, args: Slick.OnClickEventArgs) => this.handleClick(e, args)) .subscribe(this._grid.onKeyDown, (e: DOMEvent, args: Slick.OnKeyDownEventArgs) => this.handleKeyDown(e as KeyboardEvent, args)) - .subscribe(this._grid.onHeaderClick, (e: Event, args: Slick.OnHeaderClickEventArgs) => this.handleHeaderClick(e, args)) .subscribe(this._grid.onHeaderCellRendered, (e: Event, args: Slick.OnHeaderCellRenderedEventArgs) => this.handleHeaderCellRendered(e, args)); + if (this.isCheckAllHeaderCheckboxShown()) { + this._handler.subscribe(this._grid.onHeaderClick, (e: Event, args: Slick.OnHeaderClickEventArgs) => this.handleHeaderClick(e, args)); + } } private handleClick(e: DOMEvent, args: Slick.OnClickEventArgs): void { @@ -131,7 +133,7 @@ export class CheckboxSelectColumn implements Slick.Pl if (this._options.actionOnCheck === ActionOnCheck.selectRow) { this.updateSelectedRows(); } else { - this._onChange.fire({ checked: false, row: row, column: this.index }); + this._onChange.fire({ checked: !currentValue.checked, row: row, column: this.index }); } } @@ -152,6 +154,10 @@ export class CheckboxSelectColumn implements Slick.Pl e.stopPropagation(); } + private isCheckAllHeaderCheckboxShown(): boolean { + return !this._options.title; + } + private handleHeaderKeyDown(e: KeyboardEvent): void { const event = new StandardKeyboardEvent(e); if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) { @@ -200,6 +206,18 @@ export class CheckboxSelectColumn implements Slick.Pl this._handler.unsubscribeAll(); } + // This call is to handle reactive changes in check box UI + // This DOES NOT fire UI change Events + public reactiveCheckboxCheck(row: number, value: boolean) { + this.setCheckboxPropertyValue(row, value); + // update row to call formatter + this._grid.invalidateRow(row); + this._grid.render(); + // ensure that grid reflects the change + this._grid.scrollRowIntoView(row); + } + + private getCheckboxPropertyValue(row: number): ICheckboxColumnValue { const dataItem = this._grid?.getDataItem(row); const propertyValue = dataItem[this._options.title]; diff --git a/src/sql/workbench/browser/modelComponents/table.component.ts b/src/sql/workbench/browser/modelComponents/table.component.ts index a42795cbe1..c42a54ff91 100644 --- a/src/sql/workbench/browser/modelComponents/table.component.ts +++ b/src/sql/workbench/browser/modelComponents/table.component.ts @@ -70,7 +70,7 @@ export default class TableComponent extends ComponentBase; private _tableData: TableDataView; private _tableColumns; - private _checkboxColumns: CheckboxSelectColumn<{}>[] = []; + private _checkboxColumns: Map> = new Map(); private _buttonColumns: ButtonColumn<{}>[] = []; private _hyperlinkColumns: HyperlinkColumn<{}>[] = []; private _contextMenuColumns: ContextMenuColumn<{}>[] = []; @@ -373,7 +373,9 @@ export default class TableComponent extends ComponentBase this.registerPlugins(col, this._checkboxColumns[col])); + this._checkboxColumns.forEach((column, columnName) => { + this.registerPlugins(columnName, column); + }) Object.keys(this._buttonColumns).forEach(col => this.registerPlugins(col, this._buttonColumns[col])); Object.keys(this._hyperlinkColumns).forEach(col => this.registerPlugins(col, this._hyperlinkColumns[col])); Object.keys(this._contextMenuColumns).forEach(col => this.registerPlugins(col, this._contextMenuColumns[col])); @@ -420,25 +422,25 @@ export default class TableComponent extends ComponentBase(col.options ? (col.options).actionOnCheckbox : col.action); - this._checkboxColumns[col.value] = new CheckboxSelectColumn({ + this._checkboxColumns.set(col.value, new CheckboxSelectColumn({ title: col.value, toolTip: col.toolTip, width: col.width, cssClass: col.cssClass, headerCssClass: col.headerCssClass, actionOnCheck: checkboxAction - }, index); + }, index)); - this._register(this._checkboxColumns[col.value].onChange((state) => { + this._register(this._checkboxColumns.get(col.value).onChange((state) => { this.fireEvent({ eventType: ComponentEventType.onCellAction, args: {