12

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

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Axixa
  • 121
  • 1
  • 1
  • 3

6 Answers6

23

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.

Jarod Moser
  • 7,022
  • 2
  • 24
  • 52
  • What should I do If my cell content is not text instead it is a tags Component. Its height is dynamic based on the items. (For a cellRenderer or a cellEditor) @Jarod Moser – Mahesh Bongani Jul 21 '19 at 17:58
  • Maybe you'll know how to answer this one as well: https://stackoverflow.com/questions/65518883/react-ag-grid-row-auto-height-doesnt-work – CodeMonkey Dec 31 '20 at 12:01
  • This white space solution is breaking words in the middle... Poor solution unfortunately. – giorgio79 Jul 13 '21 at 08:24
  • 2
    I ran into this issue as well. What you really to prevent words breaking in the middles is: ```cellStyle: { wordBreak: "normal" }``` to prevent breaking words. The ```whiteSpace: "norma"l```portion can be included, but my understanding is that it is already done by ag-grid. – dsh Aug 02 '21 at 04:47
10

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.

Bob Kaufman
  • 12,864
  • 16
  • 78
  • 107
  • Maybe you'll know how to answer this one as well: https://stackoverflow.com/questions/65518883/react-ag-grid-row-auto-height-doesnt-work – CodeMonkey Dec 31 '20 at 12:01
8

Ah! resetRowHeights()!!

As others have pointed out, the docs allow you to specify which columns you expect to have varying heights using autoHeight. However, when I implemented autoHeight in my columnDefs I ended up with row heights that were too tall. To get them to resize correctly you should also call resetRowHeights() through the grid API gridReady function.

Example

columnDefs.ts <- imported into gridOptions

export const columnDefs: Array<any> = [
  {
    headerName: 'Artifact Name',
    field: 'name'
  }, {
    headerName: 'Artifact Type',
    field: 'artifactType',
    width: 40,
    sortable: true
  }, {
    headerName: 'Description',
    field: 'description',
    cellStyle: {'white-space': 'normal'},
    autoHeight: true // <- Yay!
  }
];

X.component.html

      <ag-grid-angular
              class="ag-theme-balham"
              (gridReady)="onGridReady($event)"
              [gridOptions]="gridOptions">
      </ag-grid-angular>

X.component.ts

  onGridReady(grid) {
    grid.api.sizeColumnsToFit();
    grid.api.resetRowHeights();
  }

EDIT

I am using Angular 8.

Another piece of advice -- if you're loading rows then ensure your resets are AFTER the promise returns. This prevents a useless horizontal scroll bar. See more about that here: https://stackoverflow.com/a/57678686/3769076

solbs
  • 940
  • 3
  • 15
  • 29
2

If you're not using custom cell renderer, you can use wrapText in combination with autoHeight. The former makes the text wrap if there is enough space, and the latter adjusts the row height based on the cell content.

{
  headerName: "Athlete",
  field: "athlete",
  width: 85,
  wrapText: true,
  autoHeight: true,
},

Codesandbox Demo

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
1

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>
1

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 },
];
malla
  • 1,618
  • 1
  • 17
  • 23
  • Maybe you'll know how to answer this one as well: https://stackoverflow.com/questions/65518883/react-ag-grid-row-auto-height-doesnt-work – CodeMonkey Jan 01 '21 at 14:20