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.
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
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.
We are taking a look at this issue and let you know how to proceed as soon as possible.
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.
Hello Bruno,Thank you for the implementation.This implementation helped what I wanted to achieve.Thank you.
hi Bruno
this works well for single column. can we apply word wrap to all column at once only using grid id.
Hello this works really well except when this is applied to columns that are NOT currently wrapping everything is justified to the right. I tried to change a number of things in the CSS but no luck. Do you have any ideas? You can see that Ethnic Group and Physiological Type work fine but Test Name, Test ID and Unit are all justified on the right side.
Instead of applying this to every column manually like in your example I am just wanting to apply it to every column.
Hi,
Sorry to be replying to an old(er) post, but this almost resolves the issue that I am working on.
Can this solution be tweaked in such a way that the header height automatically increases depending on how the wrapped text fills the space?
Regards,Alfio
Hi @Alfio Esposito
If you can share a link from Wijmo's documentation with that particular use case I can try to help.
Cheers,GM
Hi again @Alfio Esposito
After a quick test, I think you can simply set autoRowHeights = true (documentation).
Something like:
//Set the autoRowHeights OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.autoRowHeights = true; //Set the wordwrap for all the columns - if you need this OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.columns.forEach( function(col) { col.wordWrap = true; } );
Then you can do some CSS adjustments to make it better.
Cheers and hope it helps,GM
thanks above solution for word wrap all column at same time worked for me