Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit 48a0abb

Browse files
Ghislain BeaulacGhislain Beaulac
Ghislain Beaulac
authored and
Ghislain Beaulac
committed
feat(examples): add ngx-bootstrap tabs example, closes #219
1 parent 812554e commit 48a0abb

File tree

6 files changed

+255
-103
lines changed

6 files changed

+255
-103
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@
133133
"mochawesome-merge": "^1.0.7",
134134
"mochawesome-report-generator": "^3.1.5",
135135
"ng-packagr": "^5.2.0",
136+
"ngx-bootstrap": "^4.3.0",
136137
"node-sass": "^4.12.0",
137138
"npm-run-all": "^4.1.5",
138139
"postcss-cli": "^6.0.1",

‎src/app/app-routing.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { GridRowDetailComponent } from './examples/grid-rowdetail.component';
2121
import { GridRowMoveComponent } from './examples/grid-rowmove.component';
2222
import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
2323
import { GridStateComponent } from './examples/grid-state.component';
24+
import { GridTabsComponent } from './examples/grid-tabs.component';
2425
import { SwtCommonGridTestComponent } from './examples/swt-common-grid-test.component';
2526

2627
import { NgModule } from '@angular/core';
@@ -42,6 +43,7 @@ const routes: Routes = [
4243
{ path: 'gridgraphql', component: GridGraphqlComponent },
4344
{ path: 'gridmenu', component: GridMenuComponent },
4445
{ path: 'gridstate', component: GridStateComponent },
46+
{ path: 'gridtabs', component: GridTabsComponent },
4547
{ path: 'draggrouping', component: GridDraggableGroupingComponent },
4648
{ path: 'grouping', component: GridGroupingComponent },
4749
{ path: 'localization', component: GridLocalizationComponent },

‎src/app/app.component.html

Lines changed: 107 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,114 @@
11
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
2-
<div class="navbar-header">
3-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" menu-collapse>
4-
<span class="icon-bar"></span>
5-
<span class="icon-bar"></span>
6-
<span class="icon-bar"></span>
7-
</button>
8-
<a class="navbar-brand" href="https://github.com/ghiscoding/Angular-Slickgrid">
9-
<i class="fa fa-github"></i>
10-
<span>{{title}}</span>
2+
<div class="navbar-header">
3+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" menu-collapse>
4+
<span class="icon-bar"></span>
5+
<span class="icon-bar"></span>
6+
<span class="icon-bar"></span>
7+
</button>
8+
<a class="navbar-brand" href="https://github.com/ghiscoding/Angular-Slickgrid">
9+
<i class="fa fa-github"></i>
10+
<span>{{title}}</span>
11+
</a>
12+
<span style="position: relative; top: 15px">
13+
<iframe allowtransparency="true" scrolling="no" frameborder="0"
14+
src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fi.8713187.xyz%2Fghiscoding%2FAngular-Slickgrid&amp;aria-label=Star%20ghiscoding%2FAngular-Slickgrid%20on%20GitHub&amp;data-icon=octicon-star&amp;data-text=Star&amp;data-show-count=true"
15+
style="width: 90px; height: 20px; border: none;"></iframe>
16+
</span>
17+
</div>
18+
<div class="navbar-collapse collapse">
19+
<ul class="nav navbar-nav">
20+
<li>
21+
<a [routerLink]="['/home']">
22+
<i class="fa fa-lg fa-home"></i> Home
1123
</a>
12-
<span style="position: relative; top: 15px">
13-
<iframe allowtransparency="true" scrolling="no" frameborder="0" src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fi.8713187.xyz%2Fghiscoding%2FAngular-Slickgrid&amp;aria-label=Star%20ghiscoding%2FAngular-Slickgrid%20on%20GitHub&amp;data-icon=octicon-star&amp;data-text=Star&amp;data-show-count=true"
14-
style="width: 90px; height: 20px; border: none;"></iframe>
15-
</span>
16-
</div>
17-
<div class="navbar-collapse collapse">
18-
<ul class="nav navbar-nav">
19-
<li>
20-
<a [routerLink]="['/home']">
21-
<i class="fa fa-lg fa-home"></i> Home
22-
</a>
23-
</li>
24-
</ul>
25-
</div>
24+
</li>
25+
</ul>
26+
</div>
2627
</nav>
2728

2829
<div class="container-fluid">
29-
<div class="panel-wm">
30-
<section id="panel-left" class="panel-wm-left">
31-
<ul class="nav nav-pills nav-stacked">
32-
<li routerLinkActive="active">
33-
<a [routerLink]="['/basic']">1- Basic Grid / 2 Grids</a>
34-
</li>
35-
<li routerLinkActive="active">
36-
<a [routerLink]="['/formatter']">2- Formatters</a>
37-
</li>
38-
<li routerLinkActive="active">
39-
<a [routerLink]="['/editor']">3- Editors</a>
40-
</li>
41-
<li routerLinkActive="active">
42-
<a [routerLink]="['/clientside']">4- Client Side Sort/Filter</a>
43-
</li>
44-
<li routerLinkActive="active">
45-
<a [routerLink]="['/odata']">5- Backend Server with OData</a>
46-
</li>
47-
<li routerLinkActive="active">
48-
<a [routerLink]="['/gridgraphql']">6- Backend Server with GraphQL</a>
49-
</li>
50-
<li routerLinkActive="active">
51-
<a [routerLink]="['/headerbutton']">7- Header Button Plugin</a>
52-
</li>
53-
<li routerLinkActive="active">
54-
<a [routerLink]="['/headermenu']">8- Header Menu Plugin</a>
55-
</li>
56-
<li routerLinkActive="active">
57-
<a [routerLink]="['/gridmenu']">9- Grid Menu (hamburger menu)</a>
58-
</li>
59-
<li routerLinkActive="active">
60-
<a [routerLink]="['/selection']">10- Row Selection / 2 Grids</a>
61-
</li>
62-
<li routerLinkActive="active">
63-
<a [routerLink]="['/additem']">11- Add/Update Grid Item</a>
64-
</li>
65-
<li routerLinkActive="active">
66-
<a [routerLink]="['/localization']">12- Localization (i18n)</a>
67-
</li>
68-
<li routerLinkActive="active">
69-
<a [routerLink]="['/swt']">13- Backend Server Custom Paging</a>
70-
</li>
71-
<li routerLinkActive="active">
72-
<a [routerLink]="['/grouping']">14- Grouping &amp; Aggregator</a>
73-
</li>
74-
<li routerLinkActive="active">
75-
<a [routerLink]="['/colspan']">15- Column Span</a>
76-
</li>
77-
<li routerLinkActive="active">
78-
<a [routerLink]="['/gridstate']">16- Grid State &amp; Local Storage</a>
79-
</li>
80-
<li routerLinkActive="active">
81-
<a [routerLink]="['/rowmove']">17- Row Move</a>
82-
</li>
83-
<li routerLinkActive="active">
84-
<a [routerLink]="['/remote']">18- Remote Model</a>
85-
</li>
86-
<li routerLinkActive="active">
87-
<a [routerLink]="['/draggrouping']">19- Draggable Grouping</a>
88-
</li>
89-
<li routerLinkActive="active">
90-
<a [routerLink]="['/frozen']">20- Pinned Columns/Rows</a>
91-
</li>
92-
<li routerLinkActive="active">
93-
<a [routerLink]="['/rowdetail']">21- Row Detail View</a>
94-
</li>
95-
<li routerLinkActive="active">
96-
<a [routerLink]="['/angular-components']">22- Use of Angular Components</a>
97-
</li>
98-
<li routerLinkActive="active">
99-
<a [routerLink]="['/autoheight']">23- Grid AutoHeight (full height)</a>
100-
</li>
101-
</ul>
102-
</section>
30+
<div class="panel-wm">
31+
<section id="panel-left" class="panel-wm-left">
32+
<ul class="nav nav-pills nav-stacked">
33+
<li routerLinkActive="active">
34+
<a [routerLink]="['/basic']">1- Basic Grid / 2 Grids</a>
35+
</li>
36+
<li routerLinkActive="active">
37+
<a [routerLink]="['/formatter']">2- Formatters</a>
38+
</li>
39+
<li routerLinkActive="active">
40+
<a [routerLink]="['/editor']">3- Editors</a>
41+
</li>
42+
<li routerLinkActive="active">
43+
<a [routerLink]="['/clientside']">4- Client Side Sort/Filter</a>
44+
</li>
45+
<li routerLinkActive="active">
46+
<a [routerLink]="['/odata']">5- Backend Server with OData</a>
47+
</li>
48+
<li routerLinkActive="active">
49+
<a [routerLink]="['/gridgraphql']">6- Backend Server with GraphQL</a>
50+
</li>
51+
<li routerLinkActive="active">
52+
<a [routerLink]="['/headerbutton']">7- Header Button Plugin</a>
53+
</li>
54+
<li routerLinkActive="active">
55+
<a [routerLink]="['/headermenu']">8- Header Menu Plugin</a>
56+
</li>
57+
<li routerLinkActive="active">
58+
<a [routerLink]="['/gridmenu']">9- Grid Menu (hamburger menu)</a>
59+
</li>
60+
<li routerLinkActive="active">
61+
<a [routerLink]="['/selection']">10- Row Selection / 2 Grids</a>
62+
</li>
63+
<li routerLinkActive="active">
64+
<a [routerLink]="['/additem']">11- Add/Update Grid Item</a>
65+
</li>
66+
<li routerLinkActive="active">
67+
<a [routerLink]="['/localization']">12- Localization (i18n)</a>
68+
</li>
69+
<li routerLinkActive="active">
70+
<a [routerLink]="['/swt']">13- Backend Server Custom Paging</a>
71+
</li>
72+
<li routerLinkActive="active">
73+
<a [routerLink]="['/grouping']">14- Grouping &amp; Aggregator</a>
74+
</li>
75+
<li routerLinkActive="active">
76+
<a [routerLink]="['/colspan']">15- Column Span</a>
77+
</li>
78+
<li routerLinkActive="active">
79+
<a [routerLink]="['/gridstate']">16- Grid State &amp; Local Storage</a>
80+
</li>
81+
<li routerLinkActive="active">
82+
<a [routerLink]="['/rowmove']">17- Row Move</a>
83+
</li>
84+
<li routerLinkActive="active">
85+
<a [routerLink]="['/remote']">18- Remote Model</a>
86+
</li>
87+
<li routerLinkActive="active">
88+
<a [routerLink]="['/draggrouping']">19- Draggable Grouping</a>
89+
</li>
90+
<li routerLinkActive="active">
91+
<a [routerLink]="['/frozen']">20- Pinned Columns/Rows</a>
92+
</li>
93+
<li routerLinkActive="active">
94+
<a [routerLink]="['/rowdetail']">21- Row Detail View</a>
95+
</li>
96+
<li routerLinkActive="active">
97+
<a [routerLink]="['/angular-components']">22- Use of Angular Components</a>
98+
</li>
99+
<li routerLinkActive="active">
100+
<a [routerLink]="['/autoheight']">23- Grid AutoHeight (full height)</a>
101+
</li>
102+
<li routerLinkActive="active">
103+
<a [routerLink]="['/gridtabs']">24- within Bootstrap Tabs</a>
104+
</li>
105+
</ul>
106+
</section>
103107

104-
<section class="panel-wm-content">
105-
<div id="demo-container">
106-
<router-outlet></router-outlet>
107-
</div>
108-
</section>
109-
</div>
108+
<section class="panel-wm-content">
109+
<div id="demo-container">
110+
<router-outlet></router-outlet>
111+
</div>
112+
</section>
113+
</div>
110114
</div>

‎src/app/app.module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
55
import { Injector, APP_INITIALIZER, NgModule } from '@angular/core';
66
import { LOCATION_INITIALIZED } from '@angular/common';
77
import { NgSelectModule } from '@ng-select/ng-select';
8+
import { TabsModule } from 'ngx-bootstrap/tabs';
89
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
910
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
1011

@@ -34,6 +35,7 @@ import { GridRowDetailComponent } from './examples/grid-rowdetail.component';
3435
import { GridRowMoveComponent } from './examples/grid-rowmove.component';
3536
import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
3637
import { GridStateComponent } from './examples/grid-state.component';
38+
import { GridTabsComponent } from './examples/grid-tabs.component';
3739
import { HomeComponent } from './examples/home.component';
3840
import { RowDetailPreloadComponent } from './examples/rowdetail-preload.component';
3941
import { RowDetailViewComponent } from './examples/rowdetail-view.component';
@@ -99,6 +101,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
99101
GridRowMoveComponent,
100102
GridRowSelectionComponent,
101103
GridStateComponent,
104+
GridTabsComponent,
102105
RowDetailPreloadComponent,
103106
RowDetailViewComponent,
104107
SwtCommonGridTestComponent,
@@ -112,6 +115,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
112115
FormsModule,
113116
HttpClientModule,
114117
NgSelectModule,
118+
TabsModule.forRoot(),
115119
TranslateModule.forRoot({
116120
loader: {
117121
provide: TranslateLoader,

‎src/app/examples/grid-tabs.component.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div class="container-fluid">
2+
<h2>{{title}}</h2>
3+
<div class="subtitle" [innerHTML]="subTitle"></div>
4+
5+
<div>
6+
<tabset>
7+
<tab heading="Javascript" id="javascript">
8+
<h4>Grid 1 - Load Local Data</h4>
9+
<angular-slickgrid gridId="grid1"
10+
[columnDefinitions]="columnDefinitions1"
11+
[gridOptions]="gridOptions1"
12+
[dataset]="dataset1">
13+
</angular-slickgrid>
14+
</tab>
15+
<tab heading="Http-Client" (selectTab)="resizeGrid2()">
16+
<h4>Grid 2 - Load a JSON dataset through Http-Client</h4>
17+
<angular-slickgrid gridId="grid2"
18+
[columnDefinitions]="columnDefinitions2"
19+
[gridOptions]="gridOptions2"
20+
[dataset]="dataset2"
21+
(onAngularGridCreated)="angularGrid2Ready($event)">
22+
</angular-slickgrid>
23+
</tab>
24+
</tabset>
25+
</div>
26+
</div>

0 commit comments

Comments
 (0)