[OutSystems Data Grid] How to auto-fit columns in DataGrid?
data-grid-reactive
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive

Hi,

In DataGrid, upon loading, the column's width is like this:

But upon load, I want it to auto-fit, something like this

How do I achieve this? Thank you!

Hello @Kenneth1,


On the Grid's on initialize event, you can call the following snippet of JS to achieve this. This will make the first column (index 0) have auto fit.

GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.autoSizeColumn(0);


 If you want all columns to auto fit, you can call:

GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.autoSizeColumns();


I've attached a sample where you can see it working. We'll also analyze this internally and see if it makes sense for us to create a client action for this.

AutoFit.oml

I've tried your solution but I guess it autofits only based on the Column Header name, so if I have a cell value that is very long it shows ellipsis, is it possible to show the whole value?

Are you sure?


This is the result from the sample I sent you.

It's kinda buggy, sometimes when I refresh page it autofits correctly, sometimes its not (with ellipsis)

I've tried reproducing the issue you mentioned, but wasn't able to. Did you change anything on your sample?

Nothing. Just trying out the the autoSizeColumn(0) and autoSizeColumns();

the autoSizeColumns() also does the ellipsis thing.


I confirm the same issue!

Hi @Kenneth1 

Could you please share the oml where we could reproduce that and mention the Data Grid version?

Thanks

This is the oml (the one you shared), Data grid version is 2.6.3

AutoFit.oml

Mine is 2.6.2 and I reproduced the same behaviour with the oml just shared by @Kenneth1 .

It is enough to refresh the page several times to get the wrnog behaviour.

I tested it also with another application with the same result.

Hey,


Please update your JS node as follows:

setTimeout(function(){

    GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.autoSizeColumn(0);

}, 0);


Please let me know if this helps!

Nope :-( Same issue

Hello.
I tried with the latest version and I'm not able to reproduce that use case.
Have you tried the latest version?

Updated to 2.7.0 but same behavior

notAutoSize.png

Champion

Hi,

It is really strange, But It is working fine.


I don't know how to help in reproducing the issue, I used your oml... just refresh the page several times and then I get the issue..

Please check the behaviour at https://personal-7bxoeiru.outsystemscloud.com/AutoFit/Grid?_ts=637919512389921254

Try to refresh several times and you'll get the wrong auto-size.

Hey,


I noticed that you did not implement the JS snippet I sent earlier. That's why it's not working.

AutoFit.oml

Sorry, I published an old oml.

Now I published the last oml you sent with the correct snippet... same issue: after two or three refresh the size is fitted to the headers.

Give it a try: https://personal-7bxoeiru.outsystemscloud.com/AutoFit/Grid?_ts=637919615607416074



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