Retaining instances of Handsontable through a stepper process Angular 6

Tags: #<Tag:0x00007f8b1d279728>
#1

This is my first time using Handsontable in an Angular 6 application. So this question might sound a bit stupid. There’s a stepper process containing different tables in the application. I need to build a functionality of ‘Going Back’ to the previous step, and show the grid with fresh checkboxes. It does show the grid when I go back but, does not allow me to make any selections. As I dove deeper into Handsontable, I realized that it destroys an instance of a grid once it renders the next grid. Is there a way to save this instance, and get back to it when a user wants to say - get back to the previous step, or the first step? I have tried to save an instance of a grid in a variable, and calling it again but to no avail. A working Angular 6/ Typescript example would be amazing, else please advice.

//app.component.ts

import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';
import { HotTableRegisterer } from '@handsontable/angular';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular 6';

strikingDeals: any[] = [];
public stepper = 1;
public disabled = true;

public colHeaders_selectClosingDeal: string[];
public columns_selectClosingDeal: any[];
public dataset_selectClosingDeal;
public hotInstance_selectClosingDeal: Handsontable;
public sourceData_selectClosingDeal: any;

temp_instance: Handsontable; //to save instance of table
hot_select: any;

public onAfterInit_selectClosingDeal = (hotInstance: Handsontable) => {
this.hotInstance_selectClosingDeal = hotInstance;
this.temp_instance = this.hotInstance_selectClosingDeal;
}

public hotSettings_selectClosingDeal = {
afterChange: (hot: any, changes: any, source: string) => {
  if (source === 'edit') {
  //console.log('Hot Table changes: ', hot, changes, 
  this.hotInstance_selectClosingDeal);
    this.disabled = false;       
  }
  else {
    this.disabled = true;
  }
},
afterDestroy: () => {
console.log('Select Closing Deals table destroyed'); //trying to debug here
 }
}

constructor(private _hotRegisterer: HotTableRegisterer){
 //Select Closing Deals
 this.colHeaders_selectClosingDeal = ['Select', 'File Code', 
 'Underlyings'];
  this.columns_selectClosingDeal = [
   {
    data: 'select',
    type: 'checkbox',
    className: 'htCenter',
    editor: false
   },
   {
    data: 'fileCode',
    type: 'text',
    className: 'htCenter',
    editor: false
   },
   {
    data: 'underlyings',
    type: 'text',
    className: 'htCenter',
    editor: false
   }
 ]; 
}

ngOnInit(){
 this.dataset_selectClosingDeal = this.strikingDeals.map(deal => ({ 
 'fileCode': deal.file_code, 'underlyings': deal.underlyings.map(undl => 
 undl.bbg_code).reduce((aggregator, current_value) => `${aggregator}, 
 ${current_value}`),
    'deal': deal
  }));
 }
}

**//app.component.html**

<hot-table class="hot" 
 [hotId]="hotSelectClosingDeals" 
 [settings]="hotSettings_selectClosingDeal" 
 [colHeaders]="colHeaders_selectClosingDeal" 
 [rowHeaders]="true" 
 [columns]="columns_selectClosingDeal" 
 [data]="dataset_selectClosingDeal" 
 [afterInit]="onAfterInit_selectClosingDeal">
</hot-table>
#2

Hey @abkap02

haven’t we had a similar discussion on emails?

EDIT: I just read the email.

I will ask our developer to take a look at the code. He should be able to share some tips in Tuesday - Wednesday.

#3

Hey @abkap02

it looks like you might be experiencing an infinite loop. You can add

    afterRender: function(){
      console.log('afterRender')
    },
    afterSelection: function(){
      console.log('afterSelection')
    },

and

console.log('afterSelection')

to the afterChange hook to check if there’s an unwanted loop.

#4