Skip to Content (Press Enter)
UserImage.jpg
Linto Antony
313Views
6Comments
[OutSystems Data Grid Web] Datagrid - auto row height
Question
Forge
outsystems-data-grid-web
Web icon
OutSystems Data Grid Web (O11)
Forge asset by OutSystems

Is there any option to set the row height based on the cell contents (auto row height) rather than by setting a fixed row height?

0
0
14 Jul 2020
Copy Link
2020-08-31 15-57-57
Tiago Miguel Pereira
Staff

Hello Linto Antony,

Thanks for bringing this subject to the discussion.
Right now we don't have a great solution that can actually solve your question.

The DataGrid team is analyzing this topic and we'll get back to you with:

  • What to do to workaround this

We'll update you as soon as we have the answers for you.

Thank you,

Tiago Pereira

1
0
27 Jul 2020
Copy Link
2020-08-31 15-57-57
Tiago Miguel Pereira
Staff

Hello Linto Antony,

As I mentioned in my previous message, here follows a workaround type of solution.
You will need to include a Web Block containing the method that you want for setting the rows with a dynamic height resulting in something like in the image below: (This block is included in the sample attached)

Inside the Web Block you can see that we have a Javascript block containing the method responsible for formatting the cells inside the grid. We need to define which are the columns that we want to have that behavior. So we need to edit the AdvancedFormat of those columns. Feel free to change the columns according to your needs. 

code: 

"wordWrap: true,
 multiLine: true"

Right now we need to override the method formatItems because we are explicitly defining the height of the rows inside. So in this Web Block I commented that line for you.

Remember that by using this extended feature, the method related to the formattings of the grid will get overwritten. Specifically, the method formatItem.

Hope this sample is useful if you need to extend DataGrid to have the rows with a dynamic height according to the space that the text needs so that it can be fully presented.

DataGridCustomRowHeight.oml
0
0
30 Jul 2020
Copy Link
UserImage.jpg
Linto Antony

Tiago Miguel Pereira wrote:

Hello Linto Antony,

As I mentioned in my previous message, here follows a workaround type of solution.
You will need to include a Web Block containing the method that you want for setting the rows with a dynamic height resulting in something like in the image below: (This block is included in the sample attached)

Inside the Web Block you can see that we have a Javascript block containing the method responsible for formatting the cells inside the grid. We need to define which are the columns that we want to have that behavior. So we need to edit the AdvancedFormat of those columns. Feel free to change the columns according to your needs. 

code: 

"wordWrap: true,
 multiLine: true"

Right now we need to override the method formatItems because we are explicitly defining the height of the rows inside. So in this Web Block I commented that line for you.

Remember that by using this extended feature, the method related to the formattings of the grid will get overwritten. Specifically, the method formatItem.

Hope this sample is useful if you need to extend DataGrid to have the rows with a dynamic height according to the space that the text needs so that it can be fully presented.

Thank you for this workaround, I have adjusted the column width for the grid earlier. Will try this later in my next grid


 

0
0
24 Aug 2020
Copy Link
UserImage.jpg
Linto Antony

Tiago Miguel Pereira wrote:

Hello Linto Antony,

As I mentioned in my previous message, here follows a workaround type of solution.
You will need to include a Web Block containing the method that you want for setting the rows with a dynamic height resulting in something like in the image below: (This block is included in the sample attached)

Inside the Web Block you can see that we have a Javascript block containing the method responsible for formatting the cells inside the grid. We need to define which are the columns that we want to have that behavior. So we need to edit the AdvancedFormat of those columns. Feel free to change the columns according to your needs. 

code: 

"wordWrap: true,
 multiLine: true"

Right now we need to override the method formatItems because we are explicitly defining the height of the rows inside. So in this Web Block I commented that line for you.

Remember that by using this extended feature, the method related to the formattings of the grid will get overwritten. Specifically, the method formatItem.

Hope this sample is useful if you need to extend DataGrid to have the rows with a dynamic height according to the space that the text needs so that it can be fully presented.

 

 

 Hi Tiago Miguel Pereira ,


I have added the rowHeight weblock and given advanced attribute for one of the columns


I am getting the below script error in the page

Uncaught ReferenceError: sanitizeHTML is not defined

    at Object.GridOS.FormattingFeature.formatItems (rowHeight.js?148564:178)


    at n.gObj.grid.itemFormatter [as _itemFormatter] (GridFramework.js?148385:5259)


I have tried adding the below function at the beginning of the web block just to remove the error and removed the object references.

function sanitizeHTML(text) {

  var element = document.createElement('div');

  element.innerText = text;

  return element.innerHTML;

}

Then the text starts appearing in multiple lines but the row height is still fixed(30px in my case)

Please help, Thanks in advance


Regards

Linto

0
0
14 Sep 2020
Copy Link
2025-02-21 03-27-35
muddassir k

Hi Tiago Miguel Pereira, I'm not able to download the OML file that u have shared. Can u please upload it again

Thanks

0
0
18 Dec 2020
Copy Link
2020-08-31 15-57-57
Tiago Miguel Pereira
Staff

Hello muddassir k, I'm sorry you weren't able to download the OML file. I'm sharing it with you again

Thank you

DataGridCustomRowHeight.oml
0
0
18 Dec 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.