feat(example): add Bootstrap Tabs example

src/examples/slickgrid/example22.html

@@ -0,0 +1,54 @@
+<template>
+  <h2>${title}</h2>
+  <div class="subtitle"
+       innerhtml.bind="subTitle"></div>
+
+  <div>
+
+    <!-- Nav tabs -->
+    <ul class="nav nav-tabs"
+        role="tablist">
+      <li role="presentation"
+          class="active">
+        <a href="#javascript"
+           aria-controls="javascript"
+           role="tab"
+           data-toggle="tab">Javascript</a>
+      </li>
+      <li role="presentation">
+        <a href="#httpFetch"
+           aria-controls="httpFetch"
+           role="tab"
+           click.delegate="resizeGrid2()"
+           data-toggle="tab">Http-Fetch</a>
+      </li>
+    </ul>
+
+    <!-- Tab panes -->
+    <div class="tab-content">
+      <div role="tabpanel"
+           class="tab-pane active"
+           id="javascript">
+        <h4>Grid 1 - Load Local Data</h4>
+        <aurelia-slickgrid grid-id="grid1"
+                           column-definitions.bind="columnDefinitions1"
+                           grid-options.bind="gridOptions1"
+                           dataset.bind="dataset1">
+        </aurelia-slickgrid>
+      </div>
+      <div role="tabpanel"
+           class="tab-pane"
+           id="httpFetch">
+        <h4>Grid 2 - Load a JSON dataset through Fetch-Client</h4>
+        <aurelia-slickgrid grid-id="grid2"
+                           column-definitions.bind="columnDefinitions2"
+                           grid-options.bind="gridOptions2"
+                           dataset.bind="dataset2"
+                           asg-on-aurelia-grid-created.delegate="aureliaGrid2Ready($event.detail)">
+        </aurelia-slickgrid>
+      </div>
+    </div>
+
+  </div>
+
+</template>

src/examples/slickgrid/example22.ts

@@ -0,0 +1,116 @@
+import { autoinject } from 'aurelia-framework';
+import { HttpClient } from 'aurelia-fetch-client';
+import { AureliaGridInstance, Column, Filters, GridOption } from '../../aurelia-slickgrid';
+
+const URL_CUSTOMERS = 'src/examples/slickgrid/sample-data/customers_100.json';
+
+@autoinject()
+export class Example22 {
+  title = 'Example 22: Grids in Bootstrap Tabs';
+  subTitle = `This example demonstrate the creation of multiple grids in Bootstrap Tabs
+   <ol>
+    <li>Regular mocked data with javascript</li>
+    <li>Load dataset through Fetch-Client. Also note we need to call a "resizeGrid()" after focusing on this tab</li>
+  </ol>`;
+
+  aureliaGrid2: AureliaGridInstance;
+  gridOptions1: GridOption;
+  gridOptions2: GridOption;
+  columnDefinitions1: Column[];
+  columnDefinitions2: Column[];
+  dataset1: any[];
+  dataset2: any[];
+
+  constructor(private http: HttpClient) {
+    // define the grid options & columns and then create the grid itself
+    this.defineGrid1();
+    this.defineGrid2();
+  }
+
+  aureliaGrid2Ready(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid2 = aureliaGrid;
+  }
+
+  async attached() {
+    // mock some data with JavaScript
+    this.dataset1 = this.mockData();
+
+    // load data with Fetch-Client
+    const response2 = await this.http.fetch(URL_CUSTOMERS);
+    this.dataset2 = await response2['json']();
+  }
+
+  // Grid2 definition
+  defineGrid1() {
+    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 },
+      { id: 'start', name: 'Start', field: 'start', minWidth: 100 },
+      { id: 'finish', name: 'Finish', field: 'finish', minWidth: 100 },
+      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 }
+    ];
+    this.gridOptions1 = {
+      enableAutoResize: true,
+      autoResize: {
+        containerId: 'demo-container',
+        sidePadding: 15
+      },
+      enableSorting: true
+    };
+
+  }
+
+  // Grid2 definition
+  defineGrid2() {
+    this.columnDefinitions2 = [
+      { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true, },
+      {
+        id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true,
+        filter: {
+          model: Filters.singleSelect,
+          collection: [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }]
+        }
+      },
+      { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true }
+    ];
+
+    this.gridOptions2 = {
+      enableAutoResize: true,
+      autoResize: {
+        containerId: 'demo-container',
+        sidePadding: 15
+      },
+      enableFiltering: true,
+      enableSorting: true
+    };
+
+  }
+
+  mockData() {
+    // mock a 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);
+
+      mockDataset[i] = {
+        id: i,
+        title: 'Task ' + i,
+        duration: Math.round(Math.random() * 100) + '',
+        percentComplete: randomPercent,
+        start: `${randomMonth}/${randomDay}/${randomYear}`,
+        finish: `${randomMonth}/${randomDay}/${randomYear}`,
+        effortDriven: (i % 5 === 0)
+      };
+    }
+
+    return mockDataset;
+  }
+
+  resizeGrid2() {
+    this.aureliaGrid2.resizerService.resizeGrid();
+  }
+}

src/examples/slickgrid/index.ts

@@ -28,6 +28,7 @@ export class Index {
       { route: 'example19', moduleId: PLATFORM.moduleName('./example19'), name: 'example19', nav: true, title: '19- Row Detail View' },
       { route: 'example20', moduleId: PLATFORM.moduleName('./example20'), name: 'example20', nav: true, title: '20- Pinned Columns/Rows' },
       { route: 'example21', moduleId: PLATFORM.moduleName('./example21'), name: 'example21', nav: true, title: '21- Grid AutoHeight (full height)' },
+      { route: 'example22', moduleId: PLATFORM.moduleName('./example22'), name: 'example22', nav: true, title: '22- within Bootstrap Tabs' },
     ];
 
     config.map(mapping);