ghiscoding / angular-slickgrid

Angular-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes

Angular-Slickgrid

Brief introduction

One of the best JavasSript datagrid SlickGrid, which was originally developed by @mleibman, is now available to the Angular world. SlickGrid beats most other datagrids in terms of features, customizability and performance (running smoothly with even a million rows). Angular-Slickgrid is a wrapper on top of Slickgrid-Universal (which is required), in the early beginning we used the 6pac/SlickGrid fork but that was dropped in >=v7.0 since Slickgrid-Universal is now a standalone project. SlickGrid was also recently rewritten to be browser native (no more jQuery 🎉).

License

MIT License

Documentation

📕 Documentation website powered by GitBook.

For common issues, see the Troubleshooting Section below

Installation

A good starting point is the Docs - Quick Start and/or simply clone the Angular-Slickgrid Demos repository. Please review all documentation and closed issues before opening any new issue, also consider asking installation and/or general questions on Stack Overflow unless you think there's a bug with the library.

npm install angular-slickgrid

Demo page

Angular-Slickgrid works with all Bootstrap versions, you can see a demo of each one below. It also with any other framework like Material or Bulma and there are also extra styling themes for not just Bootstrap but also Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the Docs - SVG Icons

• Bootstrap 5 demo / examples repo
• Bootstrap 4 demo / examples repo
• Bootstrap 5 demo with Single Locale / examples repo

Bootstrap 5 with single Locale - Code Sample with single Locale (without ngx-translate)

Working Demo

For a complete set of working demos (over 30 examples), we strongly suggest you to clone the Angular-Slickgrid Demos repository (instructions are provided in the demo repo). The repo provides multiple demos and they are updated every time a new version is released, so it is updated frequently and is also used as the GitHub live demo page for both the Bootstrap 5 demo and Bootstrap 4 demo.

git clone https://github.com/ghiscoding/angular-slickgrid-demos
cd bootstrap4-demo-with-translate # or any of the 4 demos
npm install
npm start

Like it? ⭐ it

You like to use Angular-Slickgrid? Be sure to upvote ⭐ and maybe support me with caffeine ☕ and feel free to contribute. 👷👷‍♀️

Contributions

If you wish to contribute then make sure to follow the steps shown in the CONTRIBUTING guide.

Latest News & Releases

Check out the Releases section for all latest News & Releases.

Angular Compatibility

Note please be aware that only the latest version of Angular-Slickgrid is supported and will receive bug fixes. The reason older versions are not supported is simply because it's already a lot of work to maintain for a single developer.

Angular-Slickgrid	Angular version	Migration Guide	Notes
7.x	>=17.0	Migration 7.x	merge SlickGrid into Slickgrid-Universal, requires Slickgrid-Universal 4.x version
6.x	>=16.0	Migration 6.x	removal of jQuery (now uses browser native code), requires Slickgrid-Universal 3.x version
5.x	>=14.0	Migration 5.x	removal of jQueryUI, requires Slickgrid-Universal 2.x version
4.x	>=13.0	Migration 4.x	for Ivy build only, requires Slickgrid-Universal 1.x version
3.x	>=12.0	Migration 3.x	the lib now uses Slickgrid-Universal monorepo v0.19.2. Also, IE11 is EOL and no longer supported.
2.x	7-11.x	Migration 2.x	support multiple grids on same page
1.x	4-6.x

Note For a full compatibility table of Angular-Slickgrid with Slickgrid-Universal, please take a look at the Versions Compatibility Table - Wiki.

For Angular 12+ see the instructions below - Angular 12 with WebPack 5 - polyfill issue.

ngx-translate Compatibility

Angular-Slickgrid uses ngx-translate library to support Locales, it is also required even when using a single Locale. The reason is because, we use @Optional() TranslateService in the lib and for that to work, it requires ngx-translate to installed. Once you run the build and if you are using a single Locale then the tree shaking process should remove these optional dependencies. See their version compatibility table below for more info

Angular Version	@ngx-translate/core
16+	15.x
13+ (Ivy only)	14.x
10-13	13.x
8-9	12.x
7	11.x

Tested with Jest (Unit Tests) - Cypress (E2E Tests)

Slickgrid-Universal has 100% Unit Test Coverage and all Slickgrid-React Examples are tested with Cypress as E2E tests.

Troubleshooting Section

• Angular 12 with WebPack 5 - how to fix polyfill error
• ngcc Build Warnings (Angular >=8.0 && <16.0)
• strictTemplates error

angular-slickgrid's Issues

Wiki Correction

The "Export to File" page lists the global "exportWithFormatter" property as being a direct property of "gridOptions". It is actually a property of the "gridOptions" property "exportOptions".

Uncaught (in promise): Error: StaticInjectorError in version 0.8.1

core.js:1440 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AngularSlickgridComponent -> TranslateService]:
StaticInjectorError(Platform: core)[AngularSlickgridComponent -> TranslateService]:
NullInjectorError: No provider for TranslateService!
Error: StaticInjectorError(AppModule)[AngularSlickgridComponent -> TranslateService]:
StaticInjectorError(Platform: core)[AngularSlickgridComponent -> TranslateService]:
NullInjectorError: No provider for TranslateService!

Input Filter no longer supports operators

visible in the demo:
https://ghiscoding.github.io/Angular-Slickgrid/#/clientside

If you enter "ta*" into the title quick filter, no rows are returned
This applies to the other operators as well.

two grid in the same page and resizer

have you had trouble with two grid in the same page using resizer service ?
thanks

items are duplicated

I set dataset after async http call, I get two items but grid shows three items (the last item in the grid is a duplicate). I use this.angularGrid.gridService.addItemToDatagrid(this.categories[i]);

Pagination component is displayed even "gridOptions.enablePagination=false"

I wanted to create my own pagination component, so I set properties as follow:

enablePagination: false,
backendServiceApi: {
          service: this.myDataService,
          preProcess: () => this.displaySpinner(true),
          process: (query) => this.getCustomerApiCall(query),
          postProcess: (response) => {
            console.log(response);
            this.displaySpinner(false);
            this.getCustomerCallback(response);
          }
}

What happens, I was able to use my pagination component, however the internal "<slick-pagination>..</slick-pagination>" remains displayed.
Looking into source code of version 0.10.0, I found that :

if (this._gridOptions.enablePagination || this._gridOptions.backendServiceApi) {
        this.showPagination = true;

around line #296 on file angular-slickgrid.component.ts

This will force the pagination to be displayed.

Would it be possible to allow an accessor method or adding a new boolean option to allow not to show the slick-pagination component?
The the previous condition will look like (Option 1):

if (!this._gridOptions.hidePagination && (this._gridOptions.enablePagination || this._gridOptions.backendServiceApi)) {
        this.showPagination = true;
...

Or simply (Option 2):
Change

if (this._gridOptions.enablePagination || this._gridOptions.backendServiceApi) {
        this.showPagination = true;

Into

if (this._gridOptions.enablePagination) {
        this.showPagination = true;

Unless there is a reason for doing that.

Many thanks in advance.

frozenColumn option Is Missing

I Need To Implement My First Column As Frozen When I search frozenColumn There Is No Option Like That ,frozenColumn Options In SlickGrid v2.2

onDblClick event

Hello, unable to find onDblClick event on the grid , there is something missing ?

thx

Async load data from WEB API into grid editor.

Hello,

Am trying to populate grids columns value from HTTP get request data and use Single/Multiple select on it. For different columns different database table output is to be mapped.
How this http data is to be mapped to the collections in the column?

Columns are autosized even with relevant options set to false

I'm submitting a bug report

• Library Version:
  1.1.1

Current behavior:
With forceFitColumns and autoFitColumnsOnFirstLoad set to false, columns are still autosized. It looks like the ResizerService calls autosizeColumns regardless of these options, both when the service is initialized for a grid and every time it responds to a resize event.

Expected/desired behavior:
With forceFitColumns and autoFitColumnsOnFirstLoad set to false, columns are never autosized. These options should be used in the ResizerService.

• What is the motivation / use case for changing the behavior?
  With many columns, autosizing them results in them all being too small. Instead I want to set column widths manually and for the library not to interfere with these widths.

Export To File Not Respecting datasetIdPropertyName

The export functions only output heading lines (ie. no data rows) if the "datasetIdPropertyName" is defined in "gridOptions". The export function only works if the data has an "id" property.

ERROR TypeError: using the flatpickr plugin v 4.2.3, Cli

This issue occurres when using the date editor as a colum editor, eg: Editors.date
Also happens when trying to use a custom date editor using "flatpickr".
Error stack:

ERROR TypeError: Fonction attendue
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Fonction attendue",
      message: "Fonction attendue",
      name: "TypeError",
      number: -2146823286,
      stack: "TypeError: Fonction attendue
   at DateEditor.prototype.init (eval code:49:9)
   at DateEditor (eval code:21:9)
   at makeActiveCellEditable (eval code:30449:13)
....

Deeper investigations in the issue:
An instance of the flatpickr should be created as:

 //this.flatInstance = flatpickr(this.$input[0], pickerOptions);
 this.flatInstance = this.$input[0].flatpickr(pickerOptions);

Reference: [https://chmln.github.io/flatpickr/instance-methods-properties-elements/#retrieving-the-flatpickr-instance]

Would you please reassess sources on:
angular-slickgrid\editors\dateEditor.ts , line 46 [...this.flatInstance = flatpickr(this.$input[0], pickerOptions);]

Versions: es2017, "@angular/cli": "1.6.0", "flatpickr": "^4.2.3", "@angular/core": "^5.1.0".

When I did the amendment: this.flatInstance = this.$input[0].flatpickr(pickerOptions);
all now works fine.

Showing different excel files in Slick-grid

Hi,

We have a requirement in our project wherein we are reading different excel files and trying to show them in Slick-grid one at a time.
The problem that I am facing here is, each excel file will have different column names and values. So it will be like slick-grid columns will keep changing as per the excel file.
Can anyone please suggest me how to implement this?

Thanks,
Ashish

sgOnSelectedRowsChanged not dispatched

Hello,
it seems that when we click in on editable cell the sgOnSelectedRowsChanged event
is not dispatch.
( it's work with key navigation )

template

<dnl-datagrid gridId="grid1"
                        (sgOnSelectedRowsChanged)="onSelectedRowsChanged($event)"
                        [gridHeight]="310"
                        [columnDefinitions]="columnDefinitions"
                        [gridOptions]="gridOptions"
                        [dataset]="_productList">
 </dnl-datagrid>

grid options

 enableAutoResize: true,
  enableCellNavigation: true,
  editable: true,
  autoEdit: true,
  enableColumnReorder: true,
  multiSelect: false,
  enableTranslate: true,
  i18n: this.translate,

 
 onSelectedRowsChanged(args) {
    console.log(args);
  }

"Cant resolve all parameters for k in angular-slickgrid.d.ts"

upgraded to 1.1.1 to pull in the fixes to the input filters.
ng serve works fine on my localhost.
When attempting to ng build --prod, I get the following warning:

PS C:\Users\ctung\git\hld-track> ng build --prod -bh /ps_www/ps_hld/
Warning: Can't resolve all parameters for k in C:/Users/ctung/git/hld-track/node_modules/angular-slickgrid/angular-slickgrid.d.ts: (?).
This will become an error in Angular v6.x
Warning: Can't resolve all parameters for k in C:/Users/ctung/git/hld-track/node_modules/angular-slickgrid/angular-slickgrid.d.ts: (?).Date: 2018-07-02T13:46:20.083Z
Hash: 7c85975545ea0c7bd159
Time: 48252ms

Followed by a bunch of these:

WARNING in ./src/app/features/features.component.ngfactory.js
51:633-651 "export 'SlickgridConfig' (imported as 'i3') was not found in 'angular-slickgrid'
WARNING in ./src/app/features/features.component.ngfactory.js
51:653-671 "export 'SlickgridConfig' (imported as 'i3') was not found in 'angular-slickgrid'
WARNING in ./src/app/features/features.component.ngfactory.js
51:697-713 "export 'FilterFactory' (imported as 'i3') was not found in 'angular-slickgrid'
WARNING in ./src/app/features/features.component.ngfactory.js
51:715-731 "export 'FilterFactory' (imported as 'i3') was not found in 'angular-slickgrid'
WARNING in ./src/app/features/features.component.ngfactory.js
51:747-765 "export 'SlickgridConfig' (imported as 'i3') was not found in 'angular-slickgrid'
WARNING in ./src/app/features/features.component.ngfactory.js
51:868-884 "export 'FilterFactory' (imported as 'i3') was not found in 'angular-slickgrid'
WARNING in ./node_modules/angular-slickgrid/angular-slickgrid.ngfactory.js
88:1012-1028 "export 'FilterFactory' (imported as 'i1') was not found in 'angular-slickgrid'
WARNING in ./node_modules/angular-slickgrid/angular-slickgrid.ngfactory.js
88:777-795 "export 'SlickgridConfig' (imported as 'i1') was not found in 'angular-slickgrid'
WARNING in ./node_modules/angular-slickgrid/angular-slickgrid.ngfactory.js
88:797-815 "export 'SlickgridConfig' (imported as 'i1') was not found in 'angular-slickgrid'
WARNING in ./node_modules/angular-slickgrid/angular-slickgrid.ngfactory.js
88:841-857 "export 'FilterFactory' (imported as 'i1') was not found in 'angular-slickgrid'
WARNING in ./node_modules/angular-slickgrid/angular-slickgrid.ngfactory.js
88:859-875 "export 'FilterFactory' (imported as 'i1') was not found in 'angular-slickgrid'
WARNING in ./node_modules/angular-slickgrid/angular-slickgrid.ngfactory.js
88:891-909 "export 'SlickgridConfig' (imported as 'i1') was not found in 'angular-slickgrid'

Then the table fails to load complaining about:

ERROR Error: Uncaught (in promise): TypeError: i is not a constructor
TypeError: i is not a constructor

Add new row dynamically to the grid.

Am using slickgrid to populate the data as well as for inserting the new record. For inserting am using "enableAddRow" set to true. Do i need to set columns value to empty or is there any other way??

Async load collection for editors

Hello,
I have next workflow:
Getting data for collection is deferred. How can I organize properly load of grid?

next tries didn't work: (I tried to re-init grid after filling collection)

 this.dataService.getStatuses().subscribe(data => {
       this.columns[0].editor.collection = data.map(item => ({ label: item.desc, value: item.id }))
       // this.grid.gridService.resetGrid(this.columns);
       this.grid.gridService.init(this.grid.slickGrid, this.dataset);
 }, this.handleError);

Error when Use enableGrouping and enableFiltering together in GridOption

When use enableGrouping and enableFiltering together in GridOption iam getting Unexpected token , Error.

this.gridOptions = {
      autoResize: {
        containerId: 'demo-container',
        sidePadding: 15
      },
      // enableGrouping: true,
      // enableFiltering: true,
      exportOptions: {
        sanitizeDataExport: true
     }
}

Error when using Filters.multipleSelect in Slickgrid 1.x

Hi there! Thanks for the great job you have done for Slickgrid. It's a pleasure to use it!

I'm submitting a bug report

• Library Version:
  I'm using angular-slickgrid v1.7.6

• Browser:
  Chrome 70

• Angular:
  @angular/cli 7.0.3

• Language:
  TypeScript 3.1.4

Current behavior:
I'm getting an error in the console when I'm using the Filters.multipleSelect :

Error: Uncaught (in promise): Error: Something went wrong while trying to pull the collection from the "collectionAsync" call in the Select Filter, the collection is not a valid array.
Error: Something went wrong while trying to pull the collection from the "collectionAsync" call in the Select Filter, the collection is not a valid array.
    at MultipleSelectFilter.push../node_modules/angular-slickgrid/esm5/angular-slickgrid.js.SelectFilter.renderDomElementFromCollectionAsync (angular-slickgrid.js:1592)
    at MultipleSelectFilter.<anonymous> (angular-slickgrid.js:1573)
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at fulfilled (tslib.es6.js:68)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:14191)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at MultipleSelectFilter.push../node_modules/angular-slickgrid/esm5/angular-slickgrid.js.SelectFilter.renderDomElementFromCollectionAsync (angular-slickgrid.js:1592)
    at MultipleSelectFilter.<anonymous> (angular-slickgrid.js:1573)
    at step (tslib.es6.js:97)
    at Object.next (tslib.es6.js:78)
    at fulfilled (tslib.es6.js:68)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:14191)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at resolvePromise (zone.js:814)
    at zone.js:724
    at fulfilled (tslib.es6.js:68)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:14191)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14182)

My code:

this.columnDefinitions = [
// ... others classic columns ...
{ id: 'status', name: 'Status', field: 'status', sortable: true, filterable: true,
  filter: {
   collection: [
    { value: '', label: 'All' },
    { value: 'RELAUNCHED', label: 'Relaunched' },
    { value: 'IN_PROGRESS', label: 'In progress' },
    { value: 'FAILED', label: 'Failed' },
    { value: 'DONE', label: 'Done' }
   ],
   model: Filters.multipleSelect
  }
 }
];

Expected/desired behavior:
I don't understand why the error is talking about "collectionAsync"... I'm using "collection" and it is a valid Array.
When I use the multipleSelect in my page it's working, but as a singleSelect.
Do you have any idea where this is coming from? Is it working for you?

Angular 7 compatibility

Actually the Angular Slick grid is not compatible Angular 6, errors of kind :

node_modules/angular-slickgrid/app/modules/angular-slickgrid/models/backendEventChanged.interface.d.ts(3,10): error TS2305: Module '"E:/WS/Angular6App/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/angular-slickgrid/app/modules/angular-slickgrid/models/backendServiceApi.interface.d.ts(5,10): error TS2305: Module '"E:/WS/Angular6App/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/angular-slickgrid/app/modules/angular-slickgrid/services/export.service.d.ts(3,10): error TS2305: Module '"E:/WS/Angular6App/node_modules/rxjs/Subject"' has no exported member 'Subject'.

To by pass this issue, I downgraded the RXJS version from 6.0.0 to 5.6.0-forward-compat.5
This is a temporary solution, all errors related to angular slick grid disapeared, but when starting the application, this alert is displayed (in red):

This project uses a temporary compatibility version of RxJs (5.6.0-forward-compat.5).
Please visit the link below to find instructions on how to update RxJs.
https://docs.google.com/document/d/12nlLt71VLKb-z3YaSGzUfx6mJbc34nsMXtByPUN35cg/edit# 

Should this be worrying ?

[feature] Support Multiple Grid in 1 View - Major Release with Breaking Changes

After working on supporting Multiple Grid in same View, I found out that all the work from the start was to use Services as Singleton (services which are exposed by Angular-Slickgrid through Depency Injection (DI)). The first code change that was made to support multiple grid was to change the Singleton Services to non-Singleton, however that breaks all the Services exposed by Angular-Slickgrid.

So we need a new Major Release, below are the things that I have always put aside and that will be addressed before releasing a new Major Version (aka version 1.x)

Task List

• 1. GridEvent Service, no longer references the 2nd argument gridOptions
• 2. a lot of the Services instantiated in aurelia-slickgrid ViewModel use an init() which usually ask for init(grid, gridOptions, dataView) but once we get the grid object, we actually have access to the gridOptions, so we can simplify this a lot (closed by PR #28).
• 3. remove all deprecated code (just search for the word deprecated), code change could be renamed or re-implemented (commit)
  • a. onBackendEventApi was re-implemented and replaced by backendServiceApi
• 4. change all Singleton Services to non-Singleton
• 5. Filter could possibly use only searchTerms array instead of doing multiple logic to deal with both searchTerm (singular) and the searchTerms array (commit and commit).
• 6. Remove all previous reference of selectOptions in all Filters (commit).
• 7. Editors/Filters should use a common Column property and possibly remove the filter Column property (commit).
• 8. remove FormElementType from Filters, it should only use FilterType (commit)
  • a. the FormElementType is actually not used anywhere else I think, so might be better to delete it completely
• 9. BackendService API onFilterChanged function and the Filter Service onFilterChanged Event Emitter, should not be named the same, it is rather confusing when troubleshooting, maybe change function to processOnFilterChanged (commit)
• 10. remove exportWithFormatter from GridOptions.interface since it is now part of exportOptions (commit)
• 11. GridMenu has both hideX and showX flags, they should all be hideX since that is the default name in the external plugins (commit)
• 12. Possibly rename the GridExtraService to simply GridService or DataGridService
• 13. Not exporting all Services in the Angular-Slickgrid module can break user who created their own BackendServiceApi, for example swt-grid-component
  • a. remove all Services from the module export since they aren't singleton anymore (commit)
• 14. A lot of the Editors properties (like collection) are available only from the generic params property which removes the benefit of intellisense and type check. This goes with number 7. (commit)
• 15. Expose all SlickGrid Events the same way they are currently exported in Aurelia-Slickgrid (commit and commit)
  • a. update Event Wiki, for now more info can be found in the Aurelia Wiki
    • SlickGrid Event onClick can be used in the View as (sg-on-click)="handleClick($event.detail.eventData, $event.detail.args)"
    • DataView Event onRowCountChanged can be used as (sg-on-row-count-changed)="handleRowCountChanged($event.detail.eventData, $event.detail.args)"
  • b. update the Example 3 (Editors) to demo this new way of using sg-on-click=""
• 16. Remove the initOptions from the BackendService, that was replaced by init (commit)
• 17. GridExtraUtil contain only 1 function, it would be better to move it into the renamed GridService and delete GridExtraUtil completely (commit and commit)
• 18. Should pass i18n as a Grid Options instead of a generic params grid option and fix a column picker issue (commit)
• 19. add Percent (divide by 100, they display %) and PercentSymbol (only add "%" suffix symbol) (commit)
• 20. Add a sample for multiple grids in 1 view (commit)
• 20. Update all the Wikis and there's a lot
• 21. Update all the GitHub demo examples

Migration Guide will be available here

where did setColumns go?

I used to use getColumns()/setColumns() to get/set the visible columns as a subset of the full list of columns.

It looks like I can still use angularGrid.pluginService._grid.setColumns() & ._grid.getColumns() but I don't see that documented anywhere. Also it causes inconsistencies in other variables like visibleColumns and areVisibleColumnsDifferent.

https://stackblitz.com/edit/angular-cjiajg

angularGridReady(angularGrid: AngularGridInstance) {
this.angularGrid = angularGrid;
console.log(angularGrid.gridStateService.getColumns()); // returns []
this.angularGrid.gridStateService.resetColumns(this.columnView); // does nothing?
console.log(angularGrid.pluginService._grid.getColumns()); // returns original columns
this.angularGrid.pluginService._grid.setColumns(this.columnView); // changes columns
console.log(angularGrid.pluginService.areVisibleColumnDifferent); // false should be true
console.log(angularGrid.pluginService._grid.getColumns()); // returns the partial list
}

Using Angular components in a custom editor's template

Let's say I want to use the ng-select plugin as a custom editor's template.

I tried the following very basic approach but, as I expected, the HTML is not parsed by Angular so the <ng-select> tag and {{ item | json }} template expression are ignored:

export class NgSelectSlickEditor implements Editor {

	$input: any;
	defaultValue: any;

	people = [
		{ id: "1", name: "Jean" },
		{ id: "2", name: "Pierre" },
		{ id: "3", name: "Paul" },
	];

	constructor(private args: any) {
		this.init();
	}

	init() {
		this.$input = $(`
				<ng-select class="no-style-select"
					[items]="people"
					bindValue="id" bindLabel="name"
					[clearable]="false"
				>
					<ng-template ng-label-tmp ng-option-tmp let-item="item">
						{{ item | json }}
					</ng-template>
				</ng-select>
			`)
			.appendTo(this.args.container)
		;
	}

	save() {}
	cancel() {}
	hide() {}
	show() {}
	position(position: any) {}
	destroy() {}
	focus() {}
	applyValue(item: any, state: any) {}
	loadValue(item: any) {}
	serializeValue(): any {}
	isValueChanged(): boolean {
		return;
	}
	validate(): EditorValidatorOutput {
		return;
	}
}

Is there any way I could use such components as custom editors?

updateCell

Hallo. In JS version I can update only one cell with slickgrid.updateCell(x,y).

Now I must update all row, but it is a problem, because I put a countdown timer in the first column, and I can`t edit any cell.

How can I do that in angular version?

How to use Slick.RowMoveManager for drag and drop

I'm submitting a bug report
I'm submitting a feature request

• Library Version:
  major.minor.patch

Please tell us about your environment:

• Operating System:
  Windows [7|8|8.1|10]

• Browser:
  Chrome XX

• Language:
  TypeScript, Angular 6

Current behavior:
I'm using Angular-SlickGrid and trying to implement the drag and drop feature. I referred following URL to implement the same. https://mleibman.github.io/SlickGrid/examples/example9-row-reordering.htmI

I was trying to use below code snippet :
this.gridObj.setSelectionModel(new Slick.RowSelectionModel());
var moveRowsPlugin = new Slick.RowMoveManager();
self.gridObj.registerPlugin(moveRowsPlugin);

Not able to use RowMoveManager as type script defination is not available.
Please help me on this issue.

Expected/desired behavior:

• What is the expected behavior?

• What is the motivation / use case for changing the behavior?

hide column after reorder doesn't work

I'm submitting a bug report

• Library Version:
  1.6.1

• Operating System:
  Windows [10]

• Browser:
  all

Current behavior:

I noticed that when you move column order with the mouse. if you try to hide column it doesn't work.

for example in https://ghiscoding.github.io/angular-slickgrid-bs4-demo/#/basic

on the grid 1 move the "title" column in the second place and try to hide it.

#grid1 does not exist in the DOM.

Hi,
i follow tuto (https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step)
but i still get this error : ERROR Error: SlickGrid requires a valid container, #grid1 does not exist in the DOM

Thank's

NullInjectorError: No provider for config!

I'm submitting a bug report

• Library Version:
  1.7.6

Current behavior:
I thoroughly followed the HOWTO setup guide, including the localization setup with correct ngx-translate versions, but when I try to include an <angular-slickgrid> tag in my template, I get the following error:

core.js:1598 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[config]: 
  StaticInjectorError(Platform: core)[config]: 
    NullInjectorError: No provider for config!
Error: StaticInjectorError(AppModule)[config]: 
  StaticInjectorError(Platform: core)[config]: 
    NullInjectorError: No provider for config!
    at NullInjector.push.../../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveNgModuleDep (core.js:9217)
    at NgModuleRef_.push.../../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9911)
    at resolveDep (core.js:10276)
    at NullInjector.push.../../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push.../../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveNgModuleDep (core.js:9217)
    at NgModuleRef_.push.../../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9911)
    at resolveDep (core.js:10276)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push.../../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

Before the error above, I also had similar errors with missing providers for TranslateService (which disapeared on its own after playing with npm packages...) and for CollectionService (which I then added to my AppModule).

Now I don't know what is this missing config and what to provide more... I tried to provide SlickgridConfig but it doesn't work.
Are there other services to provide which are not mentioned in the HOWTO setup guide or is my installation broken?

• My package.json dependencies:

{
	"dependencies": {
		"@angular/animations": "6.0.1",
		"@angular/cdk": "^6.4.5",
		"@angular/common": "6.0.1",
		"@angular/compiler": "6.0.1",
		"@angular/core": "6.0.1",
		"@angular/forms": "6.0.1",
		"@angular/material": "^6.4.5",
		"@angular/material-moment-adapter": "^7.0.1",
		"@angular/platform-browser": "6.0.1",
		"@angular/platform-browser-dynamic": "6.0.1",
		"@angular/router": "6.0.1",
		"@ghs/scss": "file:libs/scss",
		"@ng-select/ng-select": "^2.9.0",
		"@ngrx/effects": "5.2.0",
		"@ngrx/router-store": "5.2.0",
		"@ngrx/store": "5.2.0",
		"@ngrx/store-devtools": "5.2.0",
		"@ngx-translate/core": "^9.1.1",
		"@ngx-translate/http-loader": "^2.0.0",
		"@nrwl/nx": "6.1.0",
		"angular-slickgrid": "^1.7.6",
		"bootstrap": "^4.1.3",
		"core-js": "^2.5.4",
		"file-saver": "^2.0.0-rc.4",
		"font-awesome": "^4.7.0",
		"hammerjs": "^2.0.8",
		"izitoast": "^1.4.0",
		"jquery": "^3.3.1",
		"moment": "^2.22.2",
		"nativescript-angular": "~6.1.0",
		"nativescript-ngx-fonticon": "^4.2.0",
		"nativescript-theme-core": "^1.0.4",
		"ngrx-store-freeze": "0.2.2",
		"npm": "^6.4.1",
		"plotly.js": "^1.40.0",
		"progressbar.js": "^1.0.1",
		"randomcolor": "^0.5.3",
		"reflect-metadata": "^0.1.12",
		"rxjs": "^6.3.2",
		"rxjs-compat": "^6.3.2",
		"tippy.js": "^2.5.4",
		"tns-core-modules": "~4.2.0",
		"unorm": "^1.4.1",
		"zone.js": "^0.8.26",
		"zxcvbn": "^4.4.2"
	},
	"devDependencies": {
		"@angular-devkit/build-angular": "~0.6.1",
		"@angular/cli": "6.0.1",
		"@angular/compiler-cli": "6.0.1",
		"@angular/language-service": "6.0.1",
		"@ngrx/schematics": "5.2.0",
		"@nrwl/schematics": "6.1.0",
		"@nstudio/schematics": "^6.2.6",
		"@types/jasmine": "~2.8.6",
		"@types/jasminewd2": "~2.0.3",
		"@types/node": "^10.9.4",
		"codelyzer": "~4.2.1",
		"cross-spawn-promise": "^0.10.1",
		"gulp": "^4.0.0",
		"gulp-git": "^2.8.0",
		"gulp-gzip": "^1.4.2",
		"gulp-json-editor": "^2.4.2",
		"jasmine-core": "~2.99.1",
		"jasmine-marbles": "0.3.1",
		"jasmine-spec-reporter": "~4.2.1",
		"karma": "~2.0.0",
		"karma-chrome-launcher": "~2.2.0",
		"karma-coverage-istanbul-reporter": "~1.4.2",
		"karma-jasmine": "~1.1.0",
		"karma-jasmine-html-reporter": "^0.2.2",
		"prettier": "1.10.2",
		"protractor": "~5.3.0",
		"tns-platform-declarations": "~4.2.0",
		"ts-node": "~5.0.1",
		"tslint": "~5.9.1",
		"typescript": "2.7.2"
	}
}

• My angular-cli.json's styles and scripts arrays:

"styles": [
	"node_modules/bootstrap/dist/css/bootstrap.min.css",
	"node_modules/font-awesome/css/font-awesome.css",
	"node_modules/flatpickr/dist/flatpickr.css",
	"node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css",
	"xplat/web/scss/custom-slickgrid-theme.scss",
	"apps/web-project/src/styles.scss"
],
"scripts": [
	"node_modules/jquery/dist/jquery.js",
	"node_modules/jquery-ui-dist/jquery-ui.min.js",
	"node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
	"node_modules/bootstrap/dist/js/bootstrap.js",
	"node_modules/angular-slickgrid/lib/multiple-select/multiple-select.js"
]

• My (cleaned up) AppModule:

import { NgModule, LOCALE_ID, Injector, APP_INITIALIZER } from '@angular/core';
import { LOCATION_INITIALIZED } from "@angular/common";
import { HttpClient, HttpClientModule } from '@angular/common/http';

import { AngularSlickgridModule, CollectionService } from 'angular-slickgrid';
import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';

// AoT requires an exported function for factories
export function createTranslateLoader(http: HttpClient) {
	return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

// use an Initializer Factory as describe here: https://github.com/ngx-translate/core/issues/517#issuecomment-299637956
export function appInitializerFactory(translate: TranslateService, injector: Injector) {
	return () => new Promise<any>((resolve: any) => {
		const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
		locationInitialized.then(() => {
			const langToSet = 'fr';
			translate.setDefaultLang('fr');
			translate.use(langToSet).subscribe(() => {
				// console.info(`Successfully initialized '${langToSet}' language.'`);
			}, err => {
				console.error(`Problem with '${langToSet}' language initialization.'`);
			}, () => {
				resolve(null);
			});
		});
	});
}

@NgModule({
	imports: [
		/*...*/
		HttpClientModule,
		TranslateModule.forRoot({
			loader: {
				provide: TranslateLoader,
				useFactory: (createTranslateLoader),
				deps: [HttpClient]
			}
		}),
		AngularSlickgridModule,
	],
	declarations: [/*...*/],
	providers: [
		{
			provide: APP_INITIALIZER,
			useFactory: appInitializerFactory,
			deps: [TranslateService, Injector],
			multi: true,
		},
		CollectionService,
		/*...*/
	],
	bootstrap: [AppComponent]
})
export class AppModule {}

can i use Bootstrap 4

We are using BS 4 in our Project. Can we use Angular-Slickgrid ?

Thanks

How to set gridState from queryParam?

I'm submitting a question

• Library Version:
  1.6.1

I'd like to be able to extract the gridState as a queryParam, so I can cut and paste column/filter settings as part of the URL. Everything works when I save/restore gridState from localStorage. I'm having an asynchronous problem when I try to restore the gridState from a queryParam.

I'm using json-url to base64 encode and compress the gridState as a URL parameter. The problem is that json-url decompresses the URL and returns a promise. If I use that promise to update my gridOption presets, it doesn't take effect, because I think the grid rendered with the default preset values, before the decompress promise returns.

Here's a code snippet of what I'm trying to do:

  ngOnInit() {
  ...
    const paramMap = this.route.snapshot.queryParamMap;
    if (paramMap.has('gridState')) {
      const lib = JsonUrl('lzma');
      lib.decompress(paramMap.get('gridState')).then(output => {
       this.gridOptions.presets = JSON.parse(output);
       console.log(this.gridOptions.presets);
      });
    } else if (localStorage.getItem('gridState')) {
      this.gridOptions.presets = JSON.parse(localStorage.getItem('gridState'));
    }
  ...
  }

  getGridState() {
    const gridState: GridState = this.angularGrid.gridStateService.getCurrentGridState();
    const lib = JsonUrl('lzma');
    const href = environment.base_href + '/#/features/por?gridState=';
    lib.compress(JSON.stringify(gridState)).then(output => window.open(href + output));
  }

The console.log shows the gridOptions from my queryParams, but the grid does not.

How can I either:

• delay the grid rendering until lib.decompress promise resolves? or
• how can I re-render the grid after having updated my presets?

No provider for TranslateService!

we use electron, ng 5x and ngx-translate 10x
we following the Step by step instructions (step 5 minimal Setup)

when we use the grid
the following error occurs and we do not know how to fix it.

core.js:1448 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AngularSlickgridComponent -> TranslateService]: StaticInjectorError(Platform: core)[AngularSlickgridComponent -> TranslateService]: NullInjectorError: No provider for TranslateService! Error: StaticInjectorError(AppModule)[AngularSlickgridComponent -> TranslateService]: StaticInjectorError(Platform: core)[AngularSlickgridComponent -> TranslateService]: NullInjectorError: No provider for TranslateService! at _NullInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js._NullInjector.get (core.js:1002) at resolveToken (core.js:1300) at tryResolveToken (core.js:1242) at StaticInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js.StaticInjector.get (core.js:1110) at resolveToken (core.js:1300) at tryResolveToken (core.js:1242) at StaticInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js.StaticInjector.get (core.js:1110) at resolveNgModuleDep (core.js:10854) at _createClass (core.js:10891) at _createProviderInstance$1 (core.js:10865) at _NullInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js._NullInjector.get (core.js:1002) at resolveToken (core.js:1300) at tryResolveToken (core.js:1242) at StaticInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js.StaticInjector.get (core.js:1110) at resolveToken (core.js:1300) at tryResolveToken (core.js:1242) at StaticInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js.StaticInjector.get (core.js:1110) at resolveNgModuleDep (core.js:10854) at _createClass (core.js:10891) at _createProviderInstance$1 (core.js:10865) at resolvePromise (zone.js:809) at resolvePromise (zone.js:775) at zone.js:858 at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at <anonymous>

Sort icons on last column is hidden behind Grid Menu with small dataset

I'm submitting a bug report

• Language:
  all

Current behavior:
Sort icons on last column is hidden behind Grid Menu with small dataset

Expected/desired behavior:

• What is the expected behavior?
  Scrolling should probably be displayed at all time since the Grid Menu rely on the fact that the scrolling bar is the same width as the Grid Menu.

• What is the motivation / use case for changing the behavior?

Wiki Update

We are using Angular-Slickgrid with Angular 6 and have discovered that the declarations of the colum definitions and grid options cannot be left as undefined/null.

The "Create a basic grid" in the Wiki "HOWTO Step by Step" needs to be corrected as follows:
..
export class GridBasicComponent implements OnInit {
columnDefinitions: Column[] = [];
gridOptions: GridOption = {};
dataset: any[];
..

"useEditor is not a constructor" when using setColumns

I'm submitting a bug report

• Library Version:
  4.5.2

• Language:
  TypeScript 2.7.2

Current behavior:
When enabling edition in the grid's options and setting editors for each column definitions, I get the following error when I try to edit a cell:

ERROR TypeError: useEditor is not a constructor
    at makeActiveCellEditable (slick.grid.js:3137)
    at setActiveCellInternal (slick.grid.js:3028)
    at gotoCell (slick.grid.js:3758)
    at HTMLDivElement.handleDblClick (slick.grid.js:2834)
    at HTMLDivElement.dispatch (jquery.js:5183)
    at HTMLDivElement.$event.dispatch (jquery.event.drag-2.3.0.js:382)
    at HTMLDivElement.push.../../node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js.$event.dispatch (jquery.event.drag-2.3.0.js:382)
    at HTMLDivElement.elemData.handle (jquery.js:4991)
    at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)

Here are my gridOptions and columnDefinitions objects:

this.gridOptions = {
	editable: true,
	autoEdit: false,
	autoCommitEdit: false,
	enableCellNavigation: true,
	enableHeaderMenu: true,
};

this.columnDefinitions = [
	{
		id: 'col1_id', name: 'Column 1', field: 'col1',
		type: FieldType.string,
		editor: { model: Editors.text },
	},
	{
		id: 'col2_id', name: 'Column 2', field: 'col2',
		type: FieldType.string,
		editor: { model: Editors.text },
	},
];

// Then I fetch data from a back-end and add a column depending on the data received:
this.columnDefinitions.push({
	{
		id: 'colX_id', name: 'Column X', field: 'colX',
		type: FieldType.string,
		editor: { model: Editors.text },
	},
});

// And I update the grid's columns definitions:
// (this.angularGrid comes from the `onAngularGridCreated` event)
this.angularGrid.slickGrid.setColumns(this.columnDefinitions);

Before adding the "Column X", the editing works as expected.
But once it's added, each cell throws the mentioned error.

What should I do to add columns dynamically without breaking the cell editing feature?

BUG - Using Single Row Selection should not display "Select All" checkbox

As the title says, we shouldn't display or at least provide a way to hide the "Select All" checkbox when we know that we are using Single Row Selection. We can see this behavior in the demo

A PR was opened and merge in the 6pac repo, waiting for a new release (will probably be 2.3.21 since latest 2.3.20 version has an undesirable bug)

Titre des colonnes non visible

salut,
je voulais savoir pourquoi les noms des colonnes ne sont pas encore visibles dans la version Angular-Slickgrid 1.1.0 qui viens d’être lancée?
Merci :)

BUG - Event Dispatch should be cancelable

I'm submitting a bug report

Current behavior:
All SlickGrid called through EventDispatch should be cancelable, and this requirement is necessary for some of the subscribed event. The event that I currently have problem with is onBeforeEditCell and as answered by the author of SlickGrid in this SO, the way to cancel an edit is to return false which doesn't do anything when currently used with EventDispatch

Expected/desired behavior:

• What is the expected behavior?
  EventDispatch should be cancelable

• What is the motivation / use case for changing the behavior?
  Have the same behavior as regular SlickGrid subscribed event.

Implementing a remote model implementation

Hi I love what you have been doing, however I need to have large remote datasets that change the front end real time.

I have used the remote model code https://github.com/6pac/SlickGrid/blob/master/slick.remotemodel.js in the past with great success. Could it be possible to provide a hook to provide one's own custom remote model rather than the DataView provided?

Regards

Edward

Compiling Error when using --aot or --prod switch

I am trying to use the grid.
It works fine calling ng build.

calling ng build --aot
or calling ng build --prod
I get the error
ERROR in Error: Can't resolve all parameters for AngularSlickgridComponent in /Users/dg/Documents/repositories/yoda/src/gui-server/node_modules/angular-slickgrid/angular-slickgrid.d.ts: (?, ?, ?, ?, ?, ?).

What is my mistake?

Grouping feature

Currently your project do not support the row-grouping, while the original slickgrid contains it.
It's possibile to access directly to the original Slick DataView and set the original GroupItemMetadataProvider or create a new one? This is necessary before the first init of the SlickGrid, so I think that the events availables is not enough...

Create a formatter based on Angular components

Looking into the source code that shows how to create formatters, I found out how to create a PercentCompleteFormatter formatter, I brought it into my project and it works fine.

export const PercentCompleteFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any): any => { // OK if ( value === null || value === '' ) { return '-'; } else if ( value < 50 ) { return "<span style='color:red;font-weight:bold;'>${value}%</span>"; } else { return "<span style='color:green'>${value}%</span>"; } }

Would you please tell me how to use my custom Angular components instead of using HTML tag "" ?
If not possible, is there any Angular like approach ?
Thanks,

How to make column string filter case insensitive?

I couldn't find any documentation on how to write custom filters for the header row filters.
I'm trying to make the string filter case-insensitive.
I know the column has a "filter" option, but I'm not sure what to put there.

I see the filter interface:
export declare type Filter = (searchTerm: string, columnDef: Column) => string;

And I see the example:
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', maxWidth: 80, formatter: Formatters.checkmark,
type: FieldType.boolean,
sortable: true,
filterable: true,
filter: {
searchTerm: '', // default selection
type: FormElementType.select,
selectOptions: [ { value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' } ]
}

but I'm not sure what a case insensitive filter should look like?

Dynamic Headers in Angular 5

Angular-Slickgrid loads all columns in AfterViewInit and does not change it when the column definition data changes. This should be allowed so that columns can be dynamically added or the entire list can be dynamically loaded using AJAX.

To overcome this issue I am having to render the entire table only after I have the required data.

(Seeing the code, all the header row calculations are happening only in ngAfterViewInit. It should effectively happen also in ngOnChanges when the gridCols data changes. I am not sure how big of a change that would be.)

Error "ExpressionChangedAfterItHasBeenCheckedError" in demo "13- Backend Server Custom Paging"

It appears after using latest changes in package.json that error
ExpressionChangedAfterItHasBeenCheckedError starts from being raised with a stacktrace as:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'innerHTML: http://127.0.0.1:8080/grid!display.do?'. Current value: 'innerHTML: http://127.0.0.1:8080/grid!display.do?&currentPage=1'.
Stack trace:
viewDebugError@webpack-internal:///./node_modules/@angular/core/esm5/core.js:9991:32

The reason is described here: angular/angular#22304
"...You can't do it in ngAfterViewInit directly (synchronously) because it is a moment when Angular is preparing to update the View based on the latest data changes...".

The solution is described here:
https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
Asynchronous update
setTimeout(() => {...});

So, to implement it in our example, we should surround the content of SwtCommonGridTestComponent.ngAfterViewInit() by a setTimeout(() => { /body of ngAfterViewInit() goes here/ }.

A final solution looks like this:

ngAfterViewInit() {
     this.logger.info('method [ngAfterViewInit] - START');
     setTimeout(() => {
         // Init datagrid example:
         this.commonGridPag.processing = true;

         // Real HTTP call
         this.currentUrl = this.testurl + '&currentPage=1';
         this.commonGrid.CustomGrid(data_sample.pagination_samples.grid.metadata);
         this.commonGrid.gridData = data_sample.pagination_samples.grid.rows;
         this.commonGridPag.pageCount = data_sample.pagination_samples.grid.rows.maxpage;

         this.commonGridPag.processing = false;
     });       
     this.logger.info('method [ngAfterViewInit] - END');
  }

Would you please apply the update ?

Error "NullInjectorError: No provider for X" in version 1.0.15

First of all, thank you this great job on removing the singleton services usage.
I upgraded the angular slick version into 1.0.15 this morning (latest).
I followed all instructions as described in Migration-from-0.x-to-1.x

No compilation Error, but I get this error when opening the view:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MyGridTestComponent -> GridService]: 
  StaticInjectorError(Platform: core)[MyGridTestComponent -> GridService]: 
    NullInjectorError: No provider for GridService!

I followed the instructions to resolve this issue based on stack trace messages, so I found that I have to provide the service "GridService" inside my component (no singleton service).
Other services are also provided (each time the error message changes, I add the necessary providing).

Finally, to got it working, I was obliged to provide all this list of services internally to my component:

 providers :[ AngularSlickgridComponent, GridService, ControlAndPluginService, ExportService, 
               FilterService, SortService, GridStateService, ResizerService, 
               FilterFactory, SlickgridConfig]

NB: Services FilterFactory and SlickgridConfig are not exported by default (ie version from npm).
So, I built the library and made them public. I installed the locally modified library.

NB: I tried the provide only "SlickPaginationComponent" as it become a service, but it fails with the same message error.

NB: Maybe one other possibility (that I haven't tested): MyGridTestComponent will extend AngularSlickgridComponent , I think I will not be in a need to rebuild the library, but I'll have provide about 10 services to pass them as arguments to the super class 'AngularSlickgridComponent'

My question: Am I doing wrong from the beginning ?
Do we really need for this number of services to be injected (provided) ?

SlickGrid requires a valid container, #contactsGrid3 does not exist in the DOM.

I'm submitting a bug report**

• Win10:

• Browser:
  Chrome

• Language:
  TypeScript X.X

Code:


<angular-slickgrid gridId="contactsGrid3"
(onAngularGridCreated)="conatctsGridReady($event)"
(onDataviewCreated)="dataviewReady($event)"
(onGridCreated)="gridReady($event)"
[dataset]="contacts"
[columnDefinitions]="contactsColumnDefinitions"
[gridOptions]="contactsGridOptions"
(sgOnSelectedRowsChanged)="onSelectedRowsChanged($event.detail.eventData, $event.detail.args)">

Getting error:
aComponent.html:13 ERROR Error: SlickGrid requires a valid container, #contactsGrid3 does not exist in the DOM.

If I creating root div with id="contactsGrid3", it's totally destroying grid view.
Any help?
BR

multipleSelect filter doesn't handle cell value arrays

If I have a cell with the value: ["foo","bar"] it displays correctly on the grid as "foo,bar"
If I select "foo" from the multiSelect filter, I get all rows with "foo", but I do not get the row with "foo,bar"
If I select "foo" and "bar" from the multiSelect filter, I get all rows with "foo" and all rows with "bar" but not "foo,bar".

I suspect I should be able to write a custom filter that replicates the multiSelect filter, but searches for matches on any element in the array. Before doing that, is there an option/config setting that I'm not using correctly?

Other ideas for contributions and features

From @sabeurch in a different post

Well, thinking especially about item editors: Those 2 facilities are in my planning, but milestone is not yet specified as other tasks in the work are taking my time:
1- Generic Formater, could be used to display different types of formatters in the same column.
2- Column Header Formatter, you already introduced the use of Header Button Plugin and Header Menu, but it will be better for other purposes usage to use formatters rather than plugins. Example, if we want to add a checkbox into the column's header, developer will find it much easier.
Some other minors, like
1- Using jsonpath library, it will be easier for developer to just set the basic URL+Json Xpath like expression for the datagrid. Datagrid will be self updating itself.
2- Also, image formatter based on based 64 encoded images. Images could be retrieved from DB& dynamically, no more need for assets folder. The idea comes from using "font awesome" or "glyphicon".

Update wiki for custom editors

Editors.custom does not exist. It should just be:
model: CustomInputEditor // reference your custom editor class

Grid menu option "showClearAllFiltersCommand" is always displayed

When I set grid menu options as follow:

this.gridOptions = {
    ....,
    gridMenu: {
        showClearAllFiltersCommand: false,
        showToggleFilterCommand: false
    }
    ....,
}

This has no effect, clear filter and toggle filter commands are alwasy displayed.

I think, it has to do with those lines of code:

options.gridMenu.showClearAllFiltersCommand = options.gridMenu.showClearAllFiltersCommand || true;
options.gridMenu.showRefreshDatasetCommand = options.gridMenu.showRefreshDatasetCommand || true;
options.gridMenu.showToggleFilterCommand = options.gridMenu.showToggleFilterCommand || true;

in file "angular-slickgrid.js", Logic of "|| true" sets values always into true.

Would you please verify ?

Note: For the moment as a workaround, we can disable those commands from option "customItems", but it keeps them displayed as disabled.