From 7d7c644b0ecc8c3b61dd706d37d31edd0cf92fca Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Tue, 24 Mar 2020 20:01:49 -0400 Subject: [PATCH] feat(examples): add more Tree View with checkbox selector code --- .../interfaces/checkboxSelector.interface.ts | 3 + packages/vanilla-bundle-examples/src/app.html | 6 +- packages/vanilla-bundle-examples/src/app.ts | 4 +- .../src/examples/example02.ts | 6 +- .../{example04.html => example03.html} | 4 +- .../{example04.scss => example03.scss} | 0 .../examples/{example04.ts => example03.ts} | 75 +------------------ .../vanilla-bundle/src/vanilla-grid-bundle.ts | 29 ++++--- 8 files changed, 28 insertions(+), 99 deletions(-) rename packages/vanilla-bundle-examples/src/examples/{example04.html => example03.html} (93%) rename packages/vanilla-bundle-examples/src/examples/{example04.scss => example03.scss} (100%) rename packages/vanilla-bundle-examples/src/examples/{example04.ts => example03.ts} (81%) diff --git a/packages/common/src/interfaces/checkboxSelector.interface.ts b/packages/common/src/interfaces/checkboxSelector.interface.ts index bca8340f1..1e02a2050 100644 --- a/packages/common/src/interfaces/checkboxSelector.interface.ts +++ b/packages/common/src/interfaces/checkboxSelector.interface.ts @@ -2,6 +2,9 @@ export interface CheckboxSelector { /** Defaults to "_checkbox_selector", you can provide a different column id used as the column header id */ columnId?: string; + /** Defaults to 0, the column index position in the grid by default it will show as the first column (index 0) */ + columnIndexPosition?: number; + /** Provide a CSS class used by each row selection check boxes */ cssClass?: string; diff --git a/packages/vanilla-bundle-examples/src/app.html b/packages/vanilla-bundle-examples/src/app.html index bb9bb66a9..ea545bd74 100644 --- a/packages/vanilla-bundle-examples/src/app.html +++ b/packages/vanilla-bundle-examples/src/app.html @@ -35,9 +35,9 @@

Slickgrid-Universal

Example01 - Editors Example02 - Draggable Grouping - Example03 - Grouping & Aggregators - Example04 - Tree View - Example05 - SF Tree View + Example03 - Tree View + Example50 - SE Grouping & Aggregators + Example51 - SE Tree View
diff --git a/packages/vanilla-bundle-examples/src/app.ts b/packages/vanilla-bundle-examples/src/app.ts index 99e2944b7..d6fa822c0 100644 --- a/packages/vanilla-bundle-examples/src/app.ts +++ b/packages/vanilla-bundle-examples/src/app.ts @@ -10,8 +10,8 @@ export class App { { route: 'example01', name: 'example01', title: 'Example01', moduleId: './examples/example01' }, { route: 'example02', name: 'example02', title: 'Example02', moduleId: './examples/example02' }, { route: 'example03', name: 'example03', title: 'Example03', moduleId: './examples/example03' }, - { route: 'example04', name: 'example04', title: 'Example04', moduleId: './examples/example04' }, - { route: 'example05', name: 'example05', title: 'Example05', moduleId: './examples/example05' }, + { route: 'example50', name: 'example50', title: 'Example50', moduleId: './examples/example50' }, + { route: 'example51', name: 'example51', title: 'Example51', moduleId: './examples/example51' }, ] attached() { diff --git a/packages/vanilla-bundle-examples/src/examples/example02.ts b/packages/vanilla-bundle-examples/src/examples/example02.ts index 5ba5f0314..6010348d8 100644 --- a/packages/vanilla-bundle-examples/src/examples/example02.ts +++ b/packages/vanilla-bundle-examples/src/examples/example02.ts @@ -19,8 +19,6 @@ const myCustomTitleValidator = (value, args) => { }; export class Example2 { - gridClass; - gridClassName; columnDefinitions: Column[]; gridOptions: GridOption; dataset; @@ -38,7 +36,7 @@ export class Example2 { const gridContainerElm = document.querySelector(`.grid2`); const gridElm = document.querySelector(`.slickgrid-container`); - // gridContainerElm.addEventListener('onclick', handleOnClick); + gridContainerElm.addEventListener('onclick', this.handleOnClick.bind(this)); gridContainerElm.addEventListener('onvalidationerror', this.handleValidationError.bind(this)); gridContainerElm.addEventListener('onitemdeleted', this.handleItemDeleted.bind(this)); gridContainerElm.addEventListener('onslickergridcreated', this.handleOnSlickerGridCreated.bind(this)); @@ -60,7 +58,7 @@ export class Example2 { { id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true, editor: { - model: Slicker.Editors.text, + model: Slicker.Editors.integer, required: true, alwaysSaveOnEnterKey: true, }, diff --git a/packages/vanilla-bundle-examples/src/examples/example04.html b/packages/vanilla-bundle-examples/src/examples/example03.html similarity index 93% rename from packages/vanilla-bundle-examples/src/examples/example04.html rename to packages/vanilla-bundle-examples/src/examples/example03.html index d825fa055..a92ee631f 100644 --- a/packages/vanilla-bundle-examples/src/examples/example04.html +++ b/packages/vanilla-bundle-examples/src/examples/example03.html @@ -1,4 +1,4 @@ -

Example 04 - Tree View

+

Example 03 - Tree View

-
+
diff --git a/packages/vanilla-bundle-examples/src/examples/example04.scss b/packages/vanilla-bundle-examples/src/examples/example03.scss similarity index 100% rename from packages/vanilla-bundle-examples/src/examples/example04.scss rename to packages/vanilla-bundle-examples/src/examples/example03.scss diff --git a/packages/vanilla-bundle-examples/src/examples/example04.ts b/packages/vanilla-bundle-examples/src/examples/example03.ts similarity index 81% rename from packages/vanilla-bundle-examples/src/examples/example04.ts rename to packages/vanilla-bundle-examples/src/examples/example03.ts index 6638944b9..07e0f022d 100644 --- a/packages/vanilla-bundle-examples/src/examples/example04.ts +++ b/packages/vanilla-bundle-examples/src/examples/example03.ts @@ -1,10 +1,8 @@ import { Column, GridOption } from '@slickgrid-universal/common'; import { Slicker } from '@slickgrid-universal/vanilla-bundle'; -import './example04.scss'; +import './example03.scss'; export class Example4 { - gridClass; - gridClassName; _commandQueue = []; columnDefinitions: Column[]; gridOptions: GridOption; @@ -22,7 +20,7 @@ export class Example4 { attached() { this.initializeGrid(); this.dataset = []; - const gridContainerElm = document.querySelector('.grid3'); + const gridContainerElm = document.querySelector('.grid4'); const gridElm = document.querySelector('.slickgrid-container'); gridContainerElm.addEventListener('onclick', this.handleOnClick.bind(this)); @@ -36,7 +34,6 @@ export class Example4 { this.dataViewObj.setFilter(this.myFilter.bind(this)); this.dataset = this.mockDataset(); this.slickgridLwc.dataset = this.dataset; - } initializeGrid() { @@ -58,20 +55,6 @@ export class Example4 { }, enableAutoSizeColumns: true, enableAutoResize: true, - // enableCellNavigation: true, - enableGrouping: true, - enableRowSelection: true, - // enableCheckboxSelector: true, - formatterOptions: { - minDecimal: 0, - maxDecimal: 2, - thousandSeparator: ',' - }, - rowSelectionOptions: { - selectActiveRow: false // False for Multiple Selections - }, - sanitizer: (dirtyHtml) => (dirtyHtml.replace(/(\b)(on\S+)(\s*)=|javascript|(<\s*)(\/*)script/gi, '')), - enableSorting: true, headerRowHeight: 45, rowHeight: 45, editCommandHandler: (item, column, editCommand) => { @@ -131,60 +114,6 @@ export class Example4 { return true; } - customBlankFormatter() { - return ''; - } - - customAceGroupingFormatter(totals, columnDef) { - const hasAce = totals.clone && totals.clone[columnDef.field]; - return !hasAce ? '' : ''; - } - - customCheckmarGroupingFormatter(totals, columnDef) { - const hasCheckmark = totals.clone && totals.clone[columnDef.field]; - return !hasCheckmark ? '' : ''; - } - - customQuantityGroupingFormatter(totals, columnDef) { - return totals.min && totals.min[columnDef.field] || ''; - } - - customLineTypeGroupingFormatter(totals, columnDef) { - const val = totals.clone && totals.clone[columnDef.field]; - let output = ''; - switch (val) { - case 'Profiled': - output = ``; - break; - case 'Selector': - output = ``; - break; - default: - output = ''; - break; - } - return output; - } - - customTranslationTypeGroupingFormatter(totals, columnDef) { - const val = totals.clone && totals.clone[columnDef.field]; - let output = ''; - switch (val) { - case 'Drawing': - output = ``; - break; - default: - output = ''; - break; - } - return output; - } - - customProductGroupingFormatter(totals, columnDef) { - const val = totals.clone && totals.clone['productGroup']; - return val ? `${val}` : ''; - } - addNewRow() { const id = this.dataset.length; const newIndent = 1; diff --git a/packages/vanilla-bundle/src/vanilla-grid-bundle.ts b/packages/vanilla-bundle/src/vanilla-grid-bundle.ts index 605fc1c1f..36e77377c 100644 --- a/packages/vanilla-bundle/src/vanilla-grid-bundle.ts +++ b/packages/vanilla-bundle/src/vanilla-grid-bundle.ts @@ -122,9 +122,9 @@ export class VanillaGridBundle { this.refreshGridData(dataset); } - constructor(gridContainerElm: Element, columnDefs: Column[], options: GridOption, dataset?: any[]) { - this._columnDefinitions = columnDefs; - this._gridOptions = options; + constructor(gridContainerElm: Element, columnDefs?: Column[], options?: GridOption, dataset?: any[]) { + this._columnDefinitions = columnDefs || []; + this._gridOptions = options || {}; this.dataset = dataset || []; this._eventPubSubService = new EventPubSubService(gridContainerElm); @@ -174,7 +174,7 @@ export class VanillaGridBundle { dispose() { this.dataView = undefined; - this.gridOptions = {}; + this._gridOptions = {}; this.extensionService.dispose(); this.filterService.dispose(); // this.gridEventService.dispose(); @@ -200,7 +200,7 @@ export class VanillaGridBundle { gridContainerElm.appendChild(this._gridElm); this._gridOptions = this.mergeGridOptions(this._gridOptions); - this.backendServiceApi = this.gridOptions && this.gridOptions.backendServiceApi; + this.backendServiceApi = this._gridOptions && this._gridOptions.backendServiceApi; this._isLocalGrid = !this.backendServiceApi; // considered a local grid if it doesn't have a backend service set this._eventPubSubService.eventNamingStyle = this._gridOptions && this._gridOptions.eventNamingStyle || EventNamingStyle.camelCase; this._eventHandler = new Slick.EventHandler(); @@ -244,7 +244,7 @@ export class VanillaGridBundle { this.gridService.init(this.grid, this.dataView); if (this._dataset.length > 0) { - // if (!this._isDatasetInitialized && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection)) { + // if (!this._isDatasetInitialized && (this._gridOptions.enableCheckboxSelector || this._gridOptions.enableRowSelection)) { // this.loadRowSelectionPresetWhenExists(); // } this._isDatasetInitialized = true; @@ -269,7 +269,7 @@ export class VanillaGridBundle { slickGrid: this.grid, // return all available Services (non-singleton) - backendService: this.gridOptions && this.gridOptions.backendServiceApi && this.gridOptions.backendServiceApi.service, + backendService: this._gridOptions && this._gridOptions.backendServiceApi && this._gridOptions.backendServiceApi.service, // excelExportService: this.excelExportService, // exportService: this.exportService, filterService: this.filterService, @@ -280,7 +280,7 @@ export class VanillaGridBundle { extensionService: this.extensionService, // paginationService: this.paginationService, sortService: this.sortService, - } + }; this._eventPubSubService.publish('onSlickerGridCreated', slickerElementInstance); } @@ -406,7 +406,7 @@ export class VanillaGridBundle { // local grid, check if we need to show the Pagination // if so then also check if there's any presets and finally initialize the PaginationService // a local grid with Pagination presets will potentially have a different total of items, we'll need to get it from the DataView and update our total - // if (this.gridOptions && this.gridOptions.enablePagination && this._isLocalGrid) { + // if (this._gridOptions && this._gridOptions.enablePagination && this._isLocalGrid) { // this.showPagination = true; // this.loadLocalGridPagination(dataset); // } @@ -418,7 +418,7 @@ export class VanillaGridBundle { } if (dataset.length > 0) { - // if (!this._isDatasetInitialized && this.gridOptions.enableCheckboxSelector) { + // if (!this._isDatasetInitialized && this._gridOptions.enableCheckboxSelector) { // this.loadRowSelectionPresetWhenExists(); // } this._isDatasetInitialized = true; @@ -430,14 +430,14 @@ export class VanillaGridBundle { } // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly - // this.showPagination = (this.gridOptions && (this.gridOptions.enablePagination || (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined))) ? true : false; + // this.showPagination = (this._gridOptions && (this._gridOptions.enablePagination || (this._gridOptions.backendServiceApi && this._gridOptions.enablePagination === undefined))) ? true : false; - // if (this.gridOptions && this.gridOptions.backendServiceApi && this.gridOptions.pagination && this.paginationOptions) { - // const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this.gridOptions, this.paginationOptions); + // if (this._gridOptions && this._gridOptions.backendServiceApi && this._gridOptions.pagination && this.paginationOptions) { + // const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this._gridOptions, this.paginationOptions); // // when we have a totalCount use it, else we'll take it from the pagination object // // only update the total items if it's different to avoid refreshing the UI - // const totalRecords = (totalCount !== undefined) ? totalCount : (this.gridOptions && this.gridOptions.pagination && this.gridOptions.pagination.totalItems); + // const totalRecords = (totalCount !== undefined) ? totalCount : (this._gridOptions && this._gridOptions.pagination && this._gridOptions.pagination.totalItems); // if (totalRecords !== undefined && totalRecords !== this.totalItems) { // this.totalItems = +totalRecords; // } @@ -465,7 +465,6 @@ export class VanillaGridBundle { */ updateColumnDefinitionsList(newColumnDefinitions: Column[]) { // map/swap the internal library Editor to the SlickGrid Editor factory - // console.log('newColumnDefinitions', newColumnDefinitions) newColumnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(newColumnDefinitions); if (this._gridOptions.enableTranslate) { this.extensionService.translateColumnHeaders(false, newColumnDefinitions);