Author Topic: Issue with ellipsis display when autoRow is false, and dynamic row height adjust  (Read 1666 times)

cui

  • Newbie
  • *
  • Posts: 11
    • View Profile
Hi,

Problem Description
When autoRow is set to false, I expect the grid cells that exceed the cell width to display an ellipsis (...) to indicate truncated text. However, the current behavior does not show the ellipsis as expected.

Additionally, I would like to dynamically toggle between automatic row height adjustment and fixed row height. Specifically:

When autoRow is false, I want any text that exceeds the cell width to be truncated with an ellipsis.
When autoRow is true, I want the text to wrap into multiple lines within the cell.

What I've Tried
To achieve the desired ellipsis effect when autoRow is false, I attempted using the following CSS styles:
Code: [Select]
  overflow: hidden;
  text-overflow: ellipsis;
However, this did not produce the intended result. After further experimentation, I found that adding the following styles does work for showing ellipsis when autoRow is false:
Code: [Select]
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
But when autoRow is true, the text no longer wraps into multiple lines as expected, which breaks the desired functionality.

Any advice or pointers would be greatly appreciated. Thank you in advance for your help!
Best regards

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6344
    • View Profile
There is no need to write custom css as this feature is already present in the grid.

Please get yourself familiar with the wrap property in addition to autoRow property.

Kindly check this example:

https://paramquery.com/pro/demos/wrap

cui

  • Newbie
  • *
  • Posts: 11
    • View Profile
There is no need to write custom css as this feature is already present in the grid.

Please get yourself familiar with the wrap property in addition to autoRow property.

Kindly check this example:

https://paramquery.com/pro/demos/wrap
Thank you so much for your suggestion!
I have tried the method you provided, and I'm happy to report that it works perfectly for my use case.