Hello,

I m trying to break long text in a fixed width of headers in datagrid but i dont know how.

That's my code below.

Thanks!

Hi,

try it with :

\n

in your text.

I have tried that but the headers doesn't seem to change width to accept new line.

I have tried this but the text after the break is disappeared.

new DataGridColumn{name = "field1", displayName = "Column 1<br/>Header", width=70,alignment = 1, headerAlignment = 1},

Could you give any solution?

One way to do this is change the cell.innerHTML inside the headbehaviors to it's desirable length by splitting the displayname with '<br>'.

Could you give a real example that includes cell.innerHTML

Thanks.

Something like:

    private function headerbehaviors (grid DataGrid in, cell Widget in, rowData any in, dataIndex int in, column DataGridColumn in)                case                        when (column.name == "field1")                                cell.innerHTML = "Column 1<br>header";                        when (column.name == "field2")                                cell.innerHTML = "Column 2<br>header";                end        end

I have many columns and when the example is like this one:

 private function headerbehaviors (grid DataGrid in, cell Widget in, rowData any in, dataIndex int in, column DataGridColumn in)

                case

                        when (column.name == "field1")

                                cell.innerHTML = "Column 1";

                        when (column.name == "field2")

                                cell.innerHTML = "Column 2<br>header";

                end

        end

then the width of  background color of header cell with (column.name == "field1)  becomes smaller in half exactly  when  the header field2 looks ok. Why is that? Maybe it has to do with the width of header cells and their width?

I changed to that:

cell.innerHTML = "\n<br>Column 1";

cell.innerHTML = "Column 2<br>header";

and it worked for all headers except of the column with the checkboxes.

The empty header cell above the checkboxes  seems like the attached photo.

I had a similar need and it took me three steps.  See if this works for you.

I took an approach similar to your first where I defined the column with the <br> in the displayName like so:

new DataGridColumn{name="O5DTDUETI", displayName="Statement<br>Due to<br>Investor", width=DATE_WIDTH},

Notice I also set the width...

Then I defined a header behavior that set the cell height, otherwise the header cells would have different heights depending on how many rows in the title.

function SetHeaderHeight (grid DataGrid in, cell Widget in, rowData ANY in, rowNumber INT in, column DataGridColumn in)

   cell.height = 50;

end

Finally I copied the EglRuiDataGridHeaderLabel css class into my local css file and changed the overflow: hidden; to overflow: visible;

.EglRuiDataGridHeaderLabel {

   overflow: visible;

}

I just changed this line in Datagrid.egl file

from:     cellPadding int{ @EglProperty, @VEProperty{ default = "4" }} = 4;

and it now looks ok although the checkboxes in their cells don't seem very symmetric.

I 'll try your solution too.Thanks a lot.