Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ag-Grid - Row with multiline text

I'm using Angular Grid (version 1.16.1) and I need to show a long text inside a table and I want that row height would be adjusted by the content, breaking line if necessary.

I've tried:

  • sizeColumnsToFit method, expecting that ag-grid could resize column by its content;

  • setRowStyle method at gridOptions: I've added CSS classes to adjust roe height by the content (e.g: 'word-wrap':'break-word');

  • minWidth and width: I've calculated the average column size but ag-grid didn't respect it;

  • cellStyle at gridOptions: on the same way as "setRowStyle", but CSS classes didn't gave me any success;

Does anyone has another suggestion?

like image 719
André Luís Oliveira Avatar asked Mar 17 '16 18:03

André Luís Oliveira


People also ask

How do you wrap text in Ag grid cell?

In version 28 of AG Grid we added support for wrapping header cell text. This is done with the Wrap Header Text and Auto Header Height properties. Adding wrapHeaderText: true will cause long headers to wrap, but if some are longer than the actual height of the header then they will be shown truncated.

What is gridOptions in Ag grid?

The gridOptions object is a 'one stop shop' for the entire interface into the grid, commonly used if using plain JavaScript. Grid options can however be used instead of, or in addition to, normal framework binding. The example below shows the different types of items available on gridOptions .

How do you Rowspan on Ag grid?

To allow row spanning, the grid must have property suppressRowTransform=true . Row spanning is then configured at the column definition level. To have a cell span more than one row, return how many rows to span in the callback colDef.

How do I add a space between rows on Ag grid?

These lines make gap betwen table body rows (no space between header and first body row): rowHeight: 58, rowStyle: { "max-height": "50px", }, "rowHeight" should be your row style height + margin you want to make on bottom of every row. Note!


1 Answers

I have tried it with css with no luck, have you looked into dynamic row height? See an example here: https://www.ag-grid.com/angular-grid-row-height/index.php. It using the length of the text to calculate the height of each row. Here's a snippet from the example:

getRowHeight: function(params) {
    // assuming 50 characters per line, working how how many lines we need
    return 18 * (Math.floor(params.data.latinText.length / 45) + 1);
}
like image 105
philoniare Avatar answered Oct 26 '22 23:10

philoniare