-
-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/ghiscoding/slickgrid-univ…
- Loading branch information
Showing
60 changed files
with
1,275 additions
and
608 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
examples/vite-demo-vanilla-bundle/src/examples/example19.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <h3 class="title is-3"> | ||
| Example 19 - ExcelCopyBuffer with Cell Selection | ||
| <span class="subtitle">(with Salesforce Theme)</span> | ||
| <div class="subtitle" style="float: right; margin-top: -20px"> | ||
| <span class="is-size-6">see</span> | ||
| <a class="is-size-5" target="_blank" | ||
| href="https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/vite-demo-vanilla-bundle/src/examples/example19.ts"> | ||
| <span class="mdi mdi-link-variant mdi-v-align-sub"></span> code | ||
| </a> | ||
| </div> | ||
| </h3> | ||
|
|
||
| <h5 class="title is-5 mb-3"> | ||
| Grid - using <code>enableExcelCopyBuffer</code> which uses <code>SlickCellSelectionModel</code> | ||
| </h5> | ||
| <h6 class="title is-6"> | ||
| <button class="button is-small is-primary" onclick.delegate="togglePagination()" | ||
| data-text="toggle-pagination-btn"> | ||
| <span class="icon mdi mdi-swap-vertical"></span> | ||
| <span>Toggle Pagination</span> | ||
| </button> | ||
| <label class="ml-3">Range Selection</label> | ||
| <span id="selectionRange"></span> | ||
| </h6> | ||
|
|
||
| <div class="grid19"> | ||
| </div> |
10 changes: 10 additions & 0 deletions
10
examples/vite-demo-vanilla-bundle/src/examples/example19.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** override slick-cell to make it look like Excel sheet */ | ||
| .grid19 { | ||
| --slick-border-color: #d4d4d4; | ||
| --slick-cell-odd-background-color: #fbfbfb; | ||
| --slick-cell-border-left: 1px solid var(--slick-border-color); | ||
| --slick-header-menu-display: none; | ||
| --slick-header-column-height: 20px; | ||
| --slick-grid-border-color: #d4d4d4; | ||
| --slick-row-selected-color: #d4ebfd; | ||
| } |
132 changes: 132 additions & 0 deletions
132
examples/vite-demo-vanilla-bundle/src/examples/example19.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import { CellRange, Column, GridOption, SlickEventHandler, SlickNamespace, } from '@slickgrid-universal/common'; | ||
| import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; | ||
| import { ExampleGridOptions } from './example-grid-options'; | ||
| import '../salesforce-styles.scss'; | ||
| import './example19.scss'; | ||
|
|
||
| const NB_ITEMS = 100; | ||
| declare const Slick: SlickNamespace; | ||
| export default class Example34 { | ||
| protected _eventHandler: SlickEventHandler; | ||
| title = 'Example 19: ExcelCopyBuffer with Cell Selection'; | ||
| subTitle = `Cell Selection using "Shift+{key}" where "key" can be any of: | ||
| <ul> | ||
| <li>Arrow Up/Down/Left/Right</li> | ||
| <li>Page Up/Down</li> | ||
| <li>Home</li> | ||
| <li>End</li> | ||
| </ul>`; | ||
|
|
||
| columnDefinitions: Column[] = []; | ||
| dataset: any[] = []; | ||
| gridOptions!: GridOption; | ||
| gridContainerElm: HTMLDivElement; | ||
| isWithPagination = true; | ||
| sgb: SlickVanillaGridBundle; | ||
|
|
||
| attached() { | ||
| this._eventHandler = new Slick.EventHandler(); | ||
|
|
||
| // define the grid options & columns and then create the grid itself | ||
| this.defineGrid(); | ||
|
|
||
| // mock some data (different in each dataset) | ||
| this.dataset = this.getData(NB_ITEMS); | ||
| this.gridContainerElm = document.querySelector<HTMLDivElement>(`.grid19`) as HTMLDivElement; | ||
| this.sgb = new Slicker.GridBundle(document.querySelector(`.grid19`) as HTMLDivElement, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset); | ||
| document.body.classList.add('salesforce-theme'); | ||
|
|
||
| // bind any of the grid events | ||
| const cellSelectionModel = this.sgb.slickGrid!.getSelectionModel(); | ||
| this._eventHandler.subscribe(cellSelectionModel!.onSelectedRangesChanged, (_e, args: CellRange[]) => { | ||
| const targetRange = document.querySelector('#selectionRange') as HTMLSpanElement; | ||
| targetRange.textContent = ''; | ||
|
|
||
| for (const slickRange of args) { | ||
| targetRange.textContent += JSON.stringify(slickRange); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| dispose() { | ||
| this._eventHandler.unsubscribeAll(); | ||
| this.sgb?.dispose(); | ||
| this.gridContainerElm.remove(); | ||
| document.body.classList.remove('salesforce-theme'); | ||
| } | ||
|
|
||
| /* Define grid Options and Columns */ | ||
| defineGrid() { | ||
| this.columnDefinitions = [ | ||
| { | ||
| id: 'selector', | ||
| name: '', | ||
| field: 'num', | ||
| width: 30 | ||
| } | ||
| ]; | ||
|
|
||
| for (let i = 0; i < NB_ITEMS; i++) { | ||
| this.columnDefinitions.push({ | ||
| id: i, | ||
| name: i < 26 | ||
| ? String.fromCharCode('A'.charCodeAt(0) + (i % 26)) | ||
| : String.fromCharCode('A'.charCodeAt(0) + ((i / 26) | 0) -1) + String.fromCharCode('A'.charCodeAt(0) + (i % 26)), | ||
| field: i as any, | ||
| minWidth: 60, | ||
| width: 60, | ||
| }); | ||
| } | ||
|
|
||
| this.gridOptions = { | ||
| autoResize: { | ||
| container: '.demo-container', | ||
| }, | ||
| enableCellNavigation: true, | ||
| enablePagination: true, | ||
| pagination: { | ||
| pageSizes: [5, 10, 15, 20, 25, 50, 75, 100], | ||
| pageSize: 20 | ||
| }, | ||
| headerRowHeight: 35, | ||
| rowHeight: 30, | ||
|
|
||
| // when using the ExcelCopyBuffer, you can see what the selection range is | ||
| enableExcelCopyBuffer: true, | ||
| // excelCopyBufferOptions: { | ||
| // onCopyCells: (e, args: { ranges: SelectedRange[] }) => console.log('onCopyCells', args.ranges), | ||
| // onPasteCells: (e, args: { ranges: SelectedRange[] }) => console.log('onPasteCells', args.ranges), | ||
| // onCopyCancelled: (e, args: { ranges: SelectedRange[] }) => console.log('onCopyCancelled', args.ranges), | ||
| // } | ||
| }; | ||
| } | ||
|
|
||
| getData(itemCount: number) { | ||
| // mock a dataset | ||
| const datasetTmp: any[] = []; | ||
| for (let i = 0; i < itemCount; i++) { | ||
| const d: any = (datasetTmp[i] = {}); | ||
| d['id'] = i; | ||
| d['num'] = i; | ||
| } | ||
|
|
||
| return datasetTmp; | ||
| } | ||
|
|
||
| generatePhoneNumber(): string { | ||
| let phone = ''; | ||
| for (let i = 0; i < 10; i++) { | ||
| phone += Math.round(Math.random() * 9) + ''; | ||
| } | ||
| return phone; | ||
| } | ||
|
|
||
| // Toggle the Grid Pagination | ||
| // IMPORTANT, the Pagination MUST BE CREATED on initial page load before you can start toggling it | ||
| // Basically you cannot toggle a Pagination that doesn't exist (must created at the time as the grid) | ||
| togglePagination() { | ||
| this.isWithPagination = !this.isWithPagination; | ||
| this.sgb.paginationService!.togglePaginationVisibility(this.isWithPagination); | ||
| this.sgb.slickGrid!.setSelectedRows([]); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.