Need a special offer?Find out if your project fits.
+

Text wrapping in grid cell

Answered
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.

Attachments:
Untitled.png

3 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 10, 2021

Hello,
 
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
    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); //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: https://jsfiddle.net/flexmonster/27mwh8xz/.
 
Please let us know if it works for your case.
Our team is looking forward to hearing from you.
 
Kind regards,
Illia

Public
Shripal Dalal March 11, 2021

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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 12, 2021

Hello,
 
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.
 
Regards,
Illia

Please login or Register to Submit Answer