[英]How to wrap column header in ag-grid using angular
I have some columns which has four words ie Pre Trading Follow Up, Post Trading Follow Up and some of them having three words.我有一些栏目有四个词,即交易前跟进、交易后跟进,其中一些栏目有三个词。 I tried the below css to wrap the text to multiple lines.
我尝试使用下面的 css 将文本包装成多行。
::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
white-space: normal;
overflow-wrap: break-word;
}
HTML HTML
<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
</ag-grid-angular>
but the column header remains the same.但列标题保持不变。 I wanted to wrap the column header text to multiple lines.
我想将列标题文本包装成多行。 Is there anyway to do this?
有没有办法做到这一点?
Note: I can able to wrap the content using cellStyle: {'white-space': 'normal'}
注意:我可以使用
cellStyle: {'white-space': 'normal'}
包装内容
{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},
But I wanted to wrap the header.但我想包装标题。
Please review the following stackblitz example.请查看以下 stackblitz 示例。
https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css
In the global style sheet I applied the following... you could use ::ng-deep
in your component css, this is the first stackblitz I could find with ag-grid
to fork and is not mine so there was no component css to use.在全局样式表中,我应用了以下内容......你可以在你的组件 css 中使用
::ng-deep
,这是我能找到的第一个使用ag-grid
fork 的 stackblitz 并且不是我的,所以没有组件 css用。
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
The next piece is to use property headerHeight
下一块是使用属性
headerHeight
this.gridOptions = <GridOptions>{
headerHeight:75,
This part unfortunately is unavoidable... it also doesn't allow for you to make the header height dynamic based on the word wrap requirements.不幸的是,这部分是不可避免的......它也不允许您根据自动换行要求动态设置标题高度。
top
style dynamically when the view is rendered;top
样式; adjusting the header height via ::ng-deep
will not dynamically shift the top
of the content area down as it is calculated by the headerHeight
property... if undefined the default is 25px
so the top
for content area is also 25px
.::ng-deep
调整标题高度不会动态地将内容区域的top
向下移动,因为它是由headerHeight
属性计算的...如果未定义,则默认值为25px
所以内容区域的top
也是25px
。::ng-deep
.. so you don't know if ::ng-deep
truly worked... visually that is... as the header extends under the content area.::ng-deep
更改高度时,内容区域的 z-index 会导致它与标题重叠...所以您不知道::ng-deep
真的有效...在视觉上是...因为标题在内容区域下延伸。 Sorry to say but this will be as close as you can get... adjusting all elements, shifting down the top
etc based on a dynamic header height via DOM manipulation I fear will just get too ugly... and if you need the header height dynamic to the point this is a show stopper... it may be best to explore other options as a replacement to ag-grid
.很抱歉,但这将尽可能接近您......调整所有元素,通过DOM操作根据动态标题高度向下移动
top
等我担心会变得太丑陋......如果你需要标题高度动态到这一点,这是一个表演障碍......最好探索其他选项作为ag-grid
的替代品。
https://www.ag-grid.com/javascript-grid-column-header/#headerHeight https://www.ag-grid.com/javascript-grid-column-header/#headerHeight
为了达到预期的结果,请使用以下选项,在该特定列 headerName 的列定义中使用换行标记 - br
{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}
Angular has encapsulation. Angular 有封装。
But ag-grid doesn't care encapsulation.但是 ag-grid 并不关心封装。 so we need to set
.ag-header-cell-label
and .ag-header-cell-text
globally.所以我们需要
.ag-header-cell-label
设置.ag-header-cell-label
和.ag-header-cell-text
。
We set ViewEncapsulation.None
at Component property and write css or scss, this can set css globally.我们在Component属性设置
ViewEncapsulation.None
,写css或者scss,这样可以全局设置css。
Global css is applied all ag-grid component.全局 css 应用于所有 ag-grid 组件。 If you want to set
.ag-header-cell-label
and .ag-header-cell-text
only one ag-grid component, set headerClass at gridOptions
如果您只想设置
.ag-header-cell-label
和.ag-header-cell-text
一个 ag-grid 组件,请在gridOptions
设置gridOptions
this.gridOptions = {
defaultColDef: {
headerClass: 'myfunc-default-header'
},
headerHeight:75
};
And write scss file like this.并像这样编写scss文件。
.myfunc-default-header {
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
}
this can only apply .ag-header-cell-label
and .ag-header-cell-text
inside the my-func-deafult-header
.这只能在
my-func-deafult-header
应用.ag-header-cell-label
和.ag-header-cell-text
。
So we can apply only one ag-grid component.所以我们只能应用一个 ag-grid 组件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.