Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AgGrid multiline cell content

I tried to use this solution, but it does not work for me, Its correct resize column height, but text is not wrapped. Ag-Grid - Row with multiline text

var gridOptions = {
    columnDefs: columnDefs,
    rowSelection: 'multiple',
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    enableRangeSelection: true,
    suppressRowClickSelection: true,
    animateRows: true,
    onModelUpdated: modelUpdated,
    debug: true,
    autoSizeColumns:true,
    getRowHeight: function(params) {
        // assuming 50 characters per line, working how how many lines we need
        return 18 * (Math.floor(params.data.zaglavie.length / 45) + 1);
    }
};

function createRowData() {
    return gon.books;
}

enter image description here

like image 728
Axixa Avatar asked Apr 06 '17 05:04

Axixa


People also ask

How do I wrap text in ag-Grid header?

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 change the cell value on ag-Grid?

Single Row / Cell Updates the value of a single row or cell. This is done by getting a reference to the Row Node and then calling either rowNode. setData(data) or rowNode.


1 Answers

If you follow the "Row Height More Complex Example" found on the Docs, it says that you need to add some css to make the words wrap. So in your colDef for your affected column (zaglavie if I follow correctly) add cellStyle: {'white-space': 'normal'}. Here's a plnkr that demonstrates.

like image 178
Jarod Moser Avatar answered Oct 02 '22 19:10

Jarod Moser