51
Views
12
Comments
Solved
[OutSystems Data Grid] Outsystems DataGrid: How to set Column Width by relative value
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.54.60 (Build 63294)

Hi all,

In the Outsystems Data grid, the column width is set by number in pixel (px), which makes the UI look very different in different screen zoom-in condition (such as 100% vs 150%).

I'd like to ask is it possible to set the column width in data grid as relative value such as "vw" or "%"?

Thanks

2025-12-04 09-01-03
Kiet Phan
Champion
Solution

Hi @Cuong Tran 

Outsystems doesn't provide relative column width setting, we can achieve that by handling the resize event of the page.

You put this JS in the Initialize:

  1. window.addEventListener('resize', function() {
  2.     let myGrid = OutSystems.GridAPI.GridManager.GetActiveGrid().provider;
  3.     let windowSize = window.innerWidth;
  4.     myGrid.columns[0].width = windowSize * 0.2;
  5. });

The result:

UserImage.jpg
Cuong Tran

Hi @Kiet Phan 

Thanks for your reply. 

I have tried to use your method by simply adding the JS script in the Grid On Initialize.

But when I tried to zoom-in and out the browser (100% to 150%), the grid is not adapting to the changes.

Maybe I'm missing something here?



2025-12-04 09-01-03
Kiet Phan
Champion

Hi @Cuong Tran 

The column actually change the size when you zoom in/zoom out. Let me give you the demostration.

In the code below I add console.log the width of column[0].

  1. window.addEventListener('resize', function() {
  2.     let myGrid = OutSystems.GridAPI.GridManager.GetActiveGrid().provider;
  3.     let windowSize = window.innerWidth;
  4.     myGrid.columns[0].width = windowSize * 0.3;
  5.     console.log(myGrid.columns[0].width);
  6. });

As you can see, the width of column was changed when I zoom-in/zoom-out.

UserImage.jpg
Cuong Tran

Hi @Kiet Phan 

This is exactly what I want, unfortunately I still cannot achieve it in my code. Perhaps some setting in the my grid is over-written this JS script.

Could you please sharing this oml file with me so that I can learn from it?

Thanks.

2025-12-04 09-01-03
Kiet Phan
Champion

sure, here it is

pls check the attachment.

SolutionConcept.oml
2024-09-17 12-24-07
Rammurthy Naidu Boddu
Champion

Hi @Cuong Tran


Indeed OutSystems.GridAPI.GridManager.GetGridById($parameters.GridId).getColumns() only returns values if you are using columns.

Since you are using AutoGenerated grid please use:

OutSystems. GridAPI.GridManager.GetGridById($parameters.GridWidgetId)

    .provider.columns                                                            

    .forEach(function(col){                                              

        col.width = '*';                           

  }                                                                                     

);    

Please let us know if this helps.

UserImage.jpg
Cuong Tran

Hi @rammurthynaidu boddu

Thanks for your reply.

Could you please be more specific how should I use the provided JS script, such as on which event this JS script being called?


2024-09-17 12-24-07
Rammurthy Naidu Boddu
Champion


If you remove the height that will happen ofc. If you're customizing the default behaviour you need to customize them all. Including the empty message. The elements are nested in a hierarchy so if you override one you need to override them all - this is simple Frontend logic, with nothing to do with Data Grid logic.One of the approaches is to define a minimum height to fit the message but you can do whatever you want:

.wj-control.wj-content.wj-flexgrid {    

height: auto !important;        

max-height: 400px;    

min-height: 150px;

}

.datagrid-autogenerate {        

height: auto !important;

}

2024-09-17 12-24-07
Rammurthy Naidu Boddu
Champion

https://www.outsystems.com/forums/discussion/71782/outsystems-data-grid-change-default-column-width/

2025-12-04 09-01-03
Kiet Phan
Champion
Solution

Hi @Cuong Tran 

Outsystems doesn't provide relative column width setting, we can achieve that by handling the resize event of the page.

You put this JS in the Initialize:

  1. window.addEventListener('resize', function() {
  2.     let myGrid = OutSystems.GridAPI.GridManager.GetActiveGrid().provider;
  3.     let windowSize = window.innerWidth;
  4.     myGrid.columns[0].width = windowSize * 0.2;
  5. });

The result:

UserImage.jpg
Cuong Tran

Hi @Kiet Phan 

Thanks for your reply. 

I have tried to use your method by simply adding the JS script in the Grid On Initialize.

But when I tried to zoom-in and out the browser (100% to 150%), the grid is not adapting to the changes.

Maybe I'm missing something here?



2025-12-04 09-01-03
Kiet Phan
Champion

Hi @Cuong Tran 

The column actually change the size when you zoom in/zoom out. Let me give you the demostration.

In the code below I add console.log the width of column[0].

  1. window.addEventListener('resize', function() {
  2.     let myGrid = OutSystems.GridAPI.GridManager.GetActiveGrid().provider;
  3.     let windowSize = window.innerWidth;
  4.     myGrid.columns[0].width = windowSize * 0.3;
  5.     console.log(myGrid.columns[0].width);
  6. });

As you can see, the width of column was changed when I zoom-in/zoom-out.

UserImage.jpg
Cuong Tran

Hi @Kiet Phan 

This is exactly what I want, unfortunately I still cannot achieve it in my code. Perhaps some setting in the my grid is over-written this JS script.

Could you please sharing this oml file with me so that I can learn from it?

Thanks.

2025-12-04 09-01-03
Kiet Phan
Champion

sure, here it is

pls check the attachment.

SolutionConcept.oml
2025-12-04 09-01-03
Kiet Phan
Champion

@Cuong Tran 

hello, was it OK, do you need any help.

UserImage.jpg
Cuong Tran

hi @Kiet Phan,

Sorry I was out-of-office for a week so I could not get back to you in time.

Also thank you for checking on me. I have checked and you oml. file works like a charm.


2025-12-04 09-01-03
Kiet Phan
Champion
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.