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

Commit 726678b

Browse files
Ghislain BeaulacGhislain Beaulac
Ghislain Beaulac
authored and
Ghislain Beaulac
committed
Add Checkbox Selector Plugin with sample. Fixed some styling as well
1 parent 4a05a16 commit 726678b

16 files changed

+310
-94
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
13
import { GridMenuComponent } from './examples/grid-menu.component';
24
import { GridBasicComponent } from './examples/grid-basic.component';
35
import { GridClientSideComponent } from './examples/grid-clientside.component';
@@ -7,19 +9,19 @@ import { GridHeaderButtonComponent } from './examples/grid-headerbutton.componen
79
import { GridHeaderMenuComponent } from './examples/grid-headermenu.component';
810
import { GridOdataComponent } from './examples/grid-odata.component';
911
import { GridGraphqlComponent } from './examples/grid-graphql.component';
10-
import { NgModule } from '@angular/core';
11-
import { Routes, RouterModule } from '@angular/router';
12+
import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
1213

1314
const routes: Routes = [
1415
{ path: 'basic', component: GridBasicComponent },
1516
{ path: 'editor', component: GridEditorComponent },
1617
{ path: 'formatter', component: GridFormatterComponent },
1718
{ path: 'headerbutton', component: GridHeaderButtonComponent },
1819
{ path: 'headermenu', component: GridHeaderMenuComponent },
20+
{ path: 'gridgraphql', component: GridGraphqlComponent },
1921
{ path: 'gridmenu', component: GridMenuComponent },
2022
{ path: 'clientside', component: GridClientSideComponent },
2123
{ path: 'odata', component: GridOdataComponent },
22-
{ path: 'gridgraphql', component: GridGraphqlComponent },
24+
{ path: 'selection', component: GridRowSelectionComponent },
2325
{ path: '', redirectTo: '/basic', pathMatch: 'full' }
2426
];
2527

‎src/app/app.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,9 @@
4343
<li routerLinkActive="active">
4444
<a [routerLink]="['/gridmenu']">9- Grid Menu (hamburger menu)</a>
4545
</li>
46+
<li routerLinkActive="active">
47+
<a [routerLink]="['/selection']">10- Row Selection</a>
48+
</li>
4649
</ul>
4750
</div>
4851
</section>

‎src/app/app.module.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { GridSingleSelectionComponent } from './examples/grid-single-selection.component';
12
import { GridOdataService, ResizerService } from './modules/angular-slickgrid/services';
23
import { AppRoutingRoutingModule } from './app-routing.module';
34
import { BrowserModule } from '@angular/platform-browser';
@@ -9,11 +10,12 @@ import { GridBasicComponent } from './examples/grid-basic.component';
910
import { GridClientSideComponent } from './examples/grid-clientside.component';
1011
import { GridEditorComponent } from './examples/grid-editor.component';
1112
import { GridFormatterComponent } from './examples/grid-formatter.component';
13+
import { GridGraphqlComponent } from './examples/grid-graphql.component';
1214
import { GridHeaderButtonComponent } from './examples/grid-headerbutton.component';
1315
import { GridHeaderMenuComponent } from './examples/grid-headermenu.component';
1416
import { GridMenuComponent } from './examples/grid-menu.component';
1517
import { GridOdataComponent } from './examples/grid-odata.component';
16-
import { GridGraphqlComponent } from './examples/grid-graphql.component';
18+
import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
1719

1820
// import our custom module, library created using this article
1921
// https://medium.com/@ngl817/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
@@ -27,11 +29,13 @@ import { AngularSlickgridModule } from './modules/angular-slickgrid/modules/angu
2729
GridClientSideComponent,
2830
GridEditorComponent,
2931
GridFormatterComponent,
32+
GridGraphqlComponent,
3033
GridHeaderButtonComponent,
3134
GridHeaderMenuComponent,
3235
GridMenuComponent,
3336
GridOdataComponent,
34-
GridGraphqlComponent
37+
GridSingleSelectionComponent,
38+
GridRowSelectionComponent
3539
],
3640
imports: [
3741
AppRoutingRoutingModule,

‎src/app/examples/grid-formatter.component.ts‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ import { Column, FieldType, Formatter, Formatters, GridExtraService, GridOption
44
// create my custom Formatter with the Formatter type
55
const myCustomCheckmarkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) =>
66
value ? `<i class="fa fa-fire" aria-hidden="true"></i>` : '<i class="fa fa-snowflake-o" aria-hidden="true"></i>';
7-
const customCheckboxFormatter: Formatter = (row, cell, value, columnDef, dataContext) => {
8-
return `<span class="fa fa-check selector-checkbox pointer"></span>`;
9-
};
107

118
@Component({
129
templateUrl: './grid-formatter.component.html'
@@ -38,14 +35,12 @@ export class GridFormatterComponent implements OnInit {
3835
containerId: 'demo-container',
3936
sidePadding: 15
4037
},
41-
enableCellNavigation: false,
42-
enableCheckboxSelector: true,
43-
enableMultiSelect: false
38+
enableCellNavigation: true
4439
};
4540

4641
// mock a dataset
4742
this.dataset = [];
48-
for (let i = 0; i < 5; i++) {
43+
for (let i = 0; i < 500; i++) {
4944
const randomYear = 2000 + Math.floor(Math.random() * 10);
5045
const randomMonth = Math.floor(Math.random() * 11);
5146
const randomDay = Math.floor((Math.random() * 29));

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h2>{{title}}</h2>
1212
</span>
1313
</div>
1414
<div class="form-inline">
15-
<label class="control-label" for="radioWithCursor">With Cursor</label> :
15+
<label class="control-label" for="radioWithCursor">With Cursor:</label>
1616
<span id="radioWithCursor">
1717
<label class="radio-inline control-label" for="radioTrue">
1818
<input type="radio" name="inlineRadioOptions" id="radioTrue" value="true" (change)="onWithCursorChange(true)">

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!--The content below is only a placeholder and can be replaced.-->
2+
<div class="container">
3+
<h2>{{title}}</h2>
4+
<div class="subtitle" [innerHTML]="subTitle"></div>
5+
6+
<div class="row">
7+
<div class="col-sm-4">
8+
<div class="form-inline">
9+
<label class="control-label" for="radioWithCursor">Multi-Select / Single</label>
10+
<span id="radioWithCursor">
11+
<label class="radio-inline control-label" for="radioTrue">
12+
<input type="radio" name="inlineRadioOptions" id="radioTrue" checked [value]="isMultiSelect" (change)="onChooseMultiSelectType(true)">
13+
Multi-Select
14+
</label>
15+
<label class="radio-inline control-label" for="radioFalse">
16+
<input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isMultiSelect" (change)="onChooseMultiSelectType(false)">
17+
Single
18+
</label>
19+
</span>
20+
</div>
21+
</div>
22+
<div class="col-sm-8">
23+
<div class="alert alert-info">
24+
<strong>Selected Row(s):</strong>
25+
<div [innerHTML]="selectedObjects"></div>
26+
</div>
27+
</div>
28+
</div>
29+
30+
<angular-slickgrid gridId="grid1"
31+
(dataviewChanged)="dataviewReady($event)" (gridChanged)="gridReady($event)"
32+
[columnDefinitions]="columnDefinitions"
33+
[gridOptions]="gridOptions"
34+
[dataset]="dataset">
35+
</angular-slickgrid>
36+
<br/>
37+
<hr/>
38+
</div>

‎src/app/examples/grid-rowselection.component.ts‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { Column, FieldType, Formatter, Formatters, GridExtraService, GridExtraUtils, GridOption } from './../modules/angular-slickgrid';
3+
4+
@Component({
5+
templateUrl: './grid-rowselection.component.html'
6+
})
7+
export class GridRowSelectionComponent implements OnInit {
8+
title = 'Example 10: Grid with Row Selection';
9+
subTitle = `
10+
Row selection, single or multi-select (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Selection">Wiki link</a>).
11+
`;
12+
13+
columnDefinitions: Column[];
14+
gridOptions: GridOption;
15+
dataset: any[];
16+
gridObj: any;
17+
dataviewObj: any;
18+
isMultiSelect = true;
19+
selectedObjects: any[];
20+
selectedObject: any;
21+
22+
constructor(private gridExtraService: GridExtraService) {}
23+
24+
ngOnInit(): void {
25+
this.prepareGrid();
26+
}
27+
28+
prepareGrid() {
29+
this.columnDefinitions = [
30+
{id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string},
31+
{id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number},
32+
{id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true},
33+
{id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso },
34+
{id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date },
35+
{id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true}
36+
];
37+
this.gridOptions = {
38+
autoResize: {
39+
containerId: 'demo-container',
40+
sidePadding: 15
41+
},
42+
enableAutoResize: true,
43+
enableCellNavigation: false,
44+
enableCheckboxSelector: true
45+
};
46+
47+
this.dataset = this.prepareData();
48+
}
49+
50+
prepareData() {
51+
// mock a dataset
52+
const mockDataset = [];
53+
for (let i = 0; i < 500; i++) {
54+
const randomYear = 2000 + Math.floor(Math.random() * 10);
55+
const randomMonth = Math.floor(Math.random() * 11);
56+
const randomDay = Math.floor((Math.random() * 29));
57+
const randomPercent = Math.round(Math.random() * 100);
58+
59+
mockDataset[i] = {
60+
id: i,
61+
title: 'Task ' + i,
62+
duration: Math.round(Math.random() * 100) + '',
63+
percentComplete: randomPercent,
64+
percentCompleteNumber: randomPercent,
65+
start: new Date(randomYear, randomMonth, randomDay),
66+
finish: new Date(randomYear, (randomMonth + 1), randomDay),
67+
effortDriven: (i % 5 === 0)
68+
};
69+
}
70+
return mockDataset;
71+
}
72+
73+
gridReady(grid) {
74+
this.gridObj = grid;
75+
76+
grid.onSelectedRowsChanged.subscribe((e, args) => {
77+
if (Array.isArray(args.rows)) {
78+
this.selectedObjects = args.rows.map(idx => {
79+
const item = grid.getDataItem(idx);
80+
return item.title || '';
81+
});
82+
}
83+
});
84+
}
85+
dataviewReady(dataview) {
86+
this.dataviewObj = dataview;
87+
}
88+
89+
onChooseMultiSelectType(isMultiSelect) {
90+
this.isMultiSelect = isMultiSelect;
91+
92+
this.gridObj.setOptions({
93+
enableCellNavigation: !isMultiSelect,
94+
enableCheckboxSelector: isMultiSelect
95+
}); // change the grid option dynamically
96+
this.gridExtraService.setSelectedRows([]);
97+
98+
return true;
99+
}
100+
}

‎src/app/examples/grid-single-selection.component.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!--The content below is only a placeholder and can be replaced.-->
2+
<div>
3+
<angular-slickgrid gridId="grid2"
4+
(dataviewChanged)="dataviewReady($event)" (gridChanged)="gridReady($event)"
5+
[columnDefinitions]="columnDefinitions"
6+
[gridOptions]="gridOptions"
7+
[dataset]="dataset"
8+
gridHeight="300"
9+
gridWidth="800">
10+
</angular-slickgrid>
11+
</div>

‎src/app/examples/grid-single-selection.component.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { Column, FieldType, Formatter, Formatters, GridExtraService, GridOption } from './../modules/angular-slickgrid';
3+
4+
@Component({
5+
selector: 'grid-single-selection',
6+
templateUrl: './grid-single-selection.component.html'
7+
})
8+
export class GridSingleSelectionComponent implements OnInit {
9+
title = 'Example 10: Grid with Row Selection';
10+
subTitle = `
11+
Row selection, single or multi-select (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Selection">Wiki link</a>).
12+
`;
13+
14+
columnDefinitions: Column[];
15+
gridOptions: GridOption;
16+
dataset: any[];
17+
gridObj: any;
18+
dataviewObj: any;
19+
isMultiSelect = true;
20+
21+
constructor(private gridExtraService: GridExtraService) {}
22+
23+
ngOnInit(): void {
24+
this.prepareGrid();
25+
}
26+
27+
prepareGrid() {
28+
this.columnDefinitions = [
29+
{id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string},
30+
{id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number},
31+
{id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true},
32+
{id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso },
33+
{id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date },
34+
{id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true}
35+
];
36+
this.gridOptions = {
37+
enableAutoResize: false,
38+
enableCellNavigation: true,
39+
enableCheckboxSelector: false
40+
};
41+
42+
this.dataset = this.prepareData();
43+
}
44+
45+
prepareData() {
46+
// mock a dataset
47+
const mockDataset = [];
48+
for (let i = 0; i < 500; i++) {
49+
const randomYear = 2000 + Math.floor(Math.random() * 10);
50+
const randomMonth = Math.floor(Math.random() * 11);
51+
const randomDay = Math.floor((Math.random() * 29));
52+
const randomPercent = Math.round(Math.random() * 100);
53+
54+
mockDataset[i] = {
55+
id: i,
56+
title: 'Task ' + i,
57+
duration: Math.round(Math.random() * 100) + '',
58+
percentComplete: randomPercent,
59+
percentCompleteNumber: randomPercent,
60+
start: new Date(randomYear, randomMonth, randomDay),
61+
finish: new Date(randomYear, (randomMonth + 1), randomDay),
62+
effortDriven: (i % 5 === 0)
63+
};
64+
}
65+
return mockDataset;
66+
}
67+
68+
gridReady(grid) {
69+
this.gridObj = grid;
70+
}
71+
dataviewReady(dataview) {
72+
this.dataviewObj = dataview;
73+
}
74+
}

‎src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
8888
// on route change, we should destroy the grid & cleanup some of the objects
8989
this.router.events.subscribe((event: NavigationEnd) => {
9090
this.grid.destroy();
91+
this.controlAndPluginService.destroy();
9192
this._dataView = [];
9293
this.filterService.clearFilters();
9394
});
@@ -99,6 +100,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
99100
this._gridOptions = this.mergeGridOptions();
100101

101102
this._dataView = new Slick.Data.DataView();
103+
this.controlAndPluginService.init(this.grid, this._dataView, this.columnDefinitions, this._gridOptions);
102104
this.controlAndPluginService.createPluginBeforeGridCreation(this.columnDefinitions, this._gridOptions);
103105
this.grid = new Slick.Grid(`#${this.gridId}`, this._dataView, this.columnDefinitions, this._gridOptions);
104106

0 commit comments

Comments
 (0)