Skip to content

Commit

Permalink
feat(dataView): add option to apply row selection to all pages (#882)
Browse files Browse the repository at this point in the history
* feat(dataView): add option to apply row selection to all pages
  • Loading branch information
ghiscoding authored Feb 4, 2023
1 parent 9f525e1 commit 4aac7cb
Show file tree
Hide file tree
Showing 28 changed files with 573 additions and 521 deletions.
2 changes: 1 addition & 1 deletion .vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"--runInBand",
"${fileBasename}",
"--config",
"${workspaceFolder}/test/jest.config.js"
"${workspaceFolder}/test/jest.config.ts"
],
"console": "internalConsole",
"internalConsoleOptions": "neverOpen",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -470,7 +470,7 @@ export default class Example11 {
}

remoteCallbackFn(args: { item: any, selectedIds: string[], updateType: 'selection' | 'mass' }) {
const fields: Array<{ fieldName: string; value: any;}> = [];
const fields: Array<{ fieldName: string; value: any; }> = [];
for (const key in args.item) {
if (args.item.hasOwnProperty(key)) {
fields.push({ fieldName: key, value: args.item[key] });
Expand Down Expand Up @@ -675,6 +675,7 @@ export default class Example11 {
this.sgb.gridStateService.resetToOriginalColumns();
this.sgb.filterService.clearFilters();
this.sgb.sortService.clearSorting();
this.sgb.gridService.clearPinning();
}

async updateView(event: DOMEvent<HTMLInputElement>) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export class Example12 {
this._bindingEventService.bind(this.gridContainerElm, 'oncompositeeditorchange', this.handleOnCompositeEditorChange.bind(this));
this._bindingEventService.bind(this.gridContainerElm, 'onpaginationchanged', this.handleReRenderUnsavedStyling.bind(this));
this._bindingEventService.bind(this.gridContainerElm, 'onfilterchanged', this.handleReRenderUnsavedStyling.bind(this));
this._bindingEventService.bind(this.gridContainerElm, 'onselectedrowidschanged', this.handleOnSelectedRowIdsChanged.bind(this));
}

dispose() {
Expand Down Expand Up @@ -433,8 +434,8 @@ export class Example12 {
headerRowHeight: 35,
enableCheckboxSelector: true,
enableRowSelection: true,
multiSelect: false,
checkboxSelector: {
applySelectOnAllPages: true,
hideInFilterHeaderRow: false,
hideInColumnTitleRow: true,
},
Expand Down Expand Up @@ -623,6 +624,12 @@ export class Example12 {
}
}

handleOnSelectedRowIdsChanged(event) {
const args = event?.detail?.args;
// const sortedSelectedIds = args.filteredIds.sort((a, b) => a - b);
console.log('sortedSelectedIds', args.filteredIds.length, args.selectedRowIds.length);
}

toggleGridEditReadonly() {
// first need undo all edits
this.undoAllEdits();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h4 class="title is-4">Container Width (1000px)</h4>
<p class="control">
<button class="button is-small" onclick.delegate="toggleGridEditReadonly()" data-test="toggle-readonly-btn">
<span class="icon mdi mdi-table-edit"></span>
<span>Toggle Edit/Readonly Grid</span>
<span>Toggle Readonly</span>
</button>
</p>
<p class="control">
Expand All @@ -65,6 +65,12 @@ <h4 class="title is-4">Container Width (1000px)</h4>
<span>Save All</span>
</button>
</p>
<p class="control">
<button class="button is-small" onclick.delegate="setSelectedRowIds()" data-test="set-dynamic-rows-btn"
title="Change Row Selection across multiple pages">
<span>Change Row Selection</span>
</button>
</p>
<span class.bind="loadingClass"></span>
</div>
</div>
Expand Down
36 changes: 35 additions & 1 deletion examples/webpack-demo-vanilla-bundle/src/examples/example14.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@ import {
// utilities
formatNumber,
Utilities,
GridStateChange,
} from '@slickgrid-universal/common';
import { ExcelExportService } from '@slickgrid-universal/excel-export';
import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';

import { ExampleGridOptions } from './example-grid-options';
import './example14.scss';

const NB_ITEMS = 5000;
const NB_ITEMS = 400;

// using external SlickGrid JS libraries
declare const Slick: SlickNamespace;
Expand Down Expand Up @@ -122,6 +123,8 @@ export class Example14 {
this._bindingEventService.bind(this.gridContainerElm, 'onpaginationchanged', this.handlePaginationChanged.bind(this));
this._bindingEventService.bind(this.gridContainerElm, 'onbeforeresizebycontent', this.showSpinner.bind(this));
this._bindingEventService.bind(this.gridContainerElm, 'onafterresizebycontent', this.hideSpinner.bind(this));
this._bindingEventService.bind(this.gridContainerElm, 'onselectedrowidschanged', this.handleOnSelectedRowIdsChanged.bind(this));
this._bindingEventService.bind(this.gridContainerElm, 'ongridstatechanged', this.handleOnGridStateChanged.bind(this));
}

dispose() {
Expand Down Expand Up @@ -361,8 +364,14 @@ export class Example14 {
autoResize: {
container: '.grid-container',
resizeDetection: 'container',
minHeight: 250
},
enableAutoResize: true,
enablePagination: true,
pagination: {
pageSize: 10,
pageSizes: [10, 200, 500, 5000]
},

// resizing by cell content is opt-in
// we first need to disable the 2 default flags to autoFit/autosize
Expand All @@ -383,6 +392,7 @@ export class Example14 {
enableRowSelection: true,
enableCheckboxSelector: true,
checkboxSelector: {
applySelectOnAllPages: true, // already defaults to true
hideInFilterHeaderRow: false,
hideInColumnTitleRow: true,
},
Expand Down Expand Up @@ -474,6 +484,12 @@ export class Example14 {
return tmpArray;
}

handleOnGridStateChanged(event) {
// console.log('handleOnGridStateChanged', event?.detail ?? '')
const gridStateChanges: GridStateChange = event?.detail;
console.log('Grid State changed::', gridStateChanges);
}

handleValidationError(event) {
console.log('handleValidationError', event.detail);
const args = event.detail && event.detail.args;
Expand Down Expand Up @@ -545,6 +561,11 @@ export class Example14 {
this.classNewResizeButton = 'button is-small is-selected is-primary';
}

handleOnSelectedRowIdsChanged(event) {
const args = event?.detail?.args ?? {};
console.log('Selected Ids:', args.selectedRowIds);
}

toggleGridEditReadonly() {
// first need undo all edits
this.undoAllEdits();
Expand Down Expand Up @@ -616,6 +637,19 @@ export class Example14 {
this.editedItems = {};
}

// change row selection dynamically and apply it to the DataView and the Grid UI
setSelectedRowIds() {
// change row selection even across multiple pages via DataView
this.sgb.dataView?.setSelectedIds([3, 4, 11]);

// you can also provide optional options (all defaults to true)
// this.sgb.dataView?.setSelectedIds([4, 5, 8, 10], {
// isRowBeingAdded: true,
// shouldTriggerEvent: true,
// applyGridRowSelection: true
// });
}

undoLastEdit(showLastEditor = false) {
const lastEdit = this.editQueue.pop();
const lastEditCommand = lastEdit?.editCommand;
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
"rimraf": "^3.0.2",
"rxjs": "^7.5.7",
"serve": "^14.2.0",
"slickgrid": "^3.0.2",
"slickgrid": "^3.0.3",
"sortablejs": "^1.15.0",
"ts-jest": "^29.0.5",
"ts-node": "^10.9.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/common/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
"jquery": "^3.6.3",
"moment-mini": "^2.29.4",
"multiple-select-modified": "^1.3.17",
"slickgrid": "^3.0.2",
"slickgrid": "^3.0.3",
"sortablejs": "^1.15.0",
"un-flatten-tree": "^2.0.12"
},
Expand Down
Loading

0 comments on commit 4aac7cb

Please sign in to comment.