[OutSystems Data Grid] Rows with auto height
Reactive icon
Forge component by Gonçalo Martins
Application Type

Hi all

How can we configure the grid to have rows with auto height? 

I have a column with HTML content and I am already able to display the HTML correctly, but I have multiple lines in the HTML and I need the rows to auto adjust the height. I saw a height property in the grid, but I don't want all rows with the same height because they have different contents.

On Load:

After a column sort:

Looking at the Wijmo documentation I found a possible configuration:

GridAPI.GridManager.GetGridById($parameters.GridId).provider.autoRowHeights = true;

but this doesn't work. I tried to apply this configuration in the OnInitialize event.

The Wijmo API also provides a function to auto set the height of the rows:


but I can't find a place to have it. I tried multiple Wijmo events but none of them work as I needed. 

For example, I tried the event "refreshed"

GridAPI.GridManager.GetGridById($parameters.GridId).provider.refreshed.addHandler(function(grid) {



but the autoSizeRows() forces a grid refresh and my code got into a loop.



Hi @Victor Salvalagio Pereira,

I tried a different approach that I believe will address your requirement:

         var myGrid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId);
         myGrid.provider.autoRowHeights = true;
         myGrid.provider.rows.forEach( r => {  r.wordWrap = true; r.height = null; r.width = '*';
                                                                myGrid.provider.autoSizeRows() });

Please let me know once you try this 😉

Best Regards,


This JS doesn't work for me, I have implemented the JS On Grid Initialize,

Getting the following result.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.