allow dynamic row height

[ceolter]

http://www.angulargrid.com/forum/showthread.php?tid=2299

[captainkirk128]

+1!

Thanks @ceolter

[vladdvs]

issue +1, thanks +1 )

[bartread]

+1

Lack of this is a blocker for us unfortunately.

[cp2587]

+1

[ndrone]

+1 with the addition of setting a max height that the grid can grow to.

[ghost]

+1

[chiptus]

+1

[rafaedez]

+1

[scotthovestadt]

+1

[ceolter]

+1

[mikeerickson]

+1

[leocaseiro]

👍

[vikasgithub]

We also need this feature... and I was exploring ways to implement this. So, I found that the following code snippet which sets the row height and row top.

                    if (!this.gridOptionsWrapper.isForPrint()) {
                        this.vBodyRow.style.top = (this.gridOptionsWrapper.getRowHeight() * this.rowIndex) + "px";
                        if (this.pinning) {
                            this.vPinnedRow.style.top = (this.gridOptionsWrapper.getRowHeight() * this.rowIndex) + "px";
                        }
                    }
                    this.vBodyRow.style.height = (this.gridOptionsWrapper.getRowHeight()) + "px";
                    if (this.pinning) {
                        this.vPinnedRow.style.height = (this.gridOptionsWrapper.getRowHeight()) + "px";
                    }

So, I wanted to implement something like this for dynamic row height

                       var lastRenderedRow = renderedRows[rowIndex - 1];
                        var lastRowTop = parseInt(lastRenderedRow.vBodyRow.style.top.replace("px", ""));
                        var lastRowHeight = parseInt(lastRenderedRow.vBodyRow.style.height.replace("px", ""));

                        var data = this.node.data;

                        if (data) {
                            var message = data.message;
                            var height = (Math.floor(message.length / 50) + 1) * 25;

                            if (height > 250) {
                                height = 250;
                            }
                            this.vBodyRow.style.top = (lastRowTop + lastRowHeight) + "px";
                            this.vBodyRow.style.height = height + "px";

                            rendered = true;
                        }

My logic worked fine when the table was initially rendered. However, it gave problems while scrolling. While debugging, I noticed that the rows were continuously deleted and added in the table because of which above logic was failing in some cases. So, I thought about maintaining a global variable which maintains the row height and top attributes of all rows and use these values to calculate the height and top of new rows. What do you think about this?

[ceolter]

i will be implementing dynamic row height in the new year. it's not a small change. as you see, the grid uses 'row virtualisation' which rips rows out and in when you are scrolling. so the grid will need to work out what the start position of each row is and store is somewhere so it can do the virtualisation.

[zentechlab]

Hey - any progress on the auto Height increment feature?
I have been struggling with row height in server-side pagination (with virtualization). I have build my function to calculate row height based on number of rows.

When I change the page size - to say from 10 to 25, for the first time it displays all 25. On further navigation to say page 2, 3, it displays just 21 rows! On examination, I have the backend data and all of 25 rows.

I believe the issue is with rendering. When I move the scroll bars, then again all 25 appear.

Any hint is greatly appreciated.

[buremba]

+1

[ceolter]

this is now done. it will be in my next release.

[squarewave24]

can you point to any example how to expand row height depending on row contents?

I am using the cellRenderer to append sub row contents, and would like to increase height as needed.

[squarewave24]

tried following the example on agGrid Row Height page, but getRowHeight isn't called on angular2 grid

        getRowHeight: e => { 
            console.debug('getRowHeight' ,e.row.data);
            return 50;
        },

[ceolter]

second example this page
https://www.ag-grid.com/javascript-grid-row-height/index.php

[squarewave24]

i thought that's what i followed. are you talking about "Row Height More Complex Example" ? isn't that one using getRowHeight ?

[ceolter]

yes

[squarewave24]

here's my entire options. getRowHeight is never called

getOptions() {
    return {
        rowData: this.Products,
        columnDefs: this.columnDefs,
        getRows: (params: any) => {
            console.log('getRows ', params);
        },

        enableSorting: false,
        enableColResize: true,
        groupHeaders: false,
        rowSelection: 'single',

        onRowClicked: e => console.log('a row was clicked', e),
        onColumnResized: e => console.log('a column was resized', e),
        onGridReady: e => console.log('the grid is now ready', e),
        getRowHeight: e => { 
            console.debug('getRowHeight' ,e.row.data);
            return 50;
        }
    }
}

[ceolter]

that looks fine, don't know what's wrong. if you are not using the latest version of ag-Grid, make sure the version you are using has this feature (check the change log). if still not working, debug through the ag-Grid code and see what is wrong??

[squarewave24]

hmm i upgraded to:

"ag-grid": "5.2.x",
"ag-grid-ng2": "5.2.3"

still nothing. any specific method I should debug ?

[squarewave24]

i debugged it, and it appears that rowHeight got defaulted somewhere to 22, so getRowHeight was not called.
to work around this i had to default rowHeight to null..

[squarewave24]

is there a way to trigger the grid to call getRowHeight later? like for example if i add some "expand" type UI element where i want to add more content on click?

i can see that i can trigger it by re-binding the data, but there is maybe a less involved way? like maybe re-setting a single row?

this.gridOptions.api.setRowData(this.Products);

[squarewave24]

ok figured it all out.

on cell click I can add objects into my data item (i.e. this.Products[0].OtherItems.push(x),

and then after calling setRowData(this.Products), above will appear in getRowHeight so i can set it accordingly. not too bad 👍

[ceolter]

@squarewave24 must be something in your code that is setting the rowHeight property. you are right, if that is set, then the getRowHeight() is not called.

[Anruin]

@squarewave24 @ceolter I have similar problem with Angular 2, having "ag-grid": "7.0.x", "ag-grid-ng2": "7.0.x". Rows height callback is never called. rowHeight property is not set in gridOptions not by ng2 input nor by code. I've checked and removed any reference to rowHeight in whole app, even in sibling components containing other ag-grids. Debugger also says that rowHeight is not defined on gridOptions, only getRowHeight function.

Ok, as I understand, it can not be used with virtual body rows, only with floating, guess it is my problem.

[ceolter]

it can not be used with virtual body rows if using viewport or virtual pagination, it cannot be used. not for now. maybe in the future.

[semko2m]

Hello Ceolter,
I am interested to use row height in enterprise row model and infinite.
Is that possible?

Thank you in advance

[stile1201]

+1 to needing it in infinite row model

Any workaround for now?

[mikeerickson]

I was surprised to see this popup as I recall adding myself to this list. Turns out (after reviewing this thread) I commented October 2015, and still not possible.

[buhichan]

I think it would be reasonable to allow rows to auto fit the height of its content using pure css if domLayout="autoHeight", since it would make no sense to calculate row height in this case.

[jkjha]

with rowModelType: pagination (virtual) (v 7.2.0), getRowHeight was working fine. But after upgrading this to v14.2.0, I see @ceolter comment that it is not possible. Because rowModelType pagination no more available and with infinite scrolling getRowHeight will not work.
Such important features should not be delayed when you have huge user base.

[carlosdelangel]

Row Height on Infinite scrolling just doesn't work, anyone has gotten it to work as intended?

[holly-weisser]

Any updates on this? Is it scheduled for inclusion in a release? I was looking at the pipeline, is this issue AG-1405?

[andrea-vega]

Was this issue closed because you have no plans to implement? Older versions of ag-grid allowed us to use getRowHeight() with pagination. This is important for me because certain columns had arrays that need to be displayed with line breaks. Row height is calculated based on the size of this array.

Now that the strategy for pagination piggybacks off of infinite scrolling, the feature no longer works. What do you recommend?

[kidoo312]

Has anyone found a workaround to this issue?
+1 to needing it in infinite row model

[raphitz]

I use ag-grid old version. And I have this implementation with dynamic columns and rows as well. Great example using ag-grid. Made in Portuguese.

http://apps.mprj.mp.br/sistema/lzca/#/ConsultaPenal