AgGrid supports multi-line content within its cells

Question

AgGrid supports multi-line content within its cells

I attempted to utilize this solution, however, it is not functioning properly for me. While it does resize the column height correctly, the text is still not wrapped as expected.

Ag-Grid - Row with multiline text

let 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, calculating how many lines are needed
        return 18 * (Math.floor(params.data.zaglavie.length / 45) + 1);
    }
};

function generateRowData() {
    return gon.books;
}

javascript ag-grid multiline

Answer 1

Answer №1

If you're looking to set row heights in a more complicated way, the "Row Height More Complex Example" on the documentation suggests adding CSS to enable text wrapping. To achieve this, simply include

cellStyle: {'white-space': 'normal'}

in your colDef for the specific column (zaglavie as per the example). Check out this plunker for a visual demonstration.

Answer 2

If you're looking to set row heights in a more complicated way, the "Row Height More Complex Example" on the documentation suggests adding CSS to enable text wrapping. To achieve this, simply include

cellStyle: {'white-space': 'normal'}

in your colDef for the specific column (zaglavie as per the example). Check out this plunker for a visual demonstration.

Answer 3

Answer №2

In reference to the field getRowHeight within your gridOptions, I have a suggestion for you that may be more efficient.

ag-grid has the capability to automatically determine the appropriate height for your columns.

According to information found in this article:

Auto Row Height

You can adjust the row height based on the cell contents by setting autoHeight=true for each column where the height should be determined dynamically. For instance, if one column contains description text spanning multiple lines, you can specify that column alone to establish the line height.

Answer 4

In reference to the field getRowHeight within your gridOptions, I have a suggestion for you that may be more efficient.

ag-grid has the capability to automatically determine the appropriate height for your columns.

According to information found in this article:

Auto Row Height

You can adjust the row height based on the cell contents by setting autoHeight=true for each column where the height should be determined dynamically. For instance, if one column contains description text spanning multiple lines, you can specify that column alone to establish the line height.

Answer 5

Answer №3

Wow! The magic of resetRowHeights()!!

After reading through the suggestions of others, I discovered that you can indicate which columns should have varying heights by using the autoHeight property in the columnDefs. However, when I tried this out, my rows ended up being way too tall. To fix this issue and ensure correct resizing, it is important to also call resetRowHeights() via the grid API's gridReady function.

For instance:

columnDefs.ts <- included in gridOptions configuration

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 // <- Works like a charm!
  }
];

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();
  }

UPDATE

I'm currently working with Angular 8.

One more tip -- if you're loading rows dynamically, make sure to execute your resets only after the promise has been resolved. This will prevent an unwanted horizontal scroll bar. Learn more about this here:

Answer 6

Wow! The magic of resetRowHeights()!!

After reading through the suggestions of others, I discovered that you can indicate which columns should have varying heights by using the autoHeight property in the columnDefs. However, when I tried this out, my rows ended up being way too tall. To fix this issue and ensure correct resizing, it is important to also call resetRowHeights() via the grid API's gridReady function.

For instance:

columnDefs.ts <- included in gridOptions configuration

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 // <- Works like a charm!
  }
];

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();
  }

UPDATE

I'm currently working with Angular 8.

One more tip -- if you're loading rows dynamically, make sure to execute your resets only after the promise has been resolved. This will prevent an unwanted horizontal scroll bar. Learn more about this here:

Answer 7

Answer №4

Using a custom cell renderer gives you the option to utilize wrapText along with autoHeight. This combination allows text to wrap if there is enough space, and adjusts the row height based on the cell content.

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

https://codesandbox.io/s/43246606-ag-grid-multiline-cell-content-f4t1m?file=/src/Grid.tsx

Answer 8

Using a custom cell renderer gives you the option to utilize wrapText along with autoHeight. This combination allows text to wrap if there is enough space, and adjusts the row height based on the cell content.

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

https://codesandbox.io/s/43246606-ag-grid-multiline-cell-content-f4t1m?file=/src/Grid.tsx

Answer 9

Answer №5

If you want to insert multiline content, you can follow this method that has proven effective for me.

<style>.cell-wrap {
  white-space: normal !important;
}

</style>

<html>

<body>
  <script>
    // You can include the following code 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>

Answer 10

If you want to insert multiline content, you can follow this method that has proven effective for me.

<style>.cell-wrap {
  white-space: normal !important;
}

</style>

<html>

<body>
  <script>
    // You can include the following code 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>

Answer 11

Answer №6

After testing the solution provided in the plnkr shared by Jarod Moser's response, I encountered some challenges due to long words and awkward spacing.

To overcome this, I decided to divide my strings based on spaces and assess how many lines would be needed. However, this approach is not flawless as certain characters occupy less horizontal space than others.

The width of my cell is 200px, allowing approximately 35 characters per 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 },
];

Answer 12

After testing the solution provided in the plnkr shared by Jarod Moser's response, I encountered some challenges due to long words and awkward spacing.

To overcome this, I decided to divide my strings based on spaces and assess how many lines would be needed. However, this approach is not flawless as certain characters occupy less horizontal space than others.

The width of my cell is 200px, allowing approximately 35 characters per 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 },
];

AgGrid supports multi-line content within its cells

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Customizing the display field in an ExtJs Combobox

Is it possible for an object to be null even when its type is object

Canceling a window in JSP and navigating back to the previous page using JavaScript

Tips for programmatically adding together numerous input entries within a PHP while loop utilizing java-script on the onfocusout event

recording the results of a Node.js program in PHP using exec

Having trouble understanding why the other parts of my header are not displaying

Elevate with Ease: Tailwind's Height Transition

What is the best way to obtain the SearchIDs for various searchNames using JavaScript?

Issue with the react-redux Provider

Express: router.route continues processing without sending the request

Ways to switch up the titles on UploadThing

Eliminating redundant values from a JSON object that is nested within another

Ajax - Trouble with Updating DIV Content

Combine various input data and store it in a variable

Deleting Firestore ancestor documents and sub-collections that do not exist

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Text Parallax Effect

When the time comes, ReactDOM will render your element into the designated container,

Creating a Higher Order Component (HOC) for your Next.js page

Having trouble with GSAP CDN not functioning properly in your JavaScript or HTML document?