[英]How to increase the height of column header in ag-grid?
Is there a way to increase the height of the column header like we do for the width.
有没有办法像我们增加宽度一样增加列标题的高度。 I need this because I've embedded a piechart in header and which is binded but the column is too short to show it completely.
我需要这个,因为我在标题中嵌入了一个饼图,它是绑定的,但列太短而无法完全显示。 is there a way to increase size of a column header.
有没有办法增加列标题的大小。
You have a property headerHeight in gridOptions您在 gridOptions 中有一个属性 headerHeight
Check https://www.ag-grid.com/javascript-grid-properties/index.php检查https://www.ag-grid.com/javascript-grid-properties/index.php
onGridReady(params) {
this.gridApi = params.api;
this.gridApi.setHeaderHeight(<set your header height in pixel>);
}
bind onGridReady()
function to gridReady event as follows:将
onGridReady()
函数绑定到 gridReady 事件,如下所示:
<ag-grid-angular(gridReady)="onGridReady($event)"> </ag-grid-angular>
Header Height property can also be set directly on the grid component in pixels like so: Header Height 属性也可以直接在网格组件上以像素为单位设置,如下所示:
<ag-grid-vue style="width: 100%;height: 47vh;"
class="ag-theme-balham"
:columnDefs="columnDefs"
:rowData="rowData"
headerHeight="50">
</ag-grid-vue>
check Column Headers documentation https://www.ag-grid.com/javascript-grid-column-header/检查列标题文档https://www.ag-grid.com/javascript-grid-column-header/
two options两种选择
1- properties that can be used to change the different heights 1- 可用于更改不同高度的属性
<ag-grid-angular
[columnDefs]="columnDefs"
[rowData]="rowData"
[headerHeight]="headerHeight"
[groupHeaderHeight]="groupHeaderHeight"
[floatingFiltersHeight]="floatingFiltersHeight"
[pivotGroupHeaderHeight]="pivotGroupHeaderHeight"
[pivotHeaderHeight]="pivotHeaderHeight"
></ag-grid-angular>
2- setter methods that can be called from the API 2- 可以从 API 调用的 setter 方法
<ag-grid-angular
[columnDefs]="columnDefs"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
></ag-grid-angular>
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
}
setHeaderHeight(value) {
this.gridApi.setHeaderHeight(value);
setIdText('headerHeight', value);
}
setGroupHeaderHeight(value) {
this.gridApi.setGroupHeaderHeight(value);
setIdText('groupHeaderHeight', value);
}
setFloatingFiltersHeight(value) {
this.gridApi.setFloatingFiltersHeight(value);
setIdText('floatingFiltersHeight', value);
}
setPivotGroupHeaderHeight(value) {
this.gridApi.setPivotGroupHeaderHeight(value);
setIdText('pivotGroupHeaderHeight', value);
}
setPivotHeaderHeight(value) {
this.gridApi.setPivotHeaderHeight(value);
setIdText('pivotHeaderHeight', value);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.