JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › How to force column headers to wrap › Reply To: How to force column headers to wrap
September 17, 2021 at 2:24 pm
#102220
Member
I’ve been playing with this more, and I think I found a solution. A combination of CSS to wrap text and center the column header vertically, and handling the onColumnResize event to set the header row height. I updated the Stackblitz, but the important parts are below. I was able to get the headers to resize when the grid first loads with that onReady handler, but for some reason it doesn’t work in the Stackblitz.
CSS
smart-grid-column { height: 100% !important; line-height: normal !important; } smart-grid-column .smart-label { white-space: normal !important; word-break: break-word; display:inline-flex !important; align-items: center; } smart-grid-column .smart-label.align-right { flex-direction: row-reverse; }
Typescript
ngAfterViewInit(): void { ...other stuff here... this.subscriptions.push(this.grid.onColumnResize.subscribe(() => this.resizeColumnHeaders())); this.subscriptions.push(this.grid.onReady.subscribe(() => this.resizeColumnHeaders())); } private resizeColumnHeaders() { const header = this.grid.nativeElement.querySelector('.smart-grid-column-header') as HTMLElement; if (header) { // Since column header cells are centered vertically, the 8 here just gives some padding header.style.height = (this.getMaxHeaderHeight() + 8) + 'px'; } } private getMaxHeaderHeight(): number { const headerNodes = this.grid.nativeElement.querySelectorAll('smart-grid-column .smart-label span'); const heights: number[] = []; headerNodes.forEach(headerNode => heights.push(headerNode.clientHeight)); return Math.max(...heights); }