Cannot change header row height of ng grid

Question

I need to dynamically change the header row height of an ng grid, depending on which column headers need to be displayed. Some columns have a very long header and I want the column name to wrap so they don't need to be excessively wide. I also don't want a lot of blank space if I initially set a tall header height, but then don't need the space if those long column names aren't displayed.

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

See plnkr

Hum

Answer 1

The reason this doesn't work is that ng-grid uses absolute positioning under the hood. Grid Options are only fired once, and then the heights are set in the html after that using style= on the html dom node. (THIS IS AWFUL!) They even set the style manually on all of the underlying header dom nodes.

The other avenue I thought of was trying to redraw the grid using ngGridLayoutPlugin. I played around with this for 30 minutes with no luck. You could try manually redrawing the page itself. It looks like ng-grid is not very good at redrawing the grid, and they've made optimizations specifically for updating data, but not the styles.

The 3.0 beta unstable release looks like they've made a lot of changes, and you'll be able to do what you're trying to do easier... however, it is not ready for production. See the header cell class conditionals in this example: http://ui-grid.info/docs/#/tutorial/115_headerCellClass

I had a hell of a time trying to get ng-grid styling to do my bidding at my last job. At a certain point, we were ready to toss it because it was too restrictive. Good luck.

Medwin

Answer 2

Use this in your CSS.

.ui-grid-header-cell-primary-focus {

  line-height: 2.428571;

}

Innovate