asked on June 1, 2022
Hi Team,
Could you please help with below Text Cases with angular samples
Test Case 1(Cell text wrapping toggle on/off):I need to keep a check box in tool bar as lost item in tool bar. And when user check the check box then need to enable the text wrap in cell(I mean when user reduce the cell width then cell text has to be warp automatically ).And when user uncheck the check box then we need to remove the cell text wrap capability(I mean when user reduce the cell width then cell text does not wrap down to next line).
Test Case 2(auto-size toggle):I need to keep two new shrink & grow icons in tool bar. When user click on grow icon then cell height has to be increase automatically as per the text size. And when user click on shrink button then cell height has to be reduce to previous size.
Thanks,
Ankaiah
⋅ June 2, 2022
Hello, Ankaiah!
Thank you for reaching out to us.
About multiline cells:
Using multiline cells in Flexmonster is highly unrecommended, as it may lead to grid misalignment. Instead of toggling the multiline mode, we suggest creating tooltips for cells. With this approach, column height stays the same, and users will see full labels by hovering over them.
We recommend achieving this functionality with the customizeCell API call. Firstly, you should wrap the cell.text property into some HTML tag (for example, <p>). Then, put the data.label property into the title attribute of the wrapper tag:
function customizeCell(cell,data) {
cell.text = `<p title='${data.label}'>${cell.text}</p>`
}
Kindly check the example of this approach: https://jsfiddle.net/flexmonster/u0Lvcmzq/.
Resizing cell height and text:
The dynamic resizing of cell height and text in runtime may also cause alignment issues. Instead, we recommend using built-in browser tools, such as zoom, for adjusting the cell height and text.
You are welcome to write if any questions arise.
Best Regards,
Maksym
⋅ June 9, 2022
Hello, Ankaiah!
We are wondering whether you had a chance to check provided alternatives to multiline and resizable cells.
Looking forward to hearing from you.
Best Regards,
Maksym
⋅ July 3, 2022
Hi Maksym,
Answering for Ankaiah - We have been using the tooltips for a while, and they are ok. We have at least one customer who very much wants to use wrapping in their pivot table Rows areas. Is that on the enhancement list? Any chance of it getting done any time soon?
Thanks,
Eric
⋅ July 5, 2022
Hello, Eric!
Thank you for writing to us.
We understand that multiline cells are important for your clients. Currently, we do not have a straightforward approach for enabling multiline mode. Our team added this feature to our backlog. As for now, we recommend using this CSS rule as a workaround:
.fm-cell {
white-space: pre-wrap !important;
}
Kindly check the following JSFiddle example. Please note that the above approach would work only with compact or classic forms.
Feel free to contact us if any questions arise.
Best Regards,
Maksym
⋅ July 12, 2022
Hello, Eric!
Hope you are doing well.
We would like to know if you tried using the proposed CSS rule for multiline cells in your project.
Please let us know if this works for you.
Best Regards,
Maksym
⋅ July 19, 2022
Hi, Eric!
Our team is wondering whether you had time to try the provided solution for multiline.
Looking forward to hearing from you.
Best Regards,
Maksym
⋅ August 8, 2022
Hi Maksym,
Yes we've tried that, and received mixed reviews on it. Some like it, and others don't. In short, we need a way of applying it selectively, per report, so the people who like it can have it that way.
There was also an issue with displaying some formatting we'd applied in the OnCustomizeCell routine. So we need to be able to omit reports with issues like that.
We look forward to being able to apply it selectively.
An important aspect will be the ability to 'Auto-Size' the rows with cells that are wrapped, one way or another. Not critical, but important.
Thanks,
Eric
⋅ August 10, 2022
Hello, Eric!
Thank you for sharing your feedback with us.
Kindly note that Flexmonster does not support multiline out-of-box. The suggested approach with CSS is just a workaround for displaying long text in cells. Currently, there is no option for saving and restoring this and any other CSS settings inside the report.
However, it is possible to adjust the table sizes manually using the setTableSizes() API call. This API call allows changing the table sizes in runtime, and these changes will be stored in the report. You are welcome to check the example: https://jsfiddle.net/flexmonster/94m5jvub/
Besides, could you please give us more details about the issue with formatting applied by the customizeCell() API call? This would greatly help us to find a solution.
Please let us know if changing the table sizes would work for your case.
Best Regards,
Maksym