Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Katy Faulkner
215
Dynamic Row Height with text wrapping
posted

I am trying to handle some columns which can have large amounts of data. What I would like is to be able to have the row get bigger so that all the data could display in the column with wrapping the text. Since some rows might have less data compared to others I would like to be able to set the row height dynamically or have it scale automatically depending upon the content. I don't think this is currently possible since the rowHeight seems to just be a property at grid level. Is there a way to achieve that?

Alternatively what I tried was using the multi-row layout so that the items with larger data could span the whole grid width. However if I set the column to span multiple rows then it still just shows one line of text in the center. I tried adding styling to it so that it would wrap the text in that space but I can't make that work. Is it possible to have the text use the multiple lines of the layout? I have applied cellClasses to the column which spans multiple rows and am using following styling 

:host::ng-deep {
    .text-show-all {
        white-space: normal;
        line-height: 1.4;
        word-wrap: break-word;
        background-color: red;
    }
}
Background is coming red as expected so my styling is definitely applied but it is still not word wrapping the text at all. How can I make that work?
Parents
  • 1740
    Verified Answer
    Offline posted

    Hallo Katy,

    Firstly let me give you a brief description of why we do not have a row height per every row independently.
    Because there are no real rows in the DOM which we can manipulate, so we basically follow the structure and the idea of the real table as it is, we just obey and follow the column structure of the grid.

    Secondly, you are not obligated to use multi-row-layout for you scenario, but if that's the case and otherwise you need it you are free to use.

    As a response to your real question and actual problem, you can use a custom template where you can handle and take full control over how your text is rendered within every cell. I have assembled a sample for you, where I am implementing a custom template by providing the text from the datasource to a simple span element. From now on you can do whatever you need, so that the feel and look is what you expect it to be.

    Furthermore if you need the understand and explore more about the flexibility of our components you can always refer to our detailed documentation with interactive samples.

    If you need any additional assistance, please let us know.

Reply Children