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

Enhancing the background of a website with the power of CSS

Next Js is having trouble locating the Service messaging component (firebase-cloud-messaging)

The Chocolat.js Lightbox plugin is experiencing issues with jQuery as it is unable to detect the

Populate the browser screen with a series of unpredictable numbers

Display webpage content in an Iframe using Javascript after PHP code has been executed

Is there a definitive way to distinguish between scrollTop and scrollHeight in web development?

In ES6, instantiate a fresh new instance of this

Guide to including configuration settings in locals for Sails.js

The second attempt at an AJAX call is unsuccessful

How can I make sure certain properties in the Vuex store don't retain their state after a redirect during server-side rendering (SSR)?

Leveraging the import statement within lib.d.ts to enhance Intellisense functionality in Visual Studio Code

Navigating between different components in React Router V4 allows for seamless transitions without having to reload the

Tips for maximizing the efficiency of a callback when utilizing the filter function in Primefaces for 'myDataTable'

What is the best way to ensure that the checkbox is not affected when you click on the area?

Troubleshooting: Custom JQuery function not functioning as expected

The Angular Material layouts demonstration is experiencing technical difficulties

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

Retrieve particular data points from the object based on its unique identifier

incapable of destructuring two objects simultaneously

Saving the accurate x and y coordinates into the database