[Data Grid Reactive] Change default column width
Forge component by OutSystems R&D
Application Type
Reactive

Is there any way to change the default column width? We are using the Data Grid Reactive component to give us dynamic columns. Sometimes there are few columns (3-4) and the default column/cell width of 144px leaves a bunch of white space at the right side of the table.

I tried overwriting width and left style attributes with custom Javascript but it reverts back to 144px on scroll or interaction.

Solution

Hello @Nathan Duncan,

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

Since you are using AutoGenerated grid please use:

GridAPI.GridManager.GetGridById($parameters.GridWidgetId)

    .provider.columns                                                            

    .forEach(function(col){                                              

        col.width = '*';                           

  }                                                                                     

);    

In attachment, you can find a sample OML with this implementation.

Please keep in mind that this hasn't been tested for all possible use cases or that it cover all of your requirements, so we cannot assure that it will work for all use cases.

Please let us know if this helps.

Bruno Martinho


DataGridColumnWidth.oml

Hello Nathan Duncan,

Thanks for bringing this subject to the discussion.

Can you confirm if the following link helps you solving what you are trying to do?


Column Width

Best regards,

Tiago Pereira

Tiago, 

When we create our data tables, we are allowing the Data Grid to auto generate the columns and types for us instead of manually adding columns and types so we aren't able to utilize those optional configs (I think). 

Something like that but for auto generated columns is exactly what we're looking for. 

Nate

Hello Nathan Duncan,

I'm sorry about the misunderstood. Right now, we don't have an API to set the width to auto-fill the grid. Nevertheless, I prepared a workaround for you:


1) Add a new event handler for the OnInitialize of the Grid. 

2) Create a new JS Block inside the GridOnInitialize Client Action with the following code:

GridAPI.GridManager.GetGridById($parameters.GridId)

             .getColumns()                                                              

              .forEach(function(col){                                              

                           col.provider.width = "*"                               

              }                                                                                     

);                                                                                                  


Learn more about Wijmo's column width here.

Please bear in mind that we didn't make all the necessary tests to ensure that it will work on all cases and this code is based on your specific use case -> using autogenerated columns.


Can you confirm if that JS helps you achieve what you need?

Best regards,

Tiago Pereira

Tiago, 

GridAPI.GridManager.GetGridById($parameters.GridId).getColumns() returns an empty array for me.

See attached OML file for minimal, reproducible example. 

Nate


DataGridColumnWidth.oml

Solution

Hello @Nathan Duncan,

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

Since you are using AutoGenerated grid please use:

GridAPI.GridManager.GetGridById($parameters.GridWidgetId)

    .provider.columns                                                            

    .forEach(function(col){                                              

        col.width = '*';                           

  }                                                                                     

);    

In attachment, you can find a sample OML with this implementation.

Please keep in mind that this hasn't been tested for all possible use cases or that it cover all of your requirements, so we cannot assure that it will work for all use cases.

Please let us know if this helps.

Bruno Martinho


DataGridColumnWidth.oml

That worked. Thank you! 

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