Variable row heights

[angular-ui]

Variable row heights

[timothyklim]

Pretty, pretty feature! Is known when it'll done?

[orneryd]

Not for a while. I have been looking into this and it will take a lot of re-working the core grid to get this feature going.

[Agamennon]

Also the row height should have an 'auto' config to adjust to content height, if i have a cell with a small width but extended content (being text or other elements) i want it to span other lines ex: i found no way to place a long name in a short cell as (it gets appended with "...") that is not cool, i cant replace my tables as they will not convey information the way i want em to

other then that (WOW thank you guys!!!) .... no, really ... WOW

[orneryd]

What you can do in the meantime is just set the row height to a larger size
and use a simple cell template to wrap the text around. The ellipses are
just there to show that there is more data and you can double click the
header resize grip and it will resize the column to the lenght of the
represented data. You could also have a popover or a title that shows the
entire text contents of the cell when moused over, just an idea. I have
some ideas for the examples that I want to put on there, some more advanced
master/detail stuff and things like this.

Right now the way virtualization works is that the rows are all position
absolute and of a fixed height. In order to get auto heights we would have
to change the whole CSS. (Which I am not opposed to doing)

On Sunday, December 30, 2012, Agamennon wrote:

Also the row height should have an 'auto' config to adjust to content
height, if i have a cell with a small width but extended content (being
text or other elements) i want it to span other lines ex: i found no way to
place a long name in a short cell as (it gets appended with "...") that is
not cool, i cant replace my tables as they will not convey information the
way i want em to

other then that (WOW thank you guys!!!) .... no, really ... WOW

—
Reply to this email directly or view it on GitHuhttps://github.com//issues/21#issuecomment-11768854

-Tim Sweet

[davisford]

@timothyswt any chance you could whip up a quick plunker that does text wrapping for a cell. i've been hacking on row + cell templates for a while, but not quite achieving it yet.

[orneryd]

here are some links for word wrapping in a div:

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap

[orneryd]

looks like @maxcan made a plugin for this https://github.com/angular-ui/ng-grid/blob/master/plugins/ng-grid-flexible-height.js

[davisford]

Thanks. I will check it out. I did resolve it separately - noted in a different issue #107

[sudarshan89]

I did not understand how the plugin mentioned resolves the purpose of having configurable row heights ?, So if i have 2 rows and there heights should be based on the contents in them will the plugin help ? .. I just tried it out how it does not seem to fit the bill

[yilativ]

I'd like to add my request to see a demo or plunker how this allows for variable row heights. Seems to me this allows for variable grid heights, but if I want to implement an "expand" row to show extra content, this doesn't quite fit the bill for that.

This is closed, but was it ever resolved?

[frogomatic]

I was never able to get the variable row height plugin to work at all, which is probably because I misunderstood its scope.

I wound up making a local fork of ngGrid which allows for different rows to have dynamically variable heights, to support expanding rows (e.g., click on the "+" icon to see details) and an "edit entire row at a time" mode (i.e., double click on a row and all fields become editable, with "Save" and "Cancel" buttons below the row being edited). It could easily be extended to allow different rows to have different heights based upon the entity data. It works, but it's ugly and inelegant and doesn't pay a lot of attention to angular-ish conventions, and I doubt it would be easy to convert this to a plugin. Also, I've made no attempt to make it work with local data stores (this is for a data-heavy enterprise app with a RESTful backend), and in particular no effort to get it to work with aggregation.

If anyone is interested, I'll push my fork to github.

[ribbitfix]

@frogomatic, I'd be interested in checking out your fork. Thanks!

[jenghung]

@frogomatic, we also interested. Many thanks.

[ThCC]

@frogomatic how is the project going?

[frogomatic]

Hello, I'll wrap it up this weekend and post; I got bogged down with a work deadline. Thanks for your patience.

[frogomatic]

https://github.com/frogomatic/ng-grid

Sorry this took so long. See README.frogomatic for details. Implements variable row height, row-level editing with Save/Cancel buttons below rows, row expansion (click expand tab and load additional content below the row ... note that this is all part of the same grid row), and a few miscellaneous other changes.

[frogomatic]

BTW, the actual modified ng-grid JS file is n-grid.frogomatic.js. I didn't modify the files in the source tree (sorry, sloppy practice I know, this was done as part of a rush job)

[ribbitfix]

Thanks @frogomatic. I've started looking at ng-table which seems like it might provide an easier way to create variable row heights.

[timothyjlaurent]

Why is this a closed issue? Is there a solution??

I am using the css from http://stackoverflow.com/questions/19094723/angular-ng-grid-row-height

This doesn't seem to be the best solution though.

[parliament718]

@frogomatic thanks very much for your contribution. I've successfully used it in my project. I don't know how to properly get this into ng-grid so I made the changes in ng-grid.debug.js as well. Someone should really get this into the master, it works well :)

@timothyjlaurent frogmatics implementation works well. Here's an updated fork of frogmatics solution for the latest ng-grid version (also contains one minor improvement - can load templateUrl from cache via <script type="text/ng-template" id="expandableRowTemplate">)

https://github.com/parliament718/ng-grid/blob/master/build/ng-grid.debug.js

Note: I only need expandable rows so my fork doesnt include frogmantics solution for editable rows

[parliament718]

Hmm just noticed a bug though, if row is expanded scrolling the table makes the expanded section of the row follow the scrolling (so that the expanded content is always inside the visible portion of the .ngCanvas (rather than staying next to the actual row). However, when you scroll back up to the expanded row the content realigns with it. It's easier to see this bug with rows with an opacity however still visible even without that because scrolling back to the row makes it re-align but it doesn't behave reliably as sometimes there's just a big gap under the expanded row (if you only scroll enough so part of the area (of the expanded content) is visible)

@frogomatic did you ever fix this issue as an afterthought?

Also, I added this line of CSS to fix the fact that the expander button pushes the row over but the table doesnt account for the extra column width:

.ngCell.ngCellExpander + .ng-scope .ngCell:last-child { padding-right: 20px; }

[HenryBeh]

@parliament718 Do u understand how to apply 3. General support for variable height rows that @frogomatic mention in README.frogomatic. itzi dynamic the row height / row height based on the content?

[gsugiart]

@frogomatic is there a simple plunker for editable & variable row height? I tried looking at your README.frogomatic and I am confused with #2 & #3. Perhaps because I am kindof new with Angular JS