Issue while loading multiple sheet format in same instance

Tags: #<Tag:0x00007f136870a760>
#1

Hi All,

I am having one issue while loading different formats in same hottable. I have button in page on click it will populate one by one sheet from a workbook. First two sheets are loaded correctly but from third sheet previous cell formats are getting overlapped with new one. Below is the code snippet which I have used to load data and format.

let container = document.querySelector('#hottable')!;
let hotSettings: Handsontable.GridSettings = {
  data: this.dataset,
  rowHeaders: true,
  colHeaders: true,
  stretchH: 'all',
  cell: this.hotcelltype,
  mergeCells: this.hotmergecells,
  height: "730px",
  colWidths: this.hotcolWidths,
  rowHeights: this.hotrowHeights,
  autoWrapRow: true,
  autoWrapCol: true,
  manualColumnResize: true,
  manualRowResize: true,
  fixedColumnsLeft: this.fixedcolumnstoleft,
  fixedRowsTop: this.fixedrowsfromtop,
  formulas: {
    engine: HyperFormula
  },
  contextMenu: true,
  hiddenRows: {
  rows: this.hothiddenrows,
  indicators: true
  }
};

let hot = new Handsontable(container, hotSettings);
hot.updateSettings(hotSettings)
#2

Hi @abhisekuit

Is there a possibility for you to send us a demo to replicate the issue?

When I simply use those settings to create 3 tables with the same config, it seems to work fine: https://jsfiddle.net/9wmvnd48/. But I would also need to know the steps to replicate the issue.

#3

Hi @aleksandra_budnik

Apologies, I can not share the whole code but below are the few sections how we are trying to do it in angular.

On Button click I am sending sheet wise JSON data to the function for rendering.

HTML :

DIV HOTTABLE div1 id=“hottable” "
BUTTON TO ITERATE BETWEEN SHEETS button1 onclick=“GenerateSheet()” “Click me”

Angular Code :

GenerateHotTable(data: any) {
let exceldata = JSON.parse(JSON.stringify(data));

for (let row = 0; row < rowformatdata.length; row++) {
  let isRowHeightIncluded = false;
  let isColHeightIncluded = false;

  for (let col = 0; col < rowformatdata[row].values.length; col++) {

    //ADDITION OF CELL TYPE
    this.hotcelltype.push({
      All Formats are getting Added in here
    });
  }
}

Handsontable.renderers.registerRenderer('customStylesRenderer', (hotInstance, TD, row, column, ...rest) => {
  Handsontable.renderers.TextRenderer(hotInstance, TD, row, column, ...rest);

  var cellstyle = this.hotcelltype.filter(e => e.row == row && e.col == column); //.map(e => e.fontname);
  if (cellstyle.length > 0) {
    TD.style.fontSize = String(cellstyle.map(e => e.fontsize)[0]).replace('.0', '') + 'pt';
    TD.style.fontFamily = cellstyle.map(e => e.fontname)[0];
    TD.style.backgroundColor = "rgb(" + cellstyle.map(e => e.backcolor)[0] + ")";
  }
});

//SET UP HOTTABLE
let container = document.querySelector('#hottable')!;
let hotSettings: Handsontable.GridSettings = {
  data: this.dataset,
  rowHeaders: true,
  colHeaders: true,
  stretchH: 'all',
  cell: this.hotcelltype,
  mergeCells: this.hotmergecells,
  height: "730px",
  colWidths: this.hotcolWidths,
  rowHeights: this.hotrowHeights,
  autoWrapRow: true,
  autoWrapCol: true,
  manualColumnResize: true,
  manualRowResize: true,
  fixedColumnsLeft: this.fixedcolumnstoleft,
  fixedRowsTop: this.fixedrowsfromtop,
  formulas: {
    engine: HyperFormula
  },
  contextMenu: true,
  hiddenRows: {
    rows: this.hothiddenrows,
    indicators: true
  }
};

let hot = new Handsontable(container, hotSettings);
hot.updateSettings(hotSettings)

}

#4

I wouldn’t ask for a full demo. That would then be a typical code review (which we do not do on the forum).

However, it seems that it would still be better if you could add the missing variable to my demo and fork it. For example, the customStylesRenderer renderer is defined but not used.

If you do not want to share any demo on the forum, we can also discuss the subject at support@handsontable.com