I have a table using ag-Grid. I would like to adjust the row height according to the text in the cell. In documentation .php it was given for specific column. But in my case any column can have more text. So how to adjust the row height according to the largest text size in any of the column.

$scope.gridOptions = {
            angularCompileRows: true,
            enableColResize: true,
            enableSorting: true,
            enableFilter: true,
            groupHeaders: true,
            suppressCellSelection: true,
            columnDefs: cols,
            rowData: statusPageObj.rows,
            onGridReady: opmGridReady,
            angularCompileRows: true,
            headerHeight: 45,
            /*rowHeight: 50,*/
            getRowHeight: function(params) {
               return 50;
            }

        };

I have a table using ag-Grid. I would like to adjust the row height according to the text in the cell. In documentation https://www.ag-grid./javascript-grid-row-height/index.php it was given for specific column. But in my case any column can have more text. So how to adjust the row height according to the largest text size in any of the column.

$scope.gridOptions = {
            angularCompileRows: true,
            enableColResize: true,
            enableSorting: true,
            enableFilter: true,
            groupHeaders: true,
            suppressCellSelection: true,
            columnDefs: cols,
            rowData: statusPageObj.rows,
            onGridReady: opmGridReady,
            angularCompileRows: true,
            headerHeight: 45,
            /*rowHeight: 50,*/
            getRowHeight: function(params) {
               return 50;
            }

        };

• javascript
• css
• ag-grid

• any ments on this? – Keshav1007 Commented Oct 12, 2016 at 6:40
• You can use params.data inside of the getRowHeight function. This is the data that you provide to the grid initially, then you would just need to iterate through all your rows and then all your cells to find which one has the largest text length – Jarod Moser Commented Oct 12, 2016 at 15:06
• @JarodMoser that will cause performance issue right? because i have a very big json – Keshav1007 Commented Oct 13, 2016 at 5:47
• probably, but if you really want to change the row height depending on whichever cell has the largest content, then I don't really see any other way besides iterating through every cell that you have. Your other option is to guess at what the largest height is that you need and set it from the beginning – Jarod Moser Commented Oct 13, 2016 at 14:45
• but I have no idea how much of a performance impact it will have. So you might as well try it out and see how much longer the load time is. – Jarod Moser Commented Oct 13, 2016 at 15:01

2 Answers 2

You can determine the height of the row based on the text-length.

gridOptions.getRowHeight = function() {
     return 18 * (Math.floor(params.data.myDataField.length / 45) + 1);
}

step:1 html code

<button onclick="setrowHeight(50)">50px</button>

step:2 js code

var rowHeight = 25;

function setrowHeight(height) {
    rowHeight = height;
    gridOptions.api.resetRowHeights();
}

watch this: https://embed.plnkr.co/FEK7wtQfVwUXeYjOh6PK/