Dynamic Row Height with text wrapping

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?

Hello,

Thank you for contacting Infragistics Support!
We are currently looking into this matter and will keep you posted of any available information.
Please do not hesitate to contact us with any updates or additional questions regarding this scenario in the meantime.

Best Regards,
Aleksandar Kamenov
Associate Software Developer

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.

I have tried that out and works perfectly thanks. That scales the row height for the span which is exactly what I need.

Hello Katy,

Great, I'm glad that it satisfies your needs.

Thanks for being part of Infragistics community!