I tried to use this solution, but it does not work for me, Its correct resize column height, but text is not wrapeed.
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
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.
I'm specifically responding to the getRowHeight field in your gridOptions. There's a better approach.
ag-grid can automatically calculate the correct height for your column.
From the article:
Auto Row Height
It is possible to set the row height based on the contents of the cells. To do this, set autoHeight=true on each column where height should be calculated from. For example, if one column is showing description text over multiple lines, then you may choose to select only that column to determine the line height.
You may try this to insert multiline. It worked for me.
<style>.cell-wrap {
white-space: normal !important;
}
</style>
<html>
<body>
<script>
//inside the function, columnDefs.
(function() {
var gridOptions = {
columnDefs = [{
headerName: "Name",
field: "yourField",
cellRenderer: 'showMultiline',
cellClass: 'cell-wrap',
autoHeight: true
}]
};
})();
function showMultiline() {}
showMultiline.prototype.init = function(params) {
//check if the field has a value
var cellBlank = !params.value;
if (cellBlank) {
return null;
}
this.ui = document.createElement('div');
this.ui.innerHTML = '<div style="font-weight: bold;">' +
params.value. {
object
} +
"<br/>" +
params.value. {
anotherobject
} +
"<br/>" +
'</div>';
};
showMultiline.prototype.getGui = function() {
return this.ui;
}
</script>
</body>
</html>
I tested out the solution provided in the plnkr in Jarod Moser's answer but had some issues due to long words and unfortunate placings of spaces.
I ended up breaking up my strings by spaces and actually checking how many lines would be necessary. This solution is however not perfect as some charachters take less horizontal space than others.
My cell is 200px wide and ca 35 characters fit on one line.
Code:
gridOptions = {
// Your other stuff
getRowHeight: function (params) {
let newlines = 0;
var words = params.data.LongestString.split(' ');
let current = words[0].length;
while (current > 35) {
newlines += 1;
current = current - 35;
}
for (var i = 1; i < words.length; i++) {
let test = current + words[i].length + 1;
if (test > 35) {
newlines += 1;
current = words[i].length;
while (current > 35) {
newlines += 1;
current = current - 35;
}
}
else {
current = test;
}
}
//One line needs 27px, with a line-height of 1.5, every additional line needs 17px.
return 27 + newlines * 17;
},
};
public myColumnDefs = [
{ headerName: 'Header1', field: 'SomeProperty', width: 120 },
{
headerName: 'SomeHeader',
field: 'LongestString',
width: 200,
cellStyle: { 'white-space': 'normal', 'line-height': 1.5 } //This is important!!!
}
{ headerName: 'Header3', field: 'OtherProperty', width: 120 },
];
