Ag-grid 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 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

回答1:

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.

回答2:

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.

回答3:

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>

回答4:

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 },
];

回答5:

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

来源：https://stackoverflow.com/questions/43246606/ag-grid-multiline-cell-content

标签

multiline

ag-grid