Get Free Trial

Text wrapping in grid cell

Shripal Dalal asked on March 8, 2021

Dear Sir,
How can we widen a grid cell horizontally and vertically, apply that behaviour to all cells along with text wrapping in the same.
Please see image attached. We cannot see our full voucher narration.
Thank you.


3 answers

Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 10, 2021

Thank you for reaching out to us.
We suggest using the setTableSizes method in order to adjust rows’ height:

flexmonster.on("reportcomplete", adjustTableSizes); //every time report is changed, adjust table sizes

function adjustTableSizes() {
  let cells = document.querySelectorAll(".fm-cell"); //get all cells
  let highCells = [...cells].filter(cell => cell.clientHeight < cell.scrollHeight); //find cells which "scrollHeight" property is bigger than actual height.
  let tableSizes = {
    rows: [],
    columns: []
  highCells.forEach(cell => { //compose the Table Sizes Object
      idx: +cell.getAttribute("data-r"),
      height: cell.scrollHeight
      idx: +cell.getAttribute("data-c"),
      width: cell.clientWidth
  flexmonster.setTableSizes(tableSizes); //apply table sizes

Also, adjust CSS in order to wrap text inside cells:

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

You are welcome to see the JSFiddle for reference:
Please let us know if it works for your case.
Our team is looking forward to hearing from you.
Kind regards,

Shripal Dalal March 11, 2021

It works. But can I get something like all cells widen in a certain column when I widen one of them vertically. Thank you.

Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 12, 2021

Thank you for your feedback. We are happy to hear the solution works for you.
If we understand you correctly, your requirement is to automatically increase/decrease all the rows’ height according to the one resized row.
If so, we would like to explain that this feature is not available. Currently, it is only possible to resize each separate row manually.
In case your requirement differs from the described, please provide us with a detailed description/illustration of the desired functionality.
Please contact us in case other questions arise.

Please login or Register to Submit Answer