94
Views
3
Comments
Solved
[OutSystems Data Grid] WordWrap for the entire header
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hello,

Currently, I am trying to word wrap the header at initial display of Grid.
In the OnInitialize event of the Grid Block i put this code (based on this link) and and it worked for one column:

GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.updatingLayout.addHandler(function(grid) {    

//Set header height    

grid.columnHeaders.rows.defaultSize = 80;   

 //Set wordwrap    

GridAPI.ColumnManager.GetColumnById($parameters.ColumnWidgetId)._provider.cssClassAll = "headerWrap";});


Any idea how to do it for all columns of an entire Grid header? The objective would be, if necessary,  the user could resize the columns and automatically the text would adapt (WordWrap ).


Thank you,

Pedro C.

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Pedro Canário 

I'm not sure I got the use case and without access is more difficult.
What have you tried so far using the API? Have you replicated what you want on Wijmo's page?
You can for instance call autoSizeRows or autoSizeColumns method for auto-sizing all rows and columns once. 

flexInstance.autoSizeRows();
flexInstance.autoSizeColumns();

Or for instance:

CSS:	
.wj-header { white-space: pre-wrap !important;}
	
Script 	
// resize column header
flexInstance.autoSizeRow(0,true);

Try to check Wijmo's documentation and replicate it using their code sandbox that way is easier to help you.

Cheers,
GM

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Pedro Canário 

Could you please explain in more detail what you want to achieve and share a sample oml with it? This is because I might be understanding it wrong since by reading it seems you simply need to get all columns and iterate through them to apply that to all column headers.

2021-11-08 12-36-10
Pedro Canário

Hello Gonçalo Martins,

Thanks for the reply. At the moment I can't share the OML because because of the data I have on it, but I share a sample image.

What I want is something like this, where we have some columns with the text WordWrap others not.  but if the user decide to resize the for example the second column, should adapt the text.

Thank you!

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Pedro Canário 

I'm not sure I got the use case and without access is more difficult.
What have you tried so far using the API? Have you replicated what you want on Wijmo's page?
You can for instance call autoSizeRows or autoSizeColumns method for auto-sizing all rows and columns once. 

flexInstance.autoSizeRows();
flexInstance.autoSizeColumns();

Or for instance:

CSS:	
.wj-header { white-space: pre-wrap !important;}
	
Script 	
// resize column header
flexInstance.autoSizeRow(0,true);

Try to check Wijmo's documentation and replicate it using their code sandbox that way is easier to help you.

Cheers,
GM

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