Expandable Grid height not working correctly

[kevin-sage]

If there is no style on the div for the template of the expandable grid template, the div is given a style="height: 330px;". I am trying to control the height of the grid using a variable on the row.entity (i.e. using rowExpandedStateChanged to load the data for the subgrid), and I have everything wired up and it would be working, except something is adding the height to the style.

I am trying to figure out what is setting this, and if this is something that we can either remove or make configurable?

[PaulL1]

@jpuri, any thoughts on this?

[jpuri]

@kevin-sage , height of sub-grid is determined by variable 'expandableRowHeight', and all expanded rows will have that height.

But you should be able to change height of sub-grid within an expanded row, that should be similar to changing height of a grid dynamically.

[kevin-sage]

Yeah, having the 'expandableRowHeight' is kind of the issue that I am having. This is limiting all sub grids to the same size. What I have been trying to do is make that flexible, so that each sub grid can vary its height based on the number of rows.

[jpuri]

Currently we have a limitation of having fixed height of subgrids, this is because of the way scrolling is implemented in grid. Grid has its own scrolling algorithm which assumes that all rows have fixed height which we know in advance so that we can do calculations for scrolling.

[kevin-sage]

I see, ok, then it is a hard limitation. So, the next question. :) Can we change the default functionality so when the expandable template grid is created that it defaults the height to the 'expandableRowHeight' (maybe minus a few pixels so that it fits nicely)? It is a pain to have to explicitly add a style tag to the template grid just so that it does not set the default height to 330.

[kevin-sage]

Also, if it would be something that you would be ok with doing, could I make the change? Seems like it would be fairly easy to do and would give me more experience with developing ui-grid.

[jpuri]

you can give any height to parameter 'expandableRowHeight' but the limitation is that all expanded rows will have that height. Check: http://ui-grid.info/docs/#/tutorial/306_expandable_grid.

Its difficult to remove that limitation right now from grid because its very very difficult to achieve scrolling if row heights re variable.

UI-GRID does not uses browsers scrolling but has implemented its own scrolling logic.

[kevin-sage]

@jpuri, yes I agree that since the scrolling is handled in code that the row height of the expandable rows all have to be the same. I am good with that. My question now is can we change the default height (style="height: 330px;") of the expandable template to use the expandable row height?

[PaulL1]

@jpuri: I think @kevin-sage is saying that we have a setting for expandableRowHeight, but it's not getting applied to the template. Is that something we could do?

[jpuri]

Hey @PaulL1 , I guess what @kevin-sage wants to say is that though 'expandableRowHeight' is getting applied to expanded row, is there a way we can make height of expanded row template same as expanded row that is 'expandableRowHeight'.

@kevin-sage a possible way of doing that could be adding the value of height to expandableRowScope. The value will then be available to you in expanded row template which you can use with ng-style to change height of the expanded template.