[Data Grid Reactive] How to WordWrap column header and set header height on grid load
Question
Forge component by OutSystems R&D
Application Type
Reactive

Hello,

Currently, I am trying to word wrap the column header at initial display of Grid.
In the onReady handler, I have put the following js and the onReady is used in the OnInitialize event of the Grid Block.

var beginEdit = function (grid, e) { 
//Set column header height 
e.panel.grid.columnHeaders.height = 100; 
//Set wordwrap 
e.panel.grid.columns[0].wordWrap=true; 
} 

GridAPI.GridManager.GetGridById($parameters.GridID).provider.beginningEdit.addHandler(beginEdit); 

As expected, it will trigger at the time of cell being edited.

Is it possible to wordWrap specific column header and set the column header height at the time of loading the Grid?

Please let me know.
Thank you.

WordWrap.png

Solution

Hello @Alam ,

You are in the right path, just let us suggest some small changes in order to achieve this behavior:

Our approach would be to use the event updatingLayout to set the row header height and then set a css class to that specific column and work with that CSS.

Then apply this CSS rule:

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


HeaderHeight.oml

I have changed my code as below and now the code is running at the time of Grid initialization.

GridAPI.GridManager.GetGridById($parameters.GridId).provider.updatingView.addHandler(function(grid) {
    //Set header height
    grid.columnHeaders.rows.defaultSize = 100;
    //Set wordwrap
    grid.columns[0].wordWrap = true;
});

GridAPI.GridManager.GetGridById($parameters.GridId).provider.invalidate();

Although, setting header height and wordwrap are working properly, the position of header text is strange.
it is in the bottom. How can I align the header text to the center?

Please help.

1.png

Hello @Alam ,

We are taking a look at this issue and let you know how to proceed as soon as possible.

Bruno Martinho

Hello @Bruno Martinho
Thank you.
In the meantime, I overrode the following css and now the header alignment is working properly.

.wj-colheaders > .wj-row > .wj-cell, .wj-flexgrid .wj-colheaders .wj-header.wj-colgroup.wj-cell{
display: flex !important;
align-items: center !important;
}


However, please let me know if this a good way to achieve this header wordwrap feature with correct alignment of header text.
Or, if there is any alternative/ good way to achieve this?

Thank you.

Solution

Hello @Alam ,

You are in the right path, just let us suggest some small changes in order to achieve this behavior:

Our approach would be to use the event updatingLayout to set the row header height and then set a css class to that specific column and work with that CSS.

Then apply this CSS rule:

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


HeaderHeight.oml

Hello Bruno,
Thank you for the implementation.
This implementation helped what I wanted to achieve.
Thank you.

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