🍉 Meet Flexmonster Pivot Table & Charts 2.9.Check out all hot features!
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/

5 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

Please login or Register to Submit Answer