Unable to change ng grid title bar height

Question

I need to dynamically change the height of the ng grid header row, depending on which column headers should be displayed. Some columns have a very long heading, and I want the column name to be completed, so they don't need to be overly wide. I also don't want a lot of free space if I initially set the height of the header, but then no space is needed if these long column names are not displayed.

The problem is that I cannot get headerRowHeight to dynamically change. It took some time to realize that I could not even initialize headerRowHeight using the scope variable in the same way as other gridOptions (see line 23).

See plnkr

Answer 1

The reason this doesn't work is because ng-grid uses absolute positioning under the hood. The grid parameters are run only once, and then the heights are set in html after that, using style= on the html dom node. (IT'S SIMPLE!) They even set the style manually in all basic header dom-nodes.

Another prospect I was thinking about was trying to redraw the grid using ngGridLayoutPlugin. I played with this for 30 minutes with no luck. You can try manually redrawing the page. It seems that the ng grid is not very good at redrawing the grid, and they did the optimization specifically to update the data, but not for the styles.

The unstable version 3.0 beta looks like they made a lot of changes, and you can do what you are trying to do easier ... however, it is not ready for production. See the header class conventions in this example: http://ui-grid.info/docs/#/tutorial/115_headerCellClass

I had a hell of a time trying to get an ng grid to bet on my last job. At some point, we were ready to leave him because it was too restrictive. Good luck.

Answer 2

Use this in your CSS.

 .ui-grid-header-cell-primary-focus { line-height: 2.428571; }