Dynamic Headers in Angular 5 about angular-slickgrid

[ghiscoding]

How about changing the column header directly in SlickGrid? See this SO question. To have access to the grid object, see more info in the Wiki - OnEvent, use the Event Emitter (onGridCreated)="gridReady($event)"

Also I don't think that using the ngOnChanges will be good, I already have a getter/setter on the dataset object because it could change at any moment. The dataset setter could be in conflict with the
ngOnChanges. However, moving the code from ngAfterViewInit into an initialize function that can be called by the ngAfterViewInit and a new setter on the columnDefinitions is a possibility. I wouldn't do it on all properties though, especially not the gridOptions since some of it's properties can be changed on the fly and we shouldn't have to re-create the grid every time for that.

[ghiscoding]

I have to do some quick fixes in the lib and gave a quick try to do what I wrote in previous comment, but it doesn't work so good. I get a few different kind of errors with the services.

I think the best option is to have a service that supports adding or modifying the SlickGrid column definition dynamically. This SO question is probably the best way to do it.

I have undone all the changes since it brought more problems.
For reference, this is what I tried.

1. Move the grid creation into a gridInitialization function
2. Make the columnDefinitions a getter/setter
3. On any subsequent columnDefinitions changes, call the gridInitialization function

Here's the code

didAfterViewInitRan = false;

  @Input()
  set columnDefinitions(columnDefinitions: Column[]) {
    this._columnDefinitions = columnDefinitions;
    if (this.didAfterViewInitRan) {
      this.initialization();
    }
  }
  get columnDefinitions(): Column[] {
    return this._columnDefinitions;
  }

ngAfterViewInit() {
    this.initialization();
    this.didAfterViewInitRan = true;
  }

initialization() {
 // create the grid in here
}

[Deltatiger]

I am doubtful that this would work for a few reasons,

• This will still only call the initialization only once. If the first time it is called with this._columnDefinitions as undefined (this is what happened to me) then the second time when actual data is set will still be of no use since you are setting a flag.
• You can remove the setters and getters and handle those in the ngOnChanges as I feel they are more logically places to update the component when the data changes.
• ngOnChanges can be implemented so that internal changes are only made for certain actions like data or header changes and both can trigger different set of update actions within the component.

[ghiscoding]

The commit that I made made this partially working, it does add the column to the definition list and we do see it in the grid. However, most of the services in Angular-Slickgrid are initialized through init(this.grid, this.gridOptions, this.columnDefinitions) and because of that last part, then not all services have the updated column definitions. The first misbehavior that I saw was that I use headerKey for i18n translation and adding a new column header worked but it wasn't translated because the service that translate them didn't get latest column definitions.

To fix the service not having all column definitions and grid options, there 2 ways to deal with that

1. Use a shared Service to pass shared variable, like this.grid, this.gridOptions, etc...
2. Still use init() for all Services but only pass this.grid to them, since we can get the gridOptions and columnDefinitions directly from the grid object.

I would opt for option 2, but that will take some time and that would fix the misbehavior I describe on top. Will that fix all problems? I don't know but that would be a good start.

Or if you think your approach is still the best, then I certainly welcome PR if you can make it work and all examples still works.

[ghiscoding]

I have pushed a new version 0.13.4 to NPM which has the commit made yesterday. It doesn't fix everything, but it's a start. The change does bring a setter to the columnDefinitions and it adds a column header dynamically.

[ghiscoding]

With the latest PR #28 and extra commit it is now possible to change dynamically, at any point in time, Grid Options and Column Definitions. The Services, will always use the latest properties from the Grid object. This officially bring support to dynamic Grid Options and Column Definitions.

Changing a Grid Options is instant and does not need a Setter internally, however changing the Column Definitions will trigger a change with a Setter on the columnDefinitions object to make sure that it also re-translate header if it needs to.

Test Code

dynamicallyAddHeader() {
    this.columnDefinitions.push({ id: 'title2', field: 'id', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } });
    this.columnDefinitions = this.columnDefinitions.slice();
}

With the new version, we can add a new Column and change Grid Options dynamically and all Services are working as expected since they will get the properties at when it reaches the Service through the Grid object, all Services are basically doing something like this:

const gridOptions = this._grid.getOptions();
const columnDefinitions = this._grid.getColumns();

which fixes the original issue reported.
This is now available in version 0.17.0