Ui-grid dynamic row height.

[cheeverm3]

Is there a way to make the row height dynamic so if say text is too long and wraps that the row will increase in height to accomodate? If not is this something that is even possible in the future?

[c0bra]

No, unfortunately. In order to properly virtualize large amounts of data, UI-Grid needs to know how big every row will be. Eventually we would like to be able to specify different heights, per-row, but allowing dynamic heights would require measuring every row post-render, which would cause the browser to thrash and thus poor performance.

[dllabs]

So what can we do in the meantime? Set every row higher to accommodate the few that are wrapping? I have rows that are occasionally wrapping and getting cut off, and I really don't want to go back to jquery DataTables :)

[PaulL1]

Personally, I use tooltips instead.

[dllabs]

Virtualization is a brilliant feature, one of the main reasons I turned to ui-grid. But for certain tables I would happily trade virtualization for dynamic row height.
Any chance we could have eventually an option of dynamic row height, that we turn on for datasets that we judge to be small enough? Or would even, say, a dataset of fewer than 100 rows still thrash the browser?
Because I really, really don't want to go back to Jquery DataTables :( ui-grid is so much better for so many things.

[PaulL1]

I think there are two different things here. The first is configurable row height (per row). We have an idea of how we'd implement this, it means that we have to add up the heights of all the rows to get the overall canvas height, and there's some trickery in scrolling, but it's not impossible and according to @c0bra not too dissimilar to how we process columns. (I note that column scrolling is much less performant than row scrolling, but I hope that's not due to this logic).

The second is dynamic row height based on the content. Arguably this is an extension to the above, but uses some mechanism to first calculate all the row heights, then store them on each row. This could be external to ui-grid, or could be a feature that plugs onto ui-grid. Doing this properly means rendering the cell and then measuring it, but it could be possible to do it less properly if necessary. Ultimately if it is something we only do once, on data ingestion, and if we were able to do that in a background thread perhaps, then it might not be a big deal. We'd of course have to do it again whenever someone edited any data, added any data, or changed any column widths. For may use cases that'd be fine.

You may want to also look at #1735, #2746 and #3031 as being somewhat related.

[cheeverm3]

tooltips are a good idea...closing but would be nice to keep in on the radar for the future.

[calopez]

I fixed that issue with css, well it worked for me:

http://stackoverflow.com/a/33178535/2488091

[tim-lukacik]

@calopez Looks like that is for total grid height. The problem is individual rows, not total grid height. This is a pretty big limitation unfortunately. I hope at least variable row height will eventually be implemented.

Perhaps, once variable row height is possible, you could allow rowHeight to be a function which gets passed the row. You could then write your own logic which could return the height value based on cell contents without a render.

[mermonkey]

Just adding to the chorus of developers in need of variable row height... 👍
I'm actively investigating work-arounds and will share back if I find anything worthwhile.
My first attempts will have to disable virtualization, but i'm hoping that is temporary.
Cheers!

[alangumer]

For me it works
[ui-grid-row] {
display: table-row;
}

.ui-grid-cell {
float: none;
display: table-cell;
}

and in gridoptions set rowHeight: 'auto'.

[congphan]

@alangumer Can not work when set rowHeight: 'auto' it render height: 'autopx'

[alangumer]

when you set rowHeight: 'auto' it renders height 'autopx' which the browser does not understand so it work, but in order to do the things in the right way with CSS here it is:

[ui-grid-row] {
display: table-row;
}

.ui-grid-row, .ui-grid-cell {
height: auto!important;
}

.ui-grid-cell {
float: none;
display: table-cell;
}

.ui-grid-header-cell, .ui-grid-cell-contents {
white-space: normal;
padding: 2px;
word-break: break-word;
}

[mmreddy0306]

@alangumer, Your CSS is working for me, but if i use ui.grid.grouping or ui.grid.selection then row height is not in sync with ui.grid.grouping or ui.grid.selection column cell. Could you please suggest how can we proceed furthur.

[bvoisin]

@mmreddy0306 I have the same issue (using ui-grid-tree-view and @alangumer's CSS) http://plnkr.co/edit/5iUCheMv2IQ6xkocqGSW?p=preview

This is due to the grouping column to be in a different container than the standard columns. I am thinking to remove this grouping column and use my own expand button. If you have links on how to do that efficiently...

[alangumer]

@mmreddy0306 and @bvoisin set enableRowHeaderSelection: false, it will hide this column but still you can select the rows or if you want you can use this function from @jibap to align containers http://plnkr.co/edit/JwbEmPhJq2LInfUNncdi?p=preview

[mmreddy0306]

Thanks @alangumer and @jibap. Now the issue is fixed. Both Left Pinned Row height is now in sync with Row height.

But now i'm facing one more issue. Actually i have two grid in single page. When user clicks a row cell in first grid, then a row from second grid has to be selected. And I have increased the height of all the rows in second grid using the above specified css and alignContainers method. Now while invoking the function scrollToFocus function is not scrolling to the specified rows in the second grid. Please help.

[jibap]

Hi @mmreddy0306,

Try to use $scope.gridApi.grid.scrollTo() method instead, it may works better, but you have to know that my plunker was created to get help about scrolling => #2746

I note that rowStyle() function is based on grid.options.rowHeight, and the calculated margin-top seems to be wrong...

In my code, this line works well to change row height property but this seems to not be considered for margin-top calcul :

// Apply new height in gridRow definition
grid.renderContainers.body.renderedRows[r].height = largest;

Welcome to my issue !

[mmreddy0306]

HI @alangumer, @jibap, @PaulL1 , @c0bra, @calopez, Could you please suggest us how to solve the scrolling issue if we increase the height of grid rows using above provided CSS and AlignContainers function.

Issue: Increased the rows height based on content using above help provided by @alangumer and @jibap. But scrollToFocus or scrollTo function is not correctly scrolling to exact row.

Thanks,
Mohan Reddy M.

[piyushparamane]

Hi @mmreddy0306 , @alangumer , @jibap , @PaulL1 , @c0bra , @calopez ,
I followed this discussion and was able to create a auto expandable row.
I used @alangumer css and resolved the scrolling issue by making below change in ui-grid.js.
while getting verticalScrollLength, I just added absolute value for canvasHeight and viewportHeight subtraction value,

return (Math.abs(this.getCanvasHeight() - this.getViewportHeight()) + this.grid.scrollbarHeight);

It is working for me, though I am not sure if it will break anything else. Please let me know if it is correct fix.

Thanks,
Piyush

[jibap]

Hi @piyushparamane ,

I tried your code, but it don't fix anything.
I log the value returned by the current version and yours, they are exactly the same.

Maybe i don't understood your solution, do you use alignContainers ?

Sorry, but it seems that the issue is still here...

[piyushparamane]

No, not alignContainers, I was implementing expandable rows which would expand to dynamic height based on content. There I was getting this.getCanvasHeight() - this.getViewportHeight() as negative value.

[alangumer]

Thank you @piyushparamane
On Mar 22, 2016 8:16 AM, "piyushparamane" notifications@github.com wrote:

Hi @mmreddy0306 https://github.com/mmreddy0306 , @alangumer
https://github.com/alangumer , @jibap https://github.com/jibap ,
@PaulL1 https://github.com/PaulL1 , @c0bra https://github.com/c0bra ,
@calopez https://github.com/calopez ,
I followed this discussion and was able to create a auto expandable row.
I used @alangumer https://github.com/alangumer css and resolved the
scrolling issue by making below change in ui-grid.js.
while getting verticalScrollLength, I just added absolute value for
canvasHeight and viewportHeight subtraction value,

return (Math.abs(this.getCanvasHeight() - this.getViewportHeight()) +
this.grid.scrollbarHeight);

It is working for me, though I am not sure if it will break anything else.
Please let me know if it is correct fix.

Thanks,
Piyush

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#3239 (comment)

[zhuhongyin]

Thank you@alangumer
your css works for me，but I still hava some problems for help：
I make this code change：
option.enableHorizontalScrollbar = uiGridConstants.scrollbars.NEVER;
option.enableVerticalScrollbar = uiGridConstants.scrollbars.NEVER;
and put cursor of mouse on the table，
scroll up is ok ，but cannot scroll down

[zhuhongyin]

scroll down is ok ,in line 11673 changed as follows，
preventDefault: function () {/*event.preventDefault(); */}

[bobpf]

The function from @jibap does not work. If you scroll to the bottom an then slowly scroll up and down a couple of rows you will see data "jumping" around in the rows, for example data in row 15 column 5 will appear in row 16 column 5. not sure why this is, but it defenetly has something to do with the adjustment of the row heights on scroll end.

[darshan039]

Hi @piyushparamane , I tried your solution to add absolute value for canvasHeight and viewportHeight subtraction value,

return (Math.abs(this.getCanvasHeight() - this.getViewportHeight()) + this.grid.scrollbarHeight);

This is working fine for me.

I just want to override getVerticalScrollLength() of uiGrid.js file, so if i upgrade this package in future than also it works ok without any changes.

I don't know how to override the function of existing js file in other js file. Could you please help me in that?

[happyringtail]

@mmreddy0306 You mentioned "Both Left Pinned Row height is now in sync with Row height."
I'm wondering how did you solve the left Pinned Row height issue, I can't use enableRowHeaderSelection: false to hide the column because I need the "select all" function.

Below css works perfectly for me except the left selection column,

.ui-grid-viewport .ui-grid-cell-contents {
word-wrap: break-word;
white-space: normal !important;
}

.ui-grid-row, .ui-grid-cell {
height: auto !important;
}

.ui-grid-row div[role=row] {
display: flex ;
align-content: stretch;
}

I also tried rowHeight: 'auto', but it doesn't do anything.

Thank you so much!

[umashankar5544]

@happyringtail did you find any solution i'm too facing the same problem. instead of select all, i have to keep collapse all and expand functionality. could you please help me

[aih]

@jibap, @bobpf, @umashankar5544, did you find a solution to this? We are working on a project that needs this feature (scrolling to the correct row, with variable height rows) and could hire someone to develop and contribute back to this project.

Any suggestions are welcome!!

[Pradeep-Thonangi]

Is there any fix/solution for the ui-grid-selection/pinned column dynamic row height? I'm using AngularJS 1.8.3 along with UI-Grid Latest version.