From e9306b363c0ae833dfdb246bb57af87000e9d462 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Wed, 30 May 2018 23:06:55 -0400 Subject: [PATCH] refactor(example): add 2x grids in the Basic Grid sample --- .../src/examples/slickgrid/example1.html | 22 ++++++++++- .../src/examples/slickgrid/example1.ts | 37 ++++++++++++------- .../src/examples/slickgrid/index.ts | 4 +- 3 files changed, 46 insertions(+), 17 deletions(-) diff --git a/aurelia-slickgrid/src/examples/slickgrid/example1.html b/aurelia-slickgrid/src/examples/slickgrid/example1.html index fa844a358..286467357 100644 --- a/aurelia-slickgrid/src/examples/slickgrid/example1.html +++ b/aurelia-slickgrid/src/examples/slickgrid/example1.html @@ -4,8 +4,26 @@

${title}

- +

Grid 1

+ + + +
+ +

Grid 2

+ diff --git a/aurelia-slickgrid/src/examples/slickgrid/example1.ts b/aurelia-slickgrid/src/examples/slickgrid/example1.ts index 2bae7c5f1..495fc263b 100644 --- a/aurelia-slickgrid/src/examples/slickgrid/example1.ts +++ b/aurelia-slickgrid/src/examples/slickgrid/example1.ts @@ -4,23 +4,27 @@ export class Example1 { title = 'Example 1: Basic Grid'; subTitle = `Simple Grid with Fixed Sizes (800 x 400) using "grid-height" & "grid-width"`; - gridOptions: GridOption; - columnDefinitions: Column[]; - dataset: any[]; + gridOptions1: GridOption; + gridOptions2: GridOption; + columnDefinitions1: Column[]; + columnDefinitions2: Column[]; + dataset1: any[]; + dataset2: any[]; constructor() { // define the grid options & columns and then create the grid itself - this.defineGrid(); + this.defineGrids(); } attached() { - // populate the dataset once the grid is ready - this.getData(); + // mock some data (different in each dataset) + this.dataset1 = this.mockData(); + this.dataset2 = this.mockData(); } /* Define grid Options and Columns */ - defineGrid() { - this.columnDefinitions = [ + defineGrids() { + this.columnDefinitions1 = [ { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100 }, { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100 }, { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100 }, @@ -28,21 +32,26 @@ export class Example1 { { id: 'finish', name: 'Finish', field: 'finish', minWidth: 100 }, { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 } ]; - this.gridOptions = { - enableAutoResize: false + this.gridOptions1 = { + enableAutoResize: false, + enableSorting: true }; + + // copy the same Grid Options and Column Definitions to 2nd grid + this.columnDefinitions2 = this.columnDefinitions1; + this.gridOptions2 = this.gridOptions1; } - getData() { + mockData() { // mock a dataset - this.dataset = []; + const mockDataset = []; for (let i = 0; i < 1000; i++) { const randomYear = 2000 + Math.floor(Math.random() * 10); const randomMonth = Math.floor(Math.random() * 11); const randomDay = Math.floor((Math.random() * 29)); const randomPercent = Math.round(Math.random() * 100); - this.dataset[i] = { + mockDataset[i] = { id: i, title: 'Task ' + i, duration: Math.round(Math.random() * 100) + '', @@ -52,5 +61,7 @@ export class Example1 { effortDriven: (i % 5 === 0) }; } + + return mockDataset; } } diff --git a/aurelia-slickgrid/src/examples/slickgrid/index.ts b/aurelia-slickgrid/src/examples/slickgrid/index.ts index 628871d25..5bd49c0e1 100644 --- a/aurelia-slickgrid/src/examples/slickgrid/index.ts +++ b/aurelia-slickgrid/src/examples/slickgrid/index.ts @@ -7,7 +7,7 @@ export class Index { configureRouter(config: RouterConfiguration, router: Router) { const mapping: any = [ - { route: ['', 'example1'], moduleId: PLATFORM.moduleName('./example1'), name: 'example1', nav: true, title: '1- Basic Grid' }, + { route: ['', 'example1'], moduleId: PLATFORM.moduleName('./example1'), name: 'example1', nav: true, title: '1- Basic Grid / 2 Grids' }, { route: 'example2', moduleId: PLATFORM.moduleName('./example2'), name: 'example2', nav: true, title: '2- Formatters' }, { route: 'example3', moduleId: PLATFORM.moduleName('./example3'), name: 'example3', nav: true, title: '3- Editors' }, { route: 'example4', moduleId: PLATFORM.moduleName('./example4'), name: 'example4', nav: true, title: '4- Client Side Sort/Filter' }, @@ -16,7 +16,7 @@ export class Index { { route: 'example7', moduleId: PLATFORM.moduleName('./example7'), name: 'example7', nav: true, title: '7- Header Button Plugin' }, { route: 'example8', moduleId: PLATFORM.moduleName('./example8'), name: 'example8', nav: true, title: '8- Header Menu Plugin' }, { route: 'example9', moduleId: PLATFORM.moduleName('./example9'), name: 'example9', nav: true, title: '9- Grid Menu Control' }, - { route: 'example10', moduleId: PLATFORM.moduleName('./example10'), name: 'example10', nav: true, title: '10- Row Selection' }, + { route: 'example10', moduleId: PLATFORM.moduleName('./example10'), name: 'example10', nav: true, title: '10- Row Selection / 2 Grids' }, { route: 'example11', moduleId: PLATFORM.moduleName('./example11'), name: 'example11', nav: true, title: '11- Add/Update Grid Item' }, { route: 'example12', moduleId: PLATFORM.moduleName('./example12'), name: 'example12', nav: true, title: '12- Localization (i18n)' }, { route: 'example13', moduleId: PLATFORM.moduleName('./example13'), name: 'example13', nav: true, title: '13- Grouping & Aggregators' },