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
Check 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:
<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:
<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/
two options
1- properties that can be used to change the different heights
<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
<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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.