94
Views
2
Comments
Solved
[OutSystems Data Grid] Rows with auto height
data-grid-reactive
Reactive icon
Forge component by Gonçalo Martins
Application Type
Reactive

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:

grid.autoSizeRows();

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) {

    grid.autoSizeRows();

});

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


Thanks!

Solution

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,
GM

Hi,

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.