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

Commit b5ea0f9

Browse files
Ghislain BeaulacGhislain Beaulac
Ghislain Beaulac
authored and
Ghislain Beaulac
committed
fix cannot find stylesheet on component destroy
1 parent 7461d29 commit b5ea0f9

File tree

3 files changed

+44
-57
lines changed

3 files changed

+44
-57
lines changed

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

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ import 'slickgrid/plugins/slick.headerbuttons';
1919
import 'slickgrid/plugins/slick.headermenu';
2020
import 'slickgrid/plugins/slick.rowmovemanager';
2121
import 'slickgrid/plugins/slick.rowselectionmodel';
22-
import { AfterViewInit, Component, EventEmitter , Injectable, Input, Output, OnInit } from '@angular/core';
23-
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
22+
import { AfterViewInit, Component, EventEmitter, Injectable, Input, Output, OnDestroy, OnInit } from '@angular/core';
2423
import { castToPromise } from './../services/utilities';
2524
import { GlobalGridOptions } from './../global-grid-options';
2625
import { CellArgs, Column, FormElementType, GridOption } from './../models';
@@ -45,7 +44,7 @@ declare var Slick: any;
4544
</div>
4645
`
4746
})
48-
export class AngularSlickgridComponent implements AfterViewInit, OnInit {
47+
export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnInit {
4948
private _dataset: any[];
5049
private _dataView: any;
5150
private _gridOptions: GridOption;
@@ -77,21 +76,20 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
7776
private gridExtraService: GridExtraService,
7877
private filterService: FilterService,
7978
private resizer: ResizerService,
80-
private router: Router,
8179
private sortService: SortService
8280
) {}
8381

8482
ngOnInit(): void {
8583
this.gridHeightString = `${this.gridHeight}px`;
8684
this.gridWidthString = `${this.gridWidth}px`;
85+
}
8786

88-
// on route change, we should destroy the grid & cleanup some of the objects
89-
this.router.events.subscribe((event: NavigationEnd) => {
90-
this.grid.destroy();
91-
this.controlAndPluginService.destroy();
92-
this._dataView = [];
93-
this.filterService.clearFilters();
94-
});
87+
ngOnDestroy(): void {
88+
this._dataView = [];
89+
this.controlAndPluginService.destroy();
90+
this.filterService.clearFilters();
91+
this.resizer.destroy();
92+
this.grid.destroy();
9593
}
9694

9795
ngAfterViewInit() {
@@ -100,7 +98,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
10098
this._gridOptions = this.mergeGridOptions();
10199

102100
this._dataView = new Slick.Data.DataView();
103-
this.controlAndPluginService.init(this.grid, this._dataView, this.columnDefinitions, this._gridOptions);
104101
this.controlAndPluginService.createPluginBeforeGridCreation(this.columnDefinitions, this._gridOptions);
105102
this.grid = new Slick.Grid(`#${this.gridId}`, this._dataView, this.columnDefinitions, this._gridOptions);
106103

‎src/app/modules/angular-slickgrid/services/controlAndPlugin.service.ts‎

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Injectable } from '@angular/core';
2-
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
32
import { FilterService } from './filter.service';
43
import { GridExtraUtils } from './gridExtraUtils';
54
import { GridExtraService } from './gridExtra.service';
@@ -33,12 +32,8 @@ export class ControlAndPluginService {
3332
gridMenuControl: any;
3433
rowSelectionPlugin: any;
3534

36-
constructor(private filterService: FilterService, private gridExtraService: GridExtraService, private router: Router) {}
35+
constructor(private filterService: FilterService, private gridExtraService: GridExtraService) {}
3736

38-
init(grid: any, dataView: any, columnDefinitions: Column[], options: GridOption) {
39-
this._grid = grid;
40-
this._dataView = dataView;
41-
}
4237
/**
4338
* Attach/Create different Controls or Plugins after the Grid is created
4439
* @param {any} grid
@@ -47,6 +42,10 @@ export class ControlAndPluginService {
4742
* @param {any} dataView
4843
*/
4944
attachDifferentControlOrPlugins(grid: any, columnDefinitions: Column[], options: GridOption, dataView: any) {
45+
this._grid = grid;
46+
this._dataView = dataView;
47+
this._visibleColumns = columnDefinitions;
48+
5049
if (options.enableColumnPicker) {
5150
this.columnPickerControl = new Slick.Controls.ColumnPicker(columnDefinitions, grid, options);
5251
}
@@ -56,17 +55,17 @@ export class ControlAndPluginService {
5655
this.gridMenuControl = new Slick.Controls.GridMenu(columnDefinitions, grid, options);
5756
if (options.gridMenu) {
5857
this.gridMenuControl.onBeforeMenuShow.subscribe((e: Event, args: CellArgs) => {
59-
if (typeof options.gridMenu.onBeforeMenuShow === 'function') {
58+
if (options.gridMenu && typeof options.gridMenu.onBeforeMenuShow === 'function') {
6059
options.gridMenu.onBeforeMenuShow(e, args);
6160
}
6261
});
6362
this.gridMenuControl.onCommand.subscribe((e: Event, args: CellArgs) => {
64-
if (typeof options.gridMenu.onCommand === 'function') {
63+
if (options.gridMenu && typeof options.gridMenu.onCommand === 'function') {
6564
options.gridMenu.onCommand(e, args);
6665
}
6766
});
6867
this.gridMenuControl.onMenuClose.subscribe((e: Event, args: CellArgs) => {
69-
if (typeof options.gridMenu.onMenuClose === 'function') {
68+
if (options.gridMenu && typeof options.gridMenu.onMenuClose === 'function') {
7069
options.gridMenu.onMenuClose(e, args);
7170
}
7271
});
@@ -124,21 +123,18 @@ export class ControlAndPluginService {
124123
grid.registerPlugin(options.registerPlugins);
125124
}
126125
}
127-
128-
// destroy all the Controls & Plugins when changing Route
129-
this.router.events.subscribe((event: NavigationEnd) => {
130-
this.destroy();
131-
});
132126
}
133127

134128
hideColumn(column: Column) {
135-
const columnIndex = this._grid.getColumnIndex(column.id);
136-
this._visibleColumns = this.removeColumnByIndex(this._visibleColumns, columnIndex);
137-
this._grid.setColumns(this._visibleColumns);
129+
if (this._grid && this._visibleColumns) {
130+
const columnIndex = this._grid.getColumnIndex(column.id);
131+
this._visibleColumns = this.removeColumnByIndex(this._visibleColumns, columnIndex);
132+
this._grid.setColumns(this._visibleColumns);
133+
}
138134
}
139135

140-
removeColumnByIndex(array, index) {
141-
return array.filter((el, i) => {
136+
removeColumnByIndex(array: any[], index: number) {
137+
return array.filter((el: any, i: number) => {
142138
return index !== i;
143139
});
144140
}
@@ -184,7 +180,7 @@ export class ControlAndPluginService {
184180

185181
private addGridMenuCustomCommands(grid: any, options: GridOption) {
186182
if (options.enableFiltering) {
187-
if (options.gridMenu.customItems.filter((item) => item.command === 'clear-filter').length === 0) {
183+
if (options && options.gridMenu && options.gridMenu.customItems && options.gridMenu.customItems.filter((item: CustomGridMenu) => item.command === 'clear-filter').length === 0) {
188184
options.gridMenu.customItems.push(
189185
{
190186
iconCssClass: 'fa fa-filter text-danger',
@@ -194,7 +190,7 @@ export class ControlAndPluginService {
194190
}
195191
);
196192
}
197-
if (options.gridMenu.customItems.filter((item) => item.command === 'toggle-filter').length === 0) {
193+
if (options && options.gridMenu && options.gridMenu.customItems && options.gridMenu.customItems.filter((item: CustomGridMenu) => item.command === 'toggle-filter').length === 0) {
198194
options.gridMenu.customItems.push(
199195
{
200196
iconCssClass: 'fa fa-random',
@@ -204,32 +200,34 @@ export class ControlAndPluginService {
204200
}
205201
);
206202
}
207-
options.gridMenu.onCommand = (e, args) => {
208-
if (args.command === 'toggle-filter') {
209-
grid.setHeaderRowVisibility(!grid.getOptions().showHeaderRow);
210-
} else if (args.command === 'toggle-toppanel') {
211-
grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);
212-
} else if (args.command === 'clear-filter') {
213-
this.filterService.clearFilters();
214-
this._dataView.refresh();
215-
} else {
216-
alert('Command: ' + args.command);
217-
}
218-
};
203+
if (options.gridMenu) {
204+
options.gridMenu.onCommand = (e, args) => {
205+
if (args.command === 'toggle-filter') {
206+
grid.setHeaderRowVisibility(!grid.getOptions().showHeaderRow);
207+
} else if (args.command === 'toggle-toppanel') {
208+
grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);
209+
} else if (args.command === 'clear-filter') {
210+
this.filterService.clearFilters();
211+
this._dataView.refresh();
212+
} else {
213+
alert('Command: ' + args.command);
214+
}
215+
};
216+
}
219217
}
220218

221219
// remove the custom command title if there's no command
222-
if (options.gridMenu.customItems && options.gridMenu.customItems.length > 0) {
220+
if (options && options.gridMenu && options.gridMenu.customItems && options.gridMenu.customItems.length > 0) {
223221
options.gridMenu.customTitle = options.gridMenu.customTitle || 'Commands';
224222
}
225223
}
226224

227-
private prepareGridMenu(grid, options) {
225+
private prepareGridMenu(grid: any, options: GridOption) {
228226
options.gridMenu = options.gridMenu || {};
229227
options.gridMenu.columnTitle = options.gridMenu.columnTitle || 'Columns';
230228
options.gridMenu.iconCssClass = options.gridMenu.iconCssClass || 'fa fa-bars';
231229
options.gridMenu.menuWidth = options.gridMenu.menuWidth || 18;
232-
options.gridMenu.customTitle = options.gridMenu.customTitle || null;
230+
options.gridMenu.customTitle = options.gridMenu.customTitle || undefined;
233231
options.gridMenu.customItems = options.gridMenu.customItems || [];
234232
this.addGridMenuCustomCommands(grid, options);
235233
// options.gridMenu.resizeOnShowHeaderRow = options.showHeaderRow;
@@ -248,4 +246,3 @@ export class ControlAndPluginService {
248246
}
249247
}
250248
}
251-

‎src/app/modules/angular-slickgrid/services/resizer.service.ts‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { GridOption } from './../models';
22
import { Injectable } from '@angular/core';
3-
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
43
import $ from 'jquery';
54

65
// global constants, height/width are in pixels
@@ -12,8 +11,7 @@ let timer: any;
1211

1312
@Injectable()
1413
export class ResizerService {
15-
constructor(private router: Router) {
16-
}
14+
constructor() {}
1715

1816
/** Attach an auto resize trigger on the datagrid, if that is enable then it will resize itself to the available space
1917
* Options: we could also provide a % factor to resize on each height/width independently
@@ -35,11 +33,6 @@ export class ResizerService {
3533
this.resizeGrid(grid, gridOptions);
3634
this.resizeGrid(grid, gridOptions);
3735
});
38-
39-
// destroy the resizer on route change
40-
this.router.events.subscribe((event: NavigationEnd) => {
41-
this.destroy();
42-
});
4336
}
4437

4538
/**

0 commit comments

Comments
 (0)