Customizing cell and adding is not taking the space in the cell for new line

Hello,
 
Thank you for your question.
 
We suggest using the \n newline character in your data set to achieve the desired result. Also, some additional adjustments are needed to adjust cells' dimensions. We have prepared the JSFiddle to demonstrate these adjustments: https://jsfiddle.net/flexmonster/g4wmjvsd/.
 
First, add the following CSS rules:

.fm-cell {
  white-space: pre-wrap !important;
}

#fm-pivot-view .fm-grid-row {
  max-height: 500px; /* increase if needed */
}

 
Next, use the reportchange and reportcomplete events to track changes of the grid and adjust the Table Sizes Object:

flexmonster.on("reportcomplete", () => {
  flexmonster.off("reportcomplete");
  subscriptionManager();
  flexmonster.refresh();
});
flexmonster.on("reportchange", subscriptionManager);

 
Here, subscriptionManager function is responsible for a correct sequence of subscriptions to Flexmonster events:

function subscriptionManager() {
  flexmonster.off("reportchange");
  flexmonster.on("reportchange", () => {
    flexmonster.off("reportchange");
    flexmonster.on("reportchange", subscriptionManager);
  });
  flexmonster.on("aftergriddraw", () => {
    flexmonster.off("aftergriddraw");
		adjustTableSizes();
  });
}

 
Finally, the adjustTableSizes function called from the subscriptionManager is responsible for adjusting cells' dimensions:

function adjustTableSizes() {
  let cells = document.querySelectorAll(".fm-cell");
  let highCells = [...cells].filter(cell => cell.clientHeight < cell.scrollHeight);
  let tableSizes = {
    rows: [],
    columns: []
  };
  highCells.forEach(cell => {
    tableSizes.rows.push({
      idx: +cell.getAttribute("data-r"),
      height: cell.scrollHeight
    });
    tableSizes.columns.push({
      idx: +cell.getAttribute("data-c"),
      width: cell.clientWidth
    });
  });
  flexmonster.setTableSizes(tableSizes);
}

 
Please let us know if it works for you.
Our team is looking forward to hearing your feedback.
 
Regards,
Illia

Hello,
 
Thank you for your feedback. We are happy to hear it works well for you.
 
Please note that Flexmonster does not support multiline cell content by default. Therefore, some aspects may need to be adjusted manually.
Concerning Excel exporting, we want to explain that Excel has different font sizes and line-height. It leads to the incorrect sizing you are facing.
We suggest exporting Excel using the plain option of the exportTo API call. Next, adjust cells' dimensions of the exported content using the third-party charting library (for example, exceljs npm package).
 
We hope it helps.
Do not hesitate to reach out in case other questions arise.
 
Regards,
Illia

Hello,
 
Thank you for your question.
 
The total cannot be changed separately from the rest of the values.
Instead, we suggest creating a calculated value. This will create an additional column with a corresponding total.
Please see the JSFiddle we have prepared for the demonstration: https://jsfiddle.net/flexmonster/hydqfnmp/.
Learn more about calculated values from our documentation: https://www.flexmonster.com/doc/calculated-values/.
 
Please let us know if it works for you.
Our team is looking forward to hearing your feedback.
 
Also, please consider creating new threads for unrelated questions.
 
Best regards,
Illia

Hello,
 
We prepared a JSFiddle demonstrating how to change any row's height using exceljs library: https://jsfiddle.net/flexmonster/t5udhcow/.
 
Please let us know if it helps.
 
Best regards,
Illia

Hello,
 
Please set the ignoreQuotedLineBreaks property of the Data Source Object to false to consider line breaks when parsing CSV data.
 
To optimize our Forum workflow, we would like to ask you to post new unrelated questions in separate forum threads. Thank you for understanding.
 
Please let us know if it helps.
Looking forward to hearing from you.
 
Regards,
Illia

Hello,
 
The entire value should be wrapped in double quotes to add a new line to it. For example:

Category, Price
"Car\nMazda", 32780
"Bike\nYamaha", 13000

Please note that Flexmosnter will try to escape special symbols by adding ad additional \ symbol before a newline character. Use the customizeCell method mentioned earlier to replace it with an actual newline:

flexmonster.customizeCell((cell, data) => {
  cell.text = cell.text.replace("\\n", "\n");
});

Here is a JSFiddle for demonstration: https://jsfiddle.net/flexmonster/kLcmebzp/.
 
Please let us know if it works now.
 
Best regards,
Illia

Hello,
 
We did not manage to reproduce the issue using our recommended wrapper for Angular.
Could you please tell us more about how Flexmonster is embedded in your Angular application? It would be useful to receive a sample demonstrating the issue to reproduce it on our side.
Meanwhile, we recommend checking out our wrapper mentioned earlier. Using the wrapper is the best way to embed Flexmonster in your application and keep it updated.
 
Also, we adjusted the solution with table sizes specifically for Angular.
HTML:

<fm-pivot #pivot
[report]="{ dataSource: { filename: 'https://www.flexmonster.com/uploads/2021/07/data.csv', ignoreQuotedLineBreaks: false }, options: { grid: { type: 'flat' } } }"
(reportcomplete)="adjustTableSizes()" [customizeCell]="customizeCellFunction" [toolbar]="true"
[shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}" [height]="600"
(beforetoolbarcreated)="customizeToolbar($event)"></fm-pivot>

 
Typescript:

customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
  cell.text = cell.text.replace("\\n", "\n");
}

adjustTableSizes = () => {
  this.pivot.flexmonster.off("reportchange");
  let cells = Array.from(document.querySelectorAll(".fm-cell"));
  let highCells = cells.filter(cell => cell.clientHeight < cell.scrollHeight);
  let tableSizes = {
    rows: [],
    columns: []
  };
  highCells.forEach(cell => {
    tableSizes.rows.push({
      idx: +cell.getAttribute("data-r"),
      height: cell.scrollHeight
    });
    tableSizes.columns.push({
    idx: +cell.getAttribute("data-c"),
      width: cell.clientWidth
    });
  });
  this.pivot.flexmonster.setTableSizes(tableSizes);
  this.pivot.flexmonster.on("reportchange", this.adjustTableSizes);
}

We suggest using these code snippets instead of the JSFiddle mentioned earlier.
 
Also, could you please confirm that the mentioned earlier exceljs approach works for you?
Looking forward to hearing from you.
 
Best regards,
Illia

Hello,
 
Here is a complete solution that allows controlling table sizes dynamically when scrolling the grid.
 
First, subscribe to the reportcomplete and customizeCell events:

<fm-pivot #pivot
...
(reportcomplete)="adjustTableSizes()" [customizeCell]="customizeCellFunction" ...
</fm-pivot>

The `customizeFunction` should stay unmodified:

flexmonster.customizeCell((cell, data) => {
  cell.text = cell.text.replaceAll("\\n", "\n");
});

 
The `adjustTableSizes` function should be adjusted in the following way:

adjustTableSizes = () => {
  this.pivot.flexmonster.off("aftergriddraw"); //unsibscribe to avoid loop
  setTimeout(() => {
    this.pivot.flexmonster.on("aftergriddraw", () => {
      this.pivot.flexmonster.off("aftergriddraw");
      this.pivot.flexmonster.on("aftergriddraw", (e) => {
        if (e.smooth == true) {
          this.adjustTableSizes(); //subscribe again
        }
      });
    });
  }, 100); //wait for some time to make sure the grid is rendered successfully
  let cells = Array.from(document.querySelectorAll(".fm-cell"));
  let highCells = cells.filter(cell => cell.clientHeight < cell.scrollHeight);
  let tableSizes = {
    rows: [],
    columns: []
  };
  highCells.forEach(cell => {
    tableSizes.rows.push({
      idx: +cell.getAttribute("data-r"),
      height: cell.scrollHeight
    });
    tableSizes.columns.push({
      idx: +cell.getAttribute("data-c"),
      width: cell.clientWidth + 1 //increasing the value is needed to avoid column shrinking in some cases
    });
  });
  this.pivot.flexmonster.setTableSizes(tableSizes);
}

 
To export sizes correctly to Excel, please use the following function:

exportToExcel() {
  this.pivot.flexmonster.setTableSizes({ //clear tableSizes before export
    rows: []
  });
  this.pivot.flexmonster.on("exportcomplete", () => { //restore tableSizes after export
  this.pivot.flexmonster.off("exportcomplete");
    this.adjustTableSizes();
  });
  this.pivot.flexmonster.exportTo("excel"); //perform export
}

It clears the tableSizes object before export to give Flexmosnter the possibility to adjust height automatically.
 
Please let us know if this approach works well for you.
Looking forward to your feedback.
 
Best regards,
Illia

Hello,
 
Our Sales team contacted you via email for further details.
 
Kind regards,
Illia