Is there a way to Wrap Text in a Wakanda Grid Column?

Question

I have a Wakanda Grid named dataGrid4 with 3 columns. I would like the text in the 2nd column (named Models) to wrap within the column cell. The font-size is set to 10 px and the column ht is set to 27 px.

I have tried everything I can find or think of. What I think should work is:

#{id}dataGrid4 .waf-widget-body .waf-dataGrid-col-Models .waf-dataGrid-cell .content {
white-space: normal;
word-break: break-all;
}

Yet, I am unable to achieve any word wrap. If I force edit the cell, using Safari Developer Tools (and the above code), the text will wrap upon itself (ie the text does not wrap down to next line, resulting in unreadable text).

This could just be a problem with Wakanda Grid. Not sure. Note: using Wakanda 10.187175

Answer 1

Having different row heights on the grid will cause issues in the calculation of the scroll position and consequentially on the lazy loading of the information.

You can achieve it but the result will be mediocre and buggy.

However I suggest you to adopt this solution I tailored on a grid with dataGrid1 as an ID:

1. Keep your current css tweak:

 #dataGrid1 .waf-widget-body .waf-dataGrid-cell .content { white-space: normal; word-break: break-all; } 

2. On page load run this Javascript code:

 WAF.widgets.dataGrid1.setRowHeight(100); 

The result is a bigger dataGrid with an acceptable visibility on long texts.

Answer 2

It is true the scrolling of the Wakanda DataGrid is only properly set up for consistent row heights. For any customization beyond straight text, there are two commands designed to allow you some freedom.

onRowDraw() http://doc.wakanda.org/home2.en.html#/Wakanda-Widgets-Instance-API/Grid/onRowDraw.304-1009465.en.html

setRenderer() http://doc.wakanda.org/home2.en.html#/Wakanda-Widgets-Instance-API/Grid-Column/setRenderer.301-864078.en.html

Depending on your needs, these commands allow you to replace the default DOM elements used in the rendering of either a row or a particular column in the grid.

Answer 3

I don't think it would be a good idea to wrap text on the grid, because its logic is based on the rows having the same height. If this assumption is not true anymore, you may end up with multiple bugs.