Get Free Trial

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

Answered
Abhilash asked on April 15, 2021

Hi, Please see the example below. I’m customizing a row to display new line but it’s not taking the space correctly in Flat mode. But it’s taking the space in Compact mode. Can you help resolve this
https://jsfiddle.net/q0htwksp/3/

17 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster April 16, 2021

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

Public
Abhilash April 16, 2021

Thank you! This is working in the UI. Try to export into excel, the height is again lost. Is there a solution for that as well?

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster April 19, 2021

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

Public
Abhilash April 19, 2021

Thanks Illia. I have another question different topic. So i have totals displayed at the end of the report. Is it possible to customize a totals column for example: i want the paid count total to be displayed as total count total/total requested amount total. Is that possible?
Attached example below

Attachments:
123.PNG

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster April 19, 2021

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

Public
Abhilash June 28, 2021

Hi Illia,
You said “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)” I’ve tried lot of times but unable to use exceljs npm once i call exportTo API call. Can you help me with an example please. On how to adjust the column height for above example export

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster June 29, 2021

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

Public
Abhilash June 29, 2021

Also we’re passing data to UI from a CSV file. So we tried using \n which is breaking the UI coz i think \n is a row seperator in CSV. So having \n in the data is causing issue if we’re importing CSV file. Please help with a work around.

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster June 30, 2021

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

Public
Abhilash June 30, 2021

Thanks Illia. Sorry this question is related to the first question of this thread. But next time i will create a new forum thread. Attached is the image on how the data is coming from backend as CSV with \n in between data for new line. But on the UI it’s displayed as normal string.

Attachments:
newline.PNG
ui.PNG

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 1, 2021

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

Public
Abhilash July 2, 2021

Thank you so much Illia. the above solution worked. But i have a problem with the adjustTableSizes solution you provided above. It doesn’t seem to work from Angular side. Is there any other modification i have to make for ANgular? attached are the code and console error

Attachments:
error.PNG
tablesizes.PNG

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 5, 2021

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/fm_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

Public
Abhilash July 6, 2021

Thanks Illia, Not sure what i’m doing wrong. Would you mind a quick webex call whenever you’re free so i can share my screen. I literally spent all night couldn’t figure out the issue. I console logged and it seems like my settablesizes is getting called before the customizeCell function due to large number of columns and rows(big data set). Customizecell function takes time to read all columns by that time this reportcomplete is getting called and settablesizes is called so it’s always empty. And the customizecell keeps getting called whenever i scroll through the data due to large columns and rows so the settablesizes is only being called once when report completes initially so it doesn’t set anything. 🙁 

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 8, 2021

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

Public
Abhilash July 9, 2021

Hey Illia, I integrated it. So it’s the last column for me with multiple rows whenever i horizontally scroll to the last column it automatically scrolls somepart of scrollbar to the left everytime and i can’t see that last column. I think it’s adjusting even on horizontal scroll and pushing the scrollbar.
Can we have a quick webex tomorrow same time 5pm (GMT+3)? If you don’t mind 🙂

Attachments:
scrolling issue.PNG

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 9, 2021

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

Please login or Register to Submit Answer